Janady13/thatstupidcomputer / tests/browser/workshop-stories.spec.ts

1import { test, expect } from '@playwright/test'; 2import AxeBuilder from '@axe-core/playwright'; 3 4type StoryVisibilityProbe = { 5 hold: boolean; 6 entries: IntersectionObserverEntry[]; 7 latest: boolean | null; 8 flush: () => void; 9}; 10type StoryProbeWindow = Window & { __tscStoryVisibility: StoryVisibilityProbe }; 11 12test.beforeEach(async ({ page }) => { 13 await page.route('**/api/demo', route => route.fulfill({ status: 503, body: 'Synthetic test. No email sent.' })); 14 await page.route(/^https:\/\/(?:[^/]+\.)?(?:googletagmanager\.com|google-analytics\.com)\//, route => route.abort()); 15}); 16 17test('the guided room story is usable as still poses, keeps real destinations and ends cleanly', async ({ page }) => { 18 const errors: string[] = []; 19 page.on('pageerror', error => errors.push(error.message)); 20 await page.goto('/'); 21 await page.getByRole('button', { name: 'Show me around', exact: true }).click(); 22 const voice = page.getByTestId('computer-conversation'); 23 await expect(voice.getByRole('button', { name: 'Next', exact: true })).toBeFocused(); 24 await expect(voice.locator('.computer-story-heading')).toContainText('Welcome to the workshop'); 25 await expect(voice.getByRole('button', { name: 'Hold that thought' })).toHaveCount(0); 26 await voice.getByRole('button', { name: 'Next', exact: true }).click(); 27 await expect(page.getByTestId('workshop')).toHaveAttribute('data-focus', 'bulletin-board'); 28 await expect(voice.getByRole('link', { name: 'Take a look' })).toHaveAttribute('href', '/services/'); 29 for (let index = 0; index < 4; index++) await voice.getByRole('button', { name: 'Next', exact: true }).click(); 30 await expect(voice.getByRole('link', { name: 'Get my demo' })).toHaveAttribute('href', '/contact/'); 31 await expect(voice.getByRole('button', { name: 'Next', exact: true })).toHaveCount(0); 32 await voice.getByRole('button', { name: 'Your turn', exact: true }).click(); 33 await expect(page.getByTestId('workshop')).toHaveAttribute('data-story', 'none'); 34 await expect(voice.getByRole('link', { name: 'I need a new website', exact: true })).toBeFocused(); 35 expect(errors).toEqual([]); 36}); 37 38test('a story respects pause, resumes its clock and allows immediate cancellation', async ({ page }) => { 39 await page.emulateMedia({ reducedMotion: 'no-preference' }); 40 await page.goto('/'); 41 await page.getByRole('button', { name: 'Watch a website rescue' }).click(); 42 const voice = page.getByTestId('computer-conversation'); 43 await voice.getByRole('button', { name: 'Hold that thought' }).click(); 44 await page.waitForTimeout(150); 45 const heldArt = await page.locator('.room-art').innerHTML(); 46 await page.waitForTimeout(4800); 47 expect(await page.locator('.room-art').innerHTML()).toBe(heldArt); 48 await expect(voice.locator('.computer-story-heading')).toContainText('A familiar feeling'); 49 await voice.getByRole('button', { name: 'Continue story' }).click(); 50 await expect(voice.locator('.computer-story-heading')).toContainText('First, find the problem', { timeout: 6000 }); 51 await voice.getByRole('button', { name: 'End story' }).click(); 52 await expect(page.getByTestId('workshop')).toHaveAttribute('data-story', 'none'); 53 await expect(voice).toHaveAttribute('data-attitude', 'off'); 54}); 55 56test('privacy choices are compact, accessible and never scroll the first visit to the footer', async ({ page }) => { 57 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: 'G-TSCFIXTURE' } }) })); 58 await page.goto('/'); 59 const panel = page.locator('.consent-panel'); 60 await expect(panel).toBeVisible(); 61 const height = (await panel.boundingBox())!.height; 62 expect(height).toBeLessThan(370); 63 await expect(panel.getByRole('button', { name: 'Decline analytics', exact: true })).toBeVisible(); 64 await expect(panel.getByRole('button', { name: 'Allow analytics', exact: true })).toBeVisible(); 65 const audit = await new AxeBuilder({ page }).include('.consent-panel').withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa']).analyze(); 66 expect(audit.violations).toEqual([]); 67 await panel.getByRole('button', { name: 'Decline analytics', exact: true }).click(); 68 await expect(panel).toBeHidden(); 69 expect(await page.evaluate(() => window.scrollY)).toBe(0); 70 await expect(page.locator('#main-content')).toBeFocused(); 71 await page.getByRole('button', { name: 'Privacy preferences', exact: true }).click(); 72 await expect(panel).toBeVisible(); 73 await panel.getByRole('button', { name: 'Close preferences', exact: true }).click(); 74 await expect(page.getByRole('button', { name: 'Privacy preferences', exact: true })).toBeFocused(); 75}); 76 77test('all five characters can choose all three scripts without replacing their rigs', async ({ page }) => { 78 await page.goto('/work/'); 79 const stage = page.getByTestId('character-playground'); 80 for (const slug of ['smartphone', 'flip-phone', 'app-bot', 'pager', 'handheld']) { 81 await stage.locator(`[data-character-choice="${slug}"]`).click(); 82 await expect(stage).toHaveAttribute('data-character', slug); 83 const select = stage.getByLabel('Choose their story'); 84 await expect(select.locator('option')).toHaveCount(3); 85 await select.selectOption('rescue'); 86 await expect(select).toHaveValue('rescue'); 87 await select.selectOption('deadline'); 88 await expect(select).toHaveValue('deadline'); 89 await expect(stage.getByLabel('All expressions and moves').locator('option')).toHaveCount(32); 90 } 91}); 92 93test('new stage stories perform their opening and closing expressions before finishing', async ({ page }) => { 94 test.setTimeout(90000); 95 await page.emulateMedia({ reducedMotion: 'no-preference' }); 96 await page.goto('/work/'); 97 const stage = page.getByTestId('character-playground'); 98 const actor = page.getByTestId('stage-actor'); 99 for (const [script, opening, closing] of [['rescue', 'Sad', 'Proud'], ['deadline', 'Sleepy', 'Bow']]) { 100 await stage.getByLabel('Choose their story').selectOption(script); 101 await stage.getByRole('button', { name: 'A little performance', exact: true }).click(); 102 await page.getByTestId('character-stage').scrollIntoViewIfNeeded(); 103 await expect(actor).toHaveAttribute('data-action', opening!); 104 // A home-positioning command must not swallow the actual acting clip. 105 await page.waitForTimeout(700); 106 await expect(actor).toHaveAttribute('data-action', opening!); 107 await expect(actor).toHaveAttribute('data-action', closing!, { timeout: 40000 }); 108 await page.waitForTimeout(700); 109 await expect(actor).toHaveAttribute('data-action', closing!); 110 await expect(stage).toHaveAttribute('data-show', 'idle', { timeout: 10000 }); 111 await expect(stage.locator('.playground-status')).toHaveText('That’s the show. Your turn.'); 112 } 113}); 114 115test('keyboard focus stays on an available control when a room story reaches its final beat', async ({ page }) => { 116 await page.goto('/'); 117 await page.getByRole('button', { name: 'Show me around', exact: true }).click(); 118 const voice = page.getByTestId('computer-conversation'); 119 for (let index = 0; index < 5; index++) await voice.getByRole('button', { name: 'Next', exact: true }).press('Enter'); 120 await expect(voice.getByRole('button', { name: 'Your turn', exact: true })).toBeFocused(); 121 await voice.getByRole('button', { name: 'Your turn', exact: true }).press('Enter'); 122 await page.emulateMedia({ reducedMotion: 'no-preference' }); 123 await page.getByRole('button', { name: 'Watch a website rescue', exact: true }).click(); 124 for (let index = 0; index < 3; index++) await voice.getByRole('button', { name: 'Next', exact: true }).click(); 125 await voice.getByRole('button', { name: 'End story', exact: true }).focus(); 126 await expect(voice.locator('.computer-story-heading')).toContainText('5 / 5'); 127 await expect(voice.getByRole('button', { name: 'End story', exact: true })).toBeFocused(); 128}); 129 130test('a held final story pose still has a resume control', async ({ page }) => { 131 await page.emulateMedia({ reducedMotion: 'no-preference' }); 132 await page.goto('/'); 133 await page.getByRole('button', { name: 'Watch a website rescue', exact: true }).click(); 134 const voice = page.getByTestId('computer-conversation'); 135 await voice.getByRole('button', { name: 'Hold that thought', exact: true }).click(); 136 for (let index = 0; index < 4; index++) await voice.getByRole('button', { name: 'Next', exact: true }).click(); 137 await expect(voice.getByRole('button', { name: 'Continue story', exact: true })).toBeVisible(); 138 await voice.getByRole('button', { name: 'Continue story', exact: true }).click(); 139 await expect(voice.getByRole('button', { name: 'Hold that thought', exact: true })).toHaveAttribute('aria-pressed', 'false'); 140}); 141 142test('a room story uses the newest visibility change when a quick scroll queues exit and entry together', async ({ page }) => { 143 await page.emulateMedia({ reducedMotion: 'no-preference' }); 144 await page.addInitScript(() => { 145 const NativeObserver = window.IntersectionObserver; 146 const state: StoryVisibilityProbe = { hold: false, entries: [], latest: null, flush: () => {} }; 147 (window as unknown as StoryProbeWindow).__tscStoryVisibility = state; 148 // Keep the browser's actual geometry and records. Deliver a short exit/entry 149 // sequence in one callback, as the IntersectionObserver queue is allowed to do. 150 window.IntersectionObserver = class extends NativeObserver { 151 constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) { 152 super((entries, observer) => { 153 if (options?.threshold !== 0.15) { callback(entries, observer); return; } 154 state.latest = entries.at(-1)?.isIntersecting ?? false; 155 if (!state.hold) { callback(entries, observer); return; } 156 state.entries.push(...entries); 157 state.flush = () => { state.hold = false; callback([...state.entries], observer); }; 158 }, options); 159 } 160 }; 161 }); 162 await page.goto('/'); 163 const voice = page.getByTestId('computer-conversation'); 164 await page.getByRole('button', { name: 'Watch a website rescue', exact: true }).click(); 165 for (let index = 0; index < 3; index++) await voice.getByRole('button', { name: 'Next', exact: true }).click(); 166 await voice.getByRole('button', { name: 'Hold that thought', exact: true }).click(); 167 await voice.getByRole('button', { name: 'End story', exact: true }).focus(); 168 await expect(voice.locator('.computer-story-heading')).toContainText('4 / 5'); 169 await expect.poll(() => page.evaluate(() => (window as unknown as StoryProbeWindow).__tscStoryVisibility.latest)).toBe(true); 170 const scrollPosition = await page.evaluate(() => { 171 (window as unknown as StoryProbeWindow).__tscStoryVisibility.hold = true; 172 return window.scrollY; 173 }); 174 await page.evaluate(() => window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' })); 175 await expect.poll(() => page.evaluate(() => (window as unknown as StoryProbeWindow).__tscStoryVisibility.entries.some(entry => !entry.isIntersecting))).toBe(true); 176 await page.evaluate(top => window.scrollTo({ top, behavior: 'instant' }), scrollPosition); 177 await expect.poll(() => page.evaluate(() => (window as unknown as StoryProbeWindow).__tscStoryVisibility.entries.at(-1)?.isIntersecting)).toBe(true); 178 expect(await page.evaluate(() => (window as unknown as StoryProbeWindow).__tscStoryVisibility.entries[0]?.isIntersecting)).toBe(false); 179 await expect(voice.locator('.computer-story-heading')).toContainText('4 / 5'); 180 await page.evaluate(() => (window as unknown as StoryProbeWindow).__tscStoryVisibility.flush()); 181 // Resume without focus/scroll changes that could emit a fresh observer entry 182 // and conceal the queued-record bug. Keyboard interaction is tested above. 183 await voice.getByRole('button', { name: 'Continue story', exact: true }).evaluate(button => (button as HTMLButtonElement).click()); 184 await expect(voice.locator('.computer-story-heading')).toContainText('5 / 5'); 185 await expect(voice.getByRole('button', { name: 'End story', exact: true })).toBeFocused(); 186}); 187 188test('a room story pauses offscreen and resumes when its stage returns', async ({ page }) => { 189 await page.emulateMedia({ reducedMotion: 'no-preference' }); 190 await page.goto('/'); 191 await page.getByRole('button', { name: 'Watch a website rescue', exact: true }).click(); 192 const voice = page.getByTestId('computer-conversation'); 193 const scrollPosition = await page.evaluate(() => window.scrollY); 194 await page.evaluate(() => window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'instant' })); 195 await expect(page.locator('.workshop-stage')).not.toBeInViewport(); 196 await page.waitForTimeout(5000); 197 await expect(voice.locator('.computer-story-heading')).toContainText('1 / 5'); 198 await page.evaluate(top => window.scrollTo({ top, behavior: 'instant' }), scrollPosition); 199 await expect(voice.locator('.computer-story-heading')).toContainText('2 / 5', { timeout: 6000 }); 200}); 201