Janady13/thatstupidcomputer / tests/browser/desktop-conversation.spec.ts

1import { test, expect } from '@playwright/test'; 2import AxeBuilder from '@axe-core/playwright'; 3 4// The computer speaks through one caption under the desk: no disclosure card, no 5// floating labels. Run with the portable fixture server; no email or GA is allowed. 6test.beforeEach(async ({ page }) => { 7 await page.route('**/api/demo', route => route.fulfill({ status: 503, contentType: 'application/json', body: JSON.stringify({ ok: false, code: 'test_intercept', message: 'Synthetic request blocked. No email was sent.' }) })); 8 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: null } }) })); 9 await page.route(/^https:\/\/(?:[^/]+\.)?(?:googletagmanager\.com|google-analytics\.com)\//, route => route.abort('blockedbyclient')); 10}); 11 12test('each useful intent reaches the real form with its finite project choice', async ({ page }) => { 13 const errors: string[] = []; 14 page.on('pageerror', error => errors.push(error.message)); 15 page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); }); 16 for (const [project, label] of [['design', 'I need a new website'], ['rescue', 'My website needs rescuing'], ['search', 'Help customers find me']]) { 17 await page.goto('/'); 18 const voice = page.getByTestId('computer-conversation'); 19 await expect(voice).toHaveAttribute('data-conversation', 'closed'); 20 await voice.getByRole('link', { name: label, exact: true }).click(); 21 await expect(voice).toHaveAttribute('data-conversation', 'recommendation'); 22 await expect(voice.locator('.computer-announcement')).not.toHaveText(''); 23 const cta = voice.getByRole('link', { name: 'Show me what you would build', exact: true }); 24 await expect(cta).toBeFocused(); 25 await expect(cta).toHaveAttribute('href', `/contact/?project=${project}&from=computer#demo-request`); 26 await cta.click(); 27 await expect(page).toHaveURL(new RegExp(`/contact/\\?project=${project}&from=computer#demo-request$`)); 28 await expect(page.locator('#demo-projectType')).toHaveValue(project); 29 await expect(page.locator('#demo-name')).toHaveValue(''); 30 await expect(page.locator('.form-accepted')).toHaveCount(0); 31 } 32 expect(errors).toEqual([]); 33}); 34 35test('attitude remains explicitly gated, censored, reversible and linked to a real brief', async ({ page }) => { 36 await page.goto('/'); 37 const voice = page.getByTestId('computer-conversation'); 38 await voice.getByRole('button', { name: 'Roast my website', exact: true }).click(); 39 await expect(voice).toHaveAttribute('data-conversation', 'roast'); 40 await expect(voice).toHaveAttribute('data-attitude', 'off'); 41 await expect(voice.getByRole('button', { name: 'Double the attitude', exact: true })).toHaveCount(0); 42 await voice.getByRole('button', { name: 'Show the censored gesture', exact: true }).click(); 43 await expect(voice).toHaveAttribute('data-attitude', 'allowed'); 44 await expect(voice).toHaveAttribute('data-computer-mood', 'rude-flip-off'); 45 await voice.getByRole('button', { name: 'Double the attitude', exact: true }).click(); 46 await expect(voice).toHaveAttribute('data-computer-mood', 'double-flip-off'); 47 await voice.getByRole('button', { name: 'Put the hands down', exact: true }).click(); 48 await expect(voice).toHaveAttribute('data-attitude', 'off'); 49 await expect(voice).toHaveAttribute('data-computer-mood', 'eye-roll'); 50 await expect(voice.getByRole('link', { name: 'Get my demo', exact: true })).toHaveAttribute('href', '/contact/?project=rescue&from=computer#demo-request'); 51 await voice.getByRole('button', { name: 'Show the censored gesture', exact: true }).click(); 52 await voice.getByRole('button', { name: 'Start again', exact: false }).click(); 53 await expect(voice).toHaveAttribute('data-attitude', 'off'); 54 await expect(voice).toHaveAttribute('data-conversation', 'choose'); 55 await expect(voice.getByRole('link', { name: 'I need a new website', exact: true })).toBeFocused(); 56}); 57 58test('the room itself is the navigation: objects are real links that the computer points at', async ({ page, isMobile }) => { 59 test.skip(isMobile, 'Narrow screens use the link grid under the character instead of hit shapes.'); 60 await page.goto('/'); 61 const hotspots = page.getByRole('navigation', { name: 'Explore the workshop' }); 62 for (const [label, href] of [['What we do', '/services/'], ['The process', '/process/'], ['The work', '/work/'], ['Meet the human', '/about/']]) { 63 await expect(hotspots.getByRole('link', { name: label, exact: true })).toHaveAttribute('href', href); 64 } 65 // No label boxes float over the drawing; the caption names what is under the pointer. 66 await expect(page.locator('.room-link-label')).toHaveCount(0); 67 await page.locator('.room-hotspot-clock').hover(); 68 await expect(page.getByTestId('workshop')).toHaveAttribute('data-focus', 'clock'); 69 await expect(page.locator('.computer-pointing')).toHaveText(/The process/); 70 // The computer turns toward the clock (the controller stamps its live state on the rig). 71 await expect(page.locator('.office-room [data-state]').first()).toHaveAttribute('data-state', 'point-right'); 72 await page.mouse.move(5, 5); 73 await expect(page.getByTestId('workshop')).toHaveAttribute('data-focus', ''); 74 await page.locator('.room-hotspot-clock').click(); 75 await expect(page).toHaveURL(/\/process\/$/); 76 await expect(page.locator('h1')).toBeFocused(); 77 await page.goBack(); 78 await expect(page).toHaveURL(/\/$/); 79 // Keyboard: the hotspots are in the tab order and Enter follows them. 80 await page.locator('.room-hotspot-board').focus(); 81 await expect(page.getByTestId('workshop')).toHaveAttribute('data-focus', 'bulletin-board'); 82 await page.keyboard.press('Enter'); 83 await expect(page).toHaveURL(/\/services\/$/); 84}); 85 86test('choices change only the pose and never override global pause or reduced motion', async ({ page }) => { 87 await page.emulateMedia({ reducedMotion: 'no-preference' }); 88 await page.goto('/'); 89 const voice = page.getByTestId('computer-conversation'); 90 await page.getByRole('button', { name: 'Pause motion', exact: true }).click(); 91 await voice.getByRole('link', { name: 'My website needs rescuing', exact: true }).click(); 92 await expect(voice).toHaveAttribute('data-computer-mood', 'facepalm'); 93 await expect(page.getByRole('button', { name: 'Play motion', exact: true })).toHaveAttribute('aria-pressed', 'true'); 94 await page.emulateMedia({ reducedMotion: 'reduce' }); 95 await voice.getByRole('button', { name: 'Start again', exact: false }).click(); 96 await voice.getByRole('link', { name: 'Help customers find me', exact: true }).click(); 97 await expect(voice).toHaveAttribute('data-computer-mood', 'thinking'); 98 await expect(page.getByRole('button', { name: 'Reduced motion', exact: true })).toBeDisabled(); 99 await expect(voice.locator('.computer-demo')).toHaveAttribute('href', '/contact/?project=search&from=computer#demo-request'); 100}); 101 102test('the caption is readable, has no detectable axe failures and reflows', async ({ page }) => { 103 for (const width of [320, 1440]) { 104 await page.setViewportSize({ width, height: 900 }); 105 await page.goto('/'); 106 const voice = page.getByTestId('computer-conversation'); 107 const results = await new AxeBuilder({ page }).include('[data-testid="computer-conversation"]').withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa']).analyze(); 108 expect(results.violations).toEqual([]); 109 await expect(voice.getByRole('link', { name: 'I need a new website', exact: true })).toBeVisible(); 110 const dimensions = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, content: Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) })); 111 expect(dimensions.content).toBeLessThanOrEqual(dimensions.viewport + 1); 112 const targets = await voice.locator('.computer-choices > a, .computer-choices > button').evaluateAll(elements => elements.filter(element => element.getBoundingClientRect().height > 0).map(element => ({ text: element.textContent, height: element.getBoundingClientRect().height, font: parseFloat(getComputedStyle(element).fontSize) }))); 113 for (const target of targets) { expect(target.height, target.text || '').toBeGreaterThanOrEqual(44); expect(target.font, target.text || '').toBeGreaterThanOrEqual(14); } 114 } 115}); 116 117test('intent links and object links keep the inquiry reachable without JavaScript', async ({ browser, baseURL }) => { 118 const context = await browser.newContext({ javaScriptEnabled: false, baseURL }); 119 const page = await context.newPage(); 120 try { 121 await page.route('**/api/demo', route => route.fulfill({ status: 503, body: 'Synthetic request blocked.' })); 122 await page.goto('/'); 123 await expect(page.getByRole('navigation', { name: 'Explore the workshop' }).getByRole('link', { name: 'The work', exact: true })).toHaveAttribute('href', '/work/'); 124 const rescue = page.getByRole('link', { name: 'My website needs rescuing', exact: true }); 125 await expect(rescue).toHaveAttribute('href', '/contact/?project=rescue&from=computer#demo-request'); 126 await rescue.click(); 127 await expect(page.locator('#demo-name')).toBeVisible(); 128 await expect(page.locator('form[action="/api/demo"]')).toHaveAttribute('method', 'post'); 129 } finally { await context.close(); } 130}); 131