test: add Playwright coverage and test ids for radio group - #830
test: add Playwright coverage and test ids for radio group#830fateeand wants to merge 2 commits into
Conversation
Coverage report for library
Test suite run success2474 tests passing in 76 suites. Report generated by 🧪jest coverage report action from 96c89ba |
There was a problem hiding this comment.
🟡 Changes recommended
There are correctness/maintainability issues in newly added test id wiring and a broken TS documentation snippet that should be fixed before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.
Pull request overview
This PR expands the radio-group component family’s E2E coverage and improves testability by introducing data-testid hooks across the radio group/radio/radio-button templates, plus adding new composition demo examples to exercise hint/hideDetails and validation behaviors.
Changes:
- Added Playwright E2E tests for native radio keyboarding, validation/error wiring,
inertfocus blocking, andhideDetailsbehavior. - Added
data-testidattributes throughout the radio-group templates (andhostforcps-radio). - Added two new composition examples and updated the radio page form setup to support them.
File summaries
| File | Description |
|---|---|
| projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio/cps-radio.component.ts | Adds a host-level data-testid to cps-radio. |
| projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-group.component.html | Adds multiple data-testid hooks to the radio-group structure and generated options. |
| projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html | Adds data-testid hooks to radio-button wrapper/input/content/label. |
| projects/composition/src/app/pages/radio-page/radio-page.examples.ts | Adds new examples (“hint”, “required hidden details”) and associated code strings. |
| projects/composition/src/app/pages/radio-page/radio-page.component.ts | Refactors to inject() and adds a second required control for the new example. |
| projects/composition/src/app/pages/radio-page/radio-page.component.html | Renders the two new radio-group examples on the composition page. |
| playwright/cps-ui-kit/components/cps-radio-group.spec.ts | Introduces new Playwright coverage for radio-group behaviors. |
Review details
- Files reviewed: 7/7 changed files
- Comments generated: 3
- Review effort level: Lite
We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.
Playwright test resultsDetails
|
Summary
CpsRadioGroupComponent,CpsRadioComponent,CpsRadioButtonComponent).ArrowDownfrom an enabled radio natively skips adisabledsibling and moves real focus + real checked state to the next enabled one.aria-describedbywiring; selecting the right option clears it.inertblocks focus: a nested, realcps-selectinside an unselected<cps-radio>'s projected content genuinely refuses.focus()calls until its radio is selected.hideDetailssuppresses both a hint and a validation error: one example's lifecycle proves both - a sethintstays absent while untouched, and once driven genuinely invalid (aria-invalid="true") the error stays absent too.TODO: Merge with
feat: add test ids to radio groupRelease notes: