test: add Playwright coverage and test ids for CpsButtonToggleComponent

[fateeand]

Summary

• Added Playwright E2E coverage for CpsButtonToggleComponent, covering behavior that requires a real browser and isn't exercised by the existing Jest unit suite: real click-through selection in both radio and multi-select modes, real native radiogroup arrow-key navigation, real equalWidths layout measurement, real disabled hit-testing within a partially-enabled group, real accessible-name computation, and real two-way-binding/reactive-form readouts.
• Added data-testid attributes to cps-button-toggle's internal template (group container, group label, info circle, and per-option label/button/radio input/icon/label) so consumer apps have stable selectors for their own tests.
• Added three new examples to the /button-toggle docs page to showcase previously-undemonstrated functionality: radioNavigation=false, a component-level ariaLabel without a visible caption, and reactive-forms integration (formControlName).

TODO: Merge with feat: add test ids to button toggle component to generate a release

---

Release notes:

• added Playwright E2E coverage for cps-button-toggle component
• added test ids to cps-button-toggle component

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🟡	Statements	76.15%	6031/7920
🟡	Branches	65.35%	2782/4257
🟡	Functions	77.66%	1123/1446
🟡	Lines	77.11%	5634/7306

Test suite run success

2386 tests passing in 76 suites.

Report generated by 🧪jest coverage report action from d8c169b

[Copilot]

Pull request overview

Adds stable data-testid hooks and Playwright E2E coverage for CpsButtonToggleComponent, and updates the composition docs page to demonstrate additional usage patterns (radioNavigation off, ariaLabel-only, reactive forms).

Changes:

• Added data-testid attributes throughout cps-button-toggle’s internal template to support stable selectors.
• Added new composition examples + page wiring for radioNavigation=false, aria-label without visible caption, and reactive forms integration.
• Introduced a new Playwright spec covering real browser interactions, keyboard navigation, layout measurement, accessibility name behavior, and binding readouts.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
projects/cps-ui-kit/src/lib/components/cps-button-toggle/cps-button-toggle.component.html	Adds internal data-testid attributes and passes option index into templates
projects/composition/src/app/pages/button-toggle-page/button-toggle-page.examples.ts	Adds new example definitions for radioNavigation, ariaLabel-only, and reactive forms
projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.ts	Adds FormBuilder injection + reactive form instance for the new example
projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html	Adds example sections and data-testid attributes used by Playwright
playwright/cps-ui-kit/components/cps-button-toggle.spec.ts	New Playwright E2E suite for cps-button-toggle behavior in a real browser

Comments suppressed due to low confidence (1)

playwright/cps-ui-kit/components/cps-button-toggle.spec.ts:177

• Same issue here: if the options aren't visible yet, boundingBox() can be null and the 0 fallback can invalidate the width-difference assertion. Scroll into view and assert a non-null bounding box before computing widths.

          const box = await option(
            page,
            'icons-unequal-widths-toggle',
            index
          ).boundingBox();

[github-actions]

Playwright test results

 270 passed

Details

 270 tests across 6 suites
 9 minutes, 51 seconds
 d8c169b
 For details, download the Playwright report

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.