fix(ui): one watch-progress colour in app chrome and in the player (#1798)

libs/ui/components/src/lib/progress-capsule/progress-capsule.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { ProgressCapsuleComponent } from './progress-capsule.component';
+
+describe('ProgressCapsuleComponent', () => {
+    let fixture: ComponentFixture<ProgressCapsuleComponent>;
+
+    function render(progress: number): HTMLElement {
+        fixture = TestBed.createComponent(ProgressCapsuleComponent);
+        fixture.componentRef.setInput('progress', progress);
+        fixture.detectChanges();
+        return fixture.nativeElement as HTMLElement;
+    }
+
+    it('fills the capsule to the watched share', () => {
+        const host = render(42);
+
+        expect(
+            host.querySelector<HTMLElement>('.progress-capsule__fill')?.style
+                .width
+        ).toBe('42%');
+        expect(host.querySelector('.progress-capsule--watched')).toBeNull();
+    });
+
+    it('marks an item watched from 90 %', () => {
+        expect(
+            render(90).querySelector('.progress-capsule--watched')
+        ).not.toBeNull();
+    });
+
+    // The capsule sits in app chrome (catalog grids, season episodes), so its
+    // fill is the theme's watch-progress token, like the dashboard rail card.
+    it('draws progress with the app watch-progress token', () => {
+        const source = readFileSync(
+            resolve(
+                process.cwd(),
+                'libs/ui/components/src/lib/progress-capsule/progress-capsule.component.ts'
+            ),
+            'utf8'
+        );
+        const fill = source.match(/&__fill\s*\{([^}]*)\}/)?.[1] ?? '';
+
+        expect(fill).toMatch(/background:\s*var\(--app-progress-color\);/);
+        expect(source).not.toMatch(/#e50914|#ff4d4d/i);
+    });
+});