test: add Playwright coverage and test ids for CpsExpansionPanelComponent - #790
Open
fateeand wants to merge 1 commit into
Open
test: add Playwright coverage and test ids for CpsExpansionPanelComponent#790fateeand wants to merge 1 commit into
fateeand wants to merge 1 commit into
Conversation
fateeand
requested review from
TerranceKhumalo-absa and
korel-san
as code owners
July 29, 2026 13:01
Contributor
Coverage report for library
Test suite run success2435 tests passing in 76 suites. Report generated by 🧪jest coverage report action from 7f30239 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR strengthens CpsExpansionPanelComponent’s testability and behavior coverage by adding stable test selectors, expanding the component’s composition examples, and introducing Playwright E2E tests to validate real browser interactions and animation-driven end states.
Changes:
- Added
data-testidattributes toCpsExpansionPanelComponenttemplate elements (root, header, content, title, chevron, prefix icon) to enable stable selectors for consumer and E2E tests. - Fixed the expanded-state visual issue where the header’s bottom corners remained rounded by conditionally zeroing the header’s bottom border radii while expanded, with new Jest unit tests.
- Added a new “custom border color” composition example and introduced Playwright E2E coverage validating real click/keyboard toggling, disabled behavior, border-bottom animation behavior, and real CSS color token resolution.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.ts | Adjusted import typing (IconType as type-only) to match TS best practices; no behavior change. |
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.spec.ts | Added Jest coverage for header bottom-corner radius behavior in expanded vs collapsed states. |
| projects/cps-ui-kit/src/lib/components/cps-expansion-panel/cps-expansion-panel.component.html | Added data-testid hooks and applied conditional inline styles to square bottom header corners when expanded. |
| projects/composition/src/app/pages/expansion-panel-page/expansion-panel-page.examples.ts | Added a new example snippet demonstrating borderColor="calm". |
| projects/composition/src/app/pages/expansion-panel-page/expansion-panel-page.component.html | Wired the new example into the page and added host-level data-testid attributes used by Playwright. |
| playwright/cps-ui-kit/components/cps-expansion-panel.spec.ts | Added new Playwright E2E tests covering real DOM interactions, animation completion effects, and real-browser CSS color resolution. |
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
CpsExpansionPanelComponent, covering behavior that requires a real browser and isn't exercised by the existing Jest unit suite (every interaction there is driven by callingtoggleExpansion()/onHeaderKeydown()directly, never through real DOM events, and Angular'sAnimationBuilder-driven height animation never actually runs to completion in the test environment): a real click on the header toggling expansion and theAnimationBuilder->onDonepipeline genuinely completing (real computedheight/visibilityreaching their final collapsed/expanded values, not just the state flag flipping); real keyboard activation (Enter/Space) producing the same real outcome; the declarative@panelHeadertrigger actually rendering a realborder-bottomon expand and removing it on collapse; the disabled panel's header genuinely blocking real pointer interaction (pointer-events: none) and being removed from the tab order (tabindex="-1"); and real color resolution for a design-tokenborderColor(default and custom values) and a raw CSS keywordbackgroundColor, the samegetCSSColor/isValidCSSColorreal-browser-sensitive mechanism asCpsDividerComponent'scolorinput.data-testidattributes to the library component's template (root, header, content, title, chevron, prefix icon) so consumer apps have stable selectors for their own tests.borderColor="calm") - the only input with zero live example away from its default before this.borderRadiusits bottom-left/bottom-right corners stayed rounded against the now-visible content edge below it. Fixed with two conditional inline-style bindings on the header (border-bottom-left/right-radius->'0'while expanded,null/inherited otherwise), covered by two new Jest tests.TODO: Merge with
feat: add test ids to expansion panel component and fix header bottom border radiusRelease notes: