test: add Playwright coverage and test ids for CpsIconComponent - #812
Open
fateeand wants to merge 2 commits into
Open
test: add Playwright coverage and test ids for CpsIconComponent#812fateeand wants to merge 2 commits into
fateeand wants to merge 2 commits into
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
July 29, 2026 15:23
Contributor
Coverage report for library
Test suite run success2438 tests passing in 76 suites. Report generated by 🧪jest coverage report action from 6bfffa6 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds end-to-end Playwright coverage around CpsIconComponent behaviors that are difficult/impossible to validate in JSDOM (CSS color resolution, SVG sprite rendering, and real computed sizing), and updates the composition docs page with additional icon examples and stable test selectors.
Changes:
- Added
data-testid="cps-icon"to the icon’s internal rendered<i>element for stable E2E selection. - Expanded the icons composition page with new “token color” and “different sizes” examples (plus minimal styling for the size row).
- Introduced a new Playwright spec validating computed color, sprite rendering, and pixel dimensions.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/src/lib/components/cps-icon/cps-icon.component.html | Adds an internal data-testid for reliable E2E targeting of the rendered icon element. |
| projects/composition/src/app/pages/icons-page/icons-page/icons-page.examples.ts | Adds two new example snippets for token colors and size variants. |
| projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.scss | Adds layout styling for the new “different sizes” row. |
| projects/composition/src/app/pages/icons-page/icons-page/icons-page.component.html | Wires new examples into the icons page and adds test ids used by Playwright. |
| playwright/cps-ui-kit/components/cps-icon.spec.ts | Adds Playwright coverage for computed color, SVG sprite resolution, and real sizing. |
Contributor
Playwright test results
Details
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
CpsIconComponent. Its Jest spec already thoroughly covers therole/aria-hidden/aria-labelhost-attribute logic andsetClasses()'s CSS-class switching - pure Angular/DOM mechanics JSDOM handles reliably. Three genuinely real-browser-only gaps remained: real color resolution (getCSSColor/isValidCSSColor, the same real-browser-sensitive mechanism already covered forCpsDividerComponent/CpsExpansionPanelComponent), Jest only checked thatcomponent.iconColorchanged, never the actual resolved value; real SVG sprite-asset rendering (<use href="...icons.svg#...">depends on an external SVG sprite resolving, which JSDOM doesn't fetch/render); and real computed size dimensions -setClasses()only applies CSS class names, and Angular component stylesheets aren't loaded into the JSDOM test environment at all, so the actual pixel dimensions fromcps-icon.component.scsswere unverified anywhere, not just inconveniently but literally unable to be checked in Jest.data-testid="cps-icon"to the library template's host<i>element.color="error", contrasting the existing rawvar(--cps-text-primary)case) and "Icons at different sizes" (xsmall/small/normal/largein a row) - both inputs had zero live example showing their non-default/non-raw-value behavior before this.TODO: Merge with
feat: add test id to icon componentto generate a releaseRelease notes: