feat: <director-rail> pacing component

2026-07-20 14:01:51 +01:00
parent 80c8ecb5c8
commit 579dea996d
2 changed files with 74 additions and 0 deletions
@@ -0,0 +1,34 @@
+// tests/components/director-rail.test.js
+import { describe, it, expect, beforeEach } from 'vitest';
+import '../../src/components/director-rail.js';
+import afterimage from '../../src/scenarios/afterimage.js';
+
+describe('<director-rail>', () => {
+  let el;
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    el = document.createElement('director-rail');
+    document.body.appendChild(el);
+  });
+
+  it('shows the first beat and no drift before any stamp', () => {
+    el.update({ scenario: afterimage, elapsedMs: 0, stamps: {} });
+    expect(el.querySelector('[data-role=here]').textContent).toContain('The pier');
+    expect(el.querySelector('.drift')).toBe(null);
+    expect(el.querySelector('[data-role=clock]').textContent).toBe('0:00');
+  });
+
+  it('shows drift and the next hard trigger after a late stamp', () => {
+    el.update({ scenario: afterimage, elapsedMs: 40 * 60000, stamps: { 'a1-open': 6 } });
+    expect(el.querySelector('.drift').textContent).toBe('+6 behind');
+    expect(el.querySelector('[data-role=next]').textContent).toContain('Door-cam');
+  });
+
+  it('emits "reached" when the button is clicked', () => {
+    el.update({ scenario: afterimage, elapsedMs: 0, stamps: {} });
+    let fired = 0;
+    el.addEventListener('reached', () => fired++);
+    el.querySelector('[data-role=reached]').click();
+    expect(fired).toBe(1);
+  });
+});