test: add Playwright coverage and test ids for CpsLoaderComponent

[fateeand]

Summary

• Added Playwright E2E coverage for CpsLoaderComponent, covering real-browser behavior the existing 29-test Jest suite can't reach (it mocks the live-announcer service entirely and can't evaluate real CSS/layout):
  • fullScreen produces real fixed-viewport layout vs. relative-container layout
  • Real screen-reader announcements through CpsLiveAnnouncerService's shared live region, on both mount and destroy, including custom label/doneAriaLabel values
  • showLabel=false renders no visible label element
  • Real prefers-reduced-motion disables/slows the label and spinner animations
  • labelColor's CSS-validity fallback (a bare color token gets wrapped in a real var(--cps-color-*) reference that resolves to a real color)
• Added a "Custom loading and completion labels" demo example (label, ariaLabel, and doneAriaLabel were previously never shown with non-default values) and changed the "white label" example to a bare color token (labelColor="energy") so the CSS-validity fallback path is actually demonstrated.
• Added test ids to the component's template (cps-loader-overlay, cps-loader-content, cps-loader-label, cps-loader-spinner).

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

---

Release notes:

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

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🟡	Statements	78.32%	6209/7928
🟡	Branches	67.88%	2864/4219
🟡	Functions	79.27%	1170/1476
🟡	Lines	79.39%	5805/7312

Test suite run success

2438 tests passing in 76 suites.

Report generated by 🧪jest coverage report action from 676bd6c

[Copilot]

Pull request overview

Adds Playwright E2E coverage for CpsLoaderComponent and introduces stable data-testid hooks in both the component template and the composition demo page so tests can assert real browser layout/CSS/animation and live-region behavior.

Changes:

• Added data-testid attributes to cps-loader template elements and composition demo instances for reliable E2E targeting.
• Updated the loader composition page examples to demonstrate non-default label/ARIA strings and the labelColor fallback path.
• Added a new Playwright spec validating fullscreen vs relative layout, live-region announcements, reduced-motion behavior, and CSS color fallback.

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-loader/cps-loader.component.ts	Removes now-unneeded CommonModule/component imports usage.
projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.html	Replaces ngStyle with style bindings and adds loader element data-testids.
projects/composition/src/app/pages/loader-page/loader-page.examples.ts	Updates/extends composition examples for themed color + custom labels.
projects/composition/src/app/pages/loader-page/loader-page.component.html	Adds test ids and updates examples rendered on the loader demo page.
playwright/cps-ui-kit/components/cps-loader.spec.ts	Introduces Playwright E2E coverage for loader layout, announcements, reduced motion, and color fallback.

Comments suppressed due to low confidence (1)

playwright/cps-ui-kit/components/cps-loader.spec.ts:62

• Same selector-stability issue here: [aria-live="polite"] may match unrelated polite regions. Use the live-announcer region’s .cps-polite-live-announcer-element class so the test is checking the shared announcer service output specifically.

      const politeRegion = page.locator('[aria-live="polite"]');

[github-actions]

Playwright test results

 415 passed
 1 flaky

Details

 416 tests across 13 suites
 14 minutes, 24 seconds
 676bd6c
 For details, download the Playwright report

Flaky tests

webkit › cps-ui-kit/components/cps-autocomplete.spec.ts › cps-autocomplete › Async multi-select › select all toggles every currently fetched option