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

1import { test, expect } from '@playwright/test'; 2 3test.beforeEach(async ({ page }) => { 4 await page.route('**/api/demo', route => route.fulfill({ status: 503, body: 'Synthetic test. No email sent.' })); 5 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: null } }) })); 6 await page.route(/^https:\/\/(?:[^/]+\.)?(?:googletagmanager\.com|google-analytics\.com)\//, route => route.abort()); 7}); 8 9test('the physical keys preview the original rigs on keyboard focus and keep their real destinations', async ({ page }) => { 10 await page.goto('/'); 11 const deck = page.locator('.computer-console'); 12 await expect(deck).toBeVisible(); 13 for (const [intent, label, desktop, mobile] of [ 14 ['design', 'I need a new website', 'happy', 'Happy'], 15 ['rescue', 'My website needs rescuing', 'facepalm', 'Facepalm'], 16 ['search', 'Help customers find me', 'searching', 'Searching'], 17 ]) { 18 const key = deck.getByRole('link', { name: label, exact: true }); 19 await expect(key).toHaveAttribute('href', `/contact/?project=${intent}&from=computer#demo-request`); 20 await key.focus(); 21 const actor = page.viewportSize()!.width < 768 ? page.locator('.pocket-workshop [data-action]').first() : page.locator('.office-room [data-state]').first(); 22 await expect(actor).toHaveAttribute(page.viewportSize()!.width < 768 ? 'data-action' : 'data-state', page.viewportSize()!.width < 768 ? mobile! : desktop!); 23 expect((await key.boundingBox())!.height).toBeGreaterThanOrEqual(64); 24 } 25}); 26 27test('scroll conducts visible character beats without taking over the page or an explicit story', async ({ page, isMobile }) => { 28 test.skip(isMobile, 'Desktop pin geometry; mobile normal-flow behavior has a separate check.'); 29 await page.emulateMedia({ reducedMotion: 'no-preference' }); 30 await page.goto('/'); 31 const workshop = page.getByTestId('workshop'); 32 const actor = page.locator('.office-room [data-state]').first(); 33 await expect(workshop).toHaveAttribute('data-attention', 'hello'); 34 await expect(actor).toHaveAttribute('data-state', 'wave'); 35 const travel = await workshop.evaluate(el => el.getBoundingClientRect().height - innerHeight); 36 expect(travel).toBeGreaterThan(250); 37 for (const [fraction, beat, state] of [[.38, 'trouble', 'startled'], [.7, 'thinking', 'searching'], [.94, 'your-turn', 'demo-invite']] as const) { 38 await page.evaluate(y => window.scrollTo(0, y), travel * fraction); 39 await expect(workshop).toHaveAttribute('data-attention', beat); 40 await expect(actor).toHaveAttribute('data-state', state); 41 const bounds = await actor.boundingBox(); 42 expect(bounds!.y).toBeGreaterThan(0); 43 expect(bounds!.y + bounds!.height).toBeLessThan(900); 44 } 45 await page.getByRole('button', { name: 'Show me around', exact: true }).click(); 46 await page.getByRole('button', { name: 'Hold that thought', exact: true }).click(); 47 await page.evaluate(() => window.scrollTo(0, 0)); 48 await expect(actor).toHaveAttribute('data-state', 'wave'); 49 await expect(workshop).toHaveAttribute('data-story', 'tour'); 50}); 51 52test('reduced motion and short or narrow screens keep a normal-flow scene and useful keys', async ({ page }) => { 53 for (const [width, height] of [[320, 844], [1440, 680], [1440, 900]]) { 54 await page.setViewportSize({ width: width!, height: height! }); 55 await page.goto('/'); 56 const deck = page.locator('.computer-console'); 57 await expect(deck).toBeVisible(); 58 expect(await page.locator('.workshop-stage').evaluate(el => getComputedStyle(el).position)).not.toBe('sticky'); 59 await deck.getByRole('link', { name: 'My website needs rescuing', exact: true }).click(); 60 await expect(page.getByRole('link', { name: 'Show me what you would build', exact: true })).toBeFocused(); 61 expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width! + 1); 62 } 63}); 64 65test('the pocket character sits above its navigation and keyboard, without a collapsed-margin gap', async ({ page }) => { 66 await page.setViewportSize({ width: 390, height: 844 }); 67 await page.goto('/'); 68 await expect(page.locator('.pocket-workshop')).toBeVisible(); 69 const root = (await page.getByTestId('workshop').boundingBox())!; 70 const art = (await page.locator('.pocket-workshop').boundingBox())!; 71 const nav = (await page.locator('.room-navigation').boundingBox())!; 72 const voice = (await page.getByTestId('computer-conversation').boundingBox())!; 73 expect(art.y - root.y).toBeLessThan(10); 74 expect(art.y + art.height).toBeLessThanOrEqual(nav.y + 4); 75 expect(nav.y + nav.height).toBeLessThan(voice.y); 76}); 77 78test('a short desktop still receives the arrival performance before scrolling', async ({ page }) => { 79 await page.setViewportSize({ width: 1440, height: 680 }); 80 await page.emulateMedia({ reducedMotion: 'no-preference' }); 81 await page.goto('/'); 82 await expect(page.locator('.office-room [data-state]').first()).toHaveAttribute('data-state', 'wave'); 83 await expect(page.getByTestId('workshop')).toHaveAttribute('data-attention', 'hello'); 84}); 85 86test('a focused key retains ownership of the character when the page scrolls', async ({ page, isMobile }) => { 87 test.skip(isMobile, 'Desktop scroll-stage ownership; mobile focus preview is covered separately.'); 88 await page.emulateMedia({ reducedMotion: 'no-preference' }); 89 await page.goto('/'); 90 const key = page.locator('.computer-key-design'); 91 await key.focus(); 92 const actor = page.locator('.office-room [data-state]').first(); 93 await expect(actor).toHaveAttribute('data-state', 'happy'); 94 await page.evaluate(() => window.scrollTo(0, 240)); 95 await page.waitForTimeout(200); 96 await expect(actor).toHaveAttribute('data-state', 'happy'); 97 await expect(key).toBeFocused(); 98}); 99 100test('leaving a preview returns the computer to rest, including after a finite gesture has finished', async ({ page, isMobile }) => { 101 test.skip(isMobile, 'Original desktop controller completion; pocket focus is covered separately.'); 102 await page.emulateMedia({ reducedMotion: 'no-preference' }); 103 await page.goto('/'); 104 const actor = page.locator('.office-room [data-state]').first(); 105 await page.locator('.computer-key-search').focus(); 106 await expect(actor).toHaveAttribute('data-state', 'searching'); 107 await page.getByRole('button', { name: 'Show me around', exact: true }).focus(); 108 await expect(actor).toHaveAttribute('data-state', 'idle'); 109 await page.locator('.computer-key-design').focus(); 110 await expect(actor).toHaveAttribute('data-state', 'happy'); 111 await page.waitForTimeout(4800); 112 await page.getByRole('button', { name: 'Show me around', exact: true }).focus(); 113 await expect(actor).toHaveAttribute('data-state', 'idle'); 114}); 115 116test('the desktop controls remain below the actual character at wide and short viewport shapes', async ({ page }) => { 117 for (const [width, height] of [[1440, 680], [1920, 900], [2560, 1080], [768, 1024]]) { 118 await page.setViewportSize({ width: width!, height: height! }); 119 await page.goto('/'); 120 const actor = page.locator('.office-room [data-slot="computer"]'); 121 await expect(actor).toBeVisible(); 122 await expect(actor.locator('[data-state]')).toHaveAttribute('data-state', 'wave'); 123 // Firefox includes the nested SVG viewport in the outer slot's bounds. Measure 124 // the actual painted monitor, case and plug, not that invisible square. 125 const parts = actor.locator('[data-rig-id="monitor"], [data-rig-id="case"], [data-rig-id="connector"]'); 126 await expect(parts).toHaveCount(3); 127 const bottom = await parts.evaluateAll(elements => Math.max(...elements.map(el => el.getBoundingClientRect().bottom))); 128 const voice = (await page.getByTestId('computer-conversation').boundingBox())!; 129 expect(bottom, `${width}x${height}`).toBeLessThan(voice.y); 130 } 131}); 132