test: add Playwright coverage and test ids for CpsButtonComponent - #770
test: add Playwright coverage and test ids for CpsButtonComponent#770fateeand wants to merge 3 commits into
Conversation
Coverage report for library
Test suite run success2386 tests passing in 76 suites. Report generated by 🧪jest coverage report action from 32b8477 |
There was a problem hiding this comment.
Pull request overview
This PR adds end-to-end Playwright coverage for CpsButtonComponent behaviors that depend on real browser semantics (keyboard activation, native form submit/reset, pointer-events gating, layout sizing, and accessible-name resolution). It also introduces stable data-testid hooks in both the component’s internal template and the composition demo page to support reliable selectors.
Changes:
- Added
data-testidattributes insidecps-button(native<button>, spinner/content/icon/label) and on the composition button page examples. - Introduced a new Playwright spec covering disabled behavior, keyboard activation, loading gating/timing, sizing layout, and native form integration.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html | Adds internal data-testid hooks for the native button and key sub-elements. |
| projects/composition/src/app/pages/button-page/button-page.component.html | Adds example-level data-testid hooks used as stable Playwright selectors. |
| playwright/cps-ui-kit/components/cps-button.spec.ts | New Playwright E2E coverage for CpsButtonComponent browser-dependent behavior. |
Comments suppressed due to low confidence (2)
projects/cps-ui-kit/src/lib/components/cps-button/cps-button.component.html:59
- Avoid ngStyle for single-property styling; bind the style property directly instead.
[ngStyle]="{ 'font-size': cvtFontSize || null }">
playwright/cps-ui-kit/components/cps-button.spec.ts:152
- boundingBox() can return null if the element isn't visible; assert it exists before checking width to avoid "received undefined" failures.
const box = await button.boundingBox();
expect(box?.width).toBeGreaterThan(600);
Playwright test resultsDetails
|
Summary
CpsButtonComponent, covering behavior that requires a real browser and isn't exercised by the existing Jest unit suite: native form submit/reset, real hit-testing (pointer-events: none), native tab-order for disabled buttons, real loading-state timing, real layout for custom/full-width sizing, and real accessible-name computation for icon-only buttons.data-testidattributes tocps-button's internal template (native<button>, icon, label, spinner, content wrapper) so consumer apps have stable selectors for their own tests./buttondocs page to showcase custom content color functionality.TODO: Merge with
feat: add test ids to button componentto generate a releaseRelease notes: