test: add Playwright coverage and test ids for CpsProgressCircularComponent

playwright/cps-ui-kit/components/cps-progress-circular.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('cps-progress-circular', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/progress-circular');
+  });
+
+  test.describe('Real CSS custom-property color resolves to an actual color', () => {
+    test('a color name real-resolves through the real stylesheet to its actual RGB value', async ({
+      page
+    }) => {
+      const circle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
+
+      await expect(circle).toHaveCSS('border-top-color', 'rgb(100, 0, 50)');
+      await expect(circle).toHaveCSS('width', '120px');
+    });
+  });
+
+  test.describe('Real prefers-reduced-motion slows, not stops, the spin animation', () => {
+    test('reduced motion real-slows the animation while keeping it running', async ({
+      page
+    }) => {
+      const circle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
+
+      await expect(circle).toHaveCSS('animation-duration', '0.8s');
+      await expect(circle).toHaveCSS('animation-iteration-count', 'infinite');
+
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+      await page.reload();
+      const reducedCircle = page
+        .getByRole('progressbar', { name: 'Luxury progress circular' })
+        .getByTestId('cps-progress-circular');
+
+      await expect(reducedCircle).toHaveCSS('animation-duration', '2.4s');
+      await expect(reducedCircle).toHaveCSS(
+        'animation-iteration-count',
+        'infinite'
+      );
+    });
+  });
+});

projects/composition/src/app/pages/progress-circular-page/progress-circular-page.component.html

@@ -13,6 +13,7 @@
     [htmlCode]="examples.variants.html">
     <div class="progr-circ-group">
       <cps-progress-circular
+        ariaLabel="Luxury progress circular"
         color="luxury"
         diameter="7.5rem"
         strokeWidth="0.5rem"></cps-progress-circular>

projects/composition/src/app/pages/progress-circular-page/progress-circular-page.examples.ts

@@ -1,23 +1,24 @@
 export const progressCircularExamples: Record<
   string,
   { html: string; ts?: string }
 > = {
   variants: {
     html: `
 <div style="display: flex; align-items: center; gap: 3rem; overflow: hidden;">
   <cps-progress-circular
+    ariaLabel="Luxury progress circular"
     color="luxury"
     diameter="7.5rem"
     strokeWidth="0.5rem"></cps-progress-circular>
   <cps-progress-circular diameter="3.75rem"></cps-progress-circular>
   <cps-progress-circular
     color="surprise"
     diameter="1.875rem"
     strokeWidth="0.1875rem"></cps-progress-circular>
   <cps-progress-circular
     color="prepared"
     diameter="0.9375rem"
     strokeWidth="0.125rem"></cps-progress-circular>
 </div>`
   }
 };

projects/cps-ui-kit/src/lib/components/cps-progress-circular/cps-progress-circular.component.html

@@ -1,5 +1,6 @@
 <div
   aria-hidden="true"
   class="cps-progress-circular"
+  data-testid="cps-progress-circular"
   [style.width]="cvtDiameter"
   [style.border]="`${cvtStrokeWidth} solid ${cvtColor}`"></div>