Janady13/thatstupidcomputer / tests/browser/animation-upgrades.spec.ts

1import { test, expect, type Locator, type Page } from '@playwright/test'; 2import AxeBuilder from '@axe-core/playwright'; 3 4// Authored portable acceptance checks. NOT executed on the authoring host: 5// browser policy explicitly blocked that environment. No real email or analytics. 6// Run against the dedicated fixture server in playwright.config.ts after build. 7const google = /^https:\/\/(?:[^/]+\.)?(?:googletagmanager\.com|google-analytics\.com)\//; 8const cast = [ 9 ['smartphone', 'Smartphone', 'Deadpan and sarcastic'], 10 ['flip-phone', 'Flip-phone', 'Theatrical and expressive'], 11 ['app-bot', 'App-bot', 'Eager and bouncy'], 12 ['pager', 'Pager', 'Anxious and alert'], 13 ['handheld', 'Handheld', 'Competitive and crisp'], 14] as const; 15 16test.beforeEach(async ({ page }) => { 17 await page.route('**/api/demo', route => route.fulfill({ status: 503, contentType: 'application/json', body: JSON.stringify({ ok: false, code: 'test_intercept', message: 'Synthetic request intercepted. No email was sent.' }) })); 18 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: null } }) })); 19 await page.route(google, route => route.abort('blockedbyclient')); 20}); 21 22async function openPlayground(page: Page, motion = false) { 23 await page.emulateMedia({ reducedMotion: motion ? 'no-preference' : 'reduce' }); 24 await page.goto('/work/'); 25 const playground = page.getByTestId('character-playground'); 26 await expect(playground.getByLabel('All expressions and moves')).toBeVisible(); 27 await expect(playground.getByRole('button', { name: 'See this expression' })).toBeEnabled(); 28 await page.getByTestId('character-stage').scrollIntoViewIfNeeded(); 29 if (motion) await expect(page.getByTestId('stage-actor-handle')).toHaveAttribute('aria-disabled', 'false'); 30 return playground; 31} 32 33async function actorX(page: Page) { 34 return Number(await page.getByTestId('stage-actor').getAttribute('data-x')); 35} 36 37async function expectActorInside(page: Page) { 38 const stage = await page.getByTestId('character-stage').boundingBox(); 39 const actor = await page.getByTestId('stage-actor').boundingBox(); 40 expect(stage).not.toBeNull(); expect(actor).not.toBeNull(); 41 if (!stage || !actor) return; 42 expect(actor.x).toBeGreaterThanOrEqual(stage.x - 1); 43 expect(actor.y).toBeGreaterThanOrEqual(stage.y - 1); 44 expect(actor.x + actor.width).toBeLessThanOrEqual(stage.x + stage.width + 1); 45 expect(actor.y + actor.height).toBeLessThanOrEqual(stage.y + stage.height + 1); 46} 47 48async function expectNoOverflow(page: Page, playground: Locator) { 49 const widths = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, content: Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) })); 50 expect(widths.content).toBeLessThanOrEqual(widths.viewport + 1); 51 const local = await playground.evaluate(element => ({ width: element.clientWidth, content: element.scrollWidth })); 52 expect(local.content).toBeLessThanOrEqual(local.width + 1); 53} 54 55test('the work page offers all five personalities and 32 expressions without hydration errors', async ({ page }) => { 56 const errors: string[] = []; 57 page.on('pageerror', error => errors.push(error.message)); 58 page.on('console', message => { if (message.type() === 'error') errors.push(message.text()); }); 59 const playground = await openPlayground(page); 60 await expect(page.getByRole('heading', { level: 1, name: 'You are already looking at a piece of the work.' })).toHaveCount(1); 61 await expect(page.getByRole('heading', { name: 'Meet the characters.', exact: true })).toHaveCount(1); 62 const expressions = playground.getByLabel('All expressions and moves'); 63 await expect(expressions.locator('option')).toHaveCount(32); 64 expect(await expressions.locator('optgroup').evaluateAll(groups => groups.map(group => group.getAttribute('label')))).toEqual(['Moods', 'Reactions', 'Gestures', 'Movement']); 65 for (const [slug, name, personality] of cast) { 66 await playground.locator(`[data-character-choice="${slug}"]`).click(); 67 await expect(playground).toHaveAttribute('data-character', slug); 68 await expect(playground.locator('.playground-personality')).toContainText(personality); 69 await expect(playground.getByRole('button', { name, exact: true })).toHaveAttribute('aria-pressed', 'true'); 70 await expect(playground.getByRole('button', { name: 'See this expression' })).toBeEnabled(); 71 for (const mood of ['Laugh', 'Suspicious', 'Facepalm', 'Shy', 'Proud']) { 72 await playground.getByRole('button', { name: mood, exact: true }).click(); 73 await expect(playground).toHaveAttribute('data-selected-action', mood); 74 await expect(page.getByTestId('stage-actor')).toHaveAttribute('data-action', mood); 75 } 76 } 77 await expect(playground).toHaveAttribute('data-show', 'idle'); 78 expect(errors).toEqual([]); 79}); 80 81test('reduced motion keeps expressive still poses, disables movement, and gates the censored gesture', async ({ page }) => { 82 const playground = await openPlayground(page); 83 const select = playground.getByLabel('All expressions and moves'); 84 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-reduced-motion', 'true'); 85 await expect(playground.getByRole('button', { name: 'Walk right', exact: true })).toBeDisabled(); 86 await expect(playground.getByRole('button', { name: 'A little performance', exact: true })).toBeDisabled(); 87 // Playwright 1.63 does not report <option disabled> through toBeDisabled; read the property. 88 await expect(select.locator('option[value="RudeFlipOff"]')).toHaveJSProperty('disabled', true); 89 await playground.getByLabel('Allow the rude gesture. It stays censored.').check(); 90 const actions = await select.locator('option').evaluateAll(options => options.map(option => (option as HTMLOptionElement).value)); 91 for (const action of actions) { 92 await select.selectOption(action); 93 await expect(playground).toHaveAttribute('data-selected-action', action); 94 await expect(page.getByTestId('stage-actor')).toHaveAttribute('data-action', action); 95 } 96 await select.selectOption('RudeFlipOff'); 97 await playground.getByRole('button', { name: 'See this expression' }).click(); 98 for (const side of ['left', 'right']) await expect(playground.locator(`[data-rig-id="hand-${side}-censor"]`)).toHaveAttribute('opacity', '1'); 99 await playground.getByLabel('Allow the rude gesture. It stays censored.').uncheck(); 100 await expect(playground).toHaveAttribute('data-selected-action', 'EyeRoll'); 101 // Playwright 1.63 does not report <option disabled> through toBeDisabled; read the property. 102 await expect(select.locator('option[value="RudeFlipOff"]')).toHaveJSProperty('disabled', true); 103 await playground.getByRole('button', { name: 'Pager', exact: true }).click(); 104 await expect(playground.getByLabel('Allow the rude gesture. It stays censored.')).not.toBeChecked(); 105}); 106 107test('cold character assets block playback until the actual renderer is ready', async ({ page }) => { 108 let release!: () => void; 109 const gate = new Promise<void>(resolve => { release = resolve; }); 110 let waitingRequests = 0; 111 await page.route(/\/animation\/(?:mobile\/smartphone\/(?:scene|motion)\.json|[^?]*\.riv)(?:\?|$)/, async route => { waitingRequests++; await gate; await route.continue(); }); 112 await page.emulateMedia({ reducedMotion: 'no-preference' }); 113 try { 114 await page.goto('/work/', { waitUntil: 'domcontentloaded' }); 115 const playground = page.getByTestId('character-playground'); 116 await expect(playground).toBeVisible(); 117 await expect.poll(() => waitingRequests).toBeGreaterThan(0); 118 await expect(playground.getByRole('button', { name: 'See this expression' })).toBeDisabled(); 119 await expect(playground.getByRole('button', { name: 'A little performance', exact: true })).toBeDisabled(); 120 await expect(playground).toHaveAttribute('data-show', 'idle'); 121 release(); 122 await expect(playground.getByRole('button', { name: 'See this expression' })).toBeEnabled(); 123 await expect(playground.getByRole('button', { name: 'A little performance', exact: true })).toBeEnabled(); 124 } finally { release(); } 125}); 126 127test('walk, run, wander, exit and reset remain finite and bounded', async ({ page }) => { 128 const playground = await openPlayground(page, true); 129 await playground.getByRole('button', { name: 'Walk left', exact: true }).click(); 130 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-phase', 'idle'); 131 const left = await actorX(page); 132 await playground.getByRole('button', { name: 'Run across', exact: true }).click(); 133 await expect.poll(() => actorX(page)).toBeGreaterThan(left + 5); 134 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-phase', 'idle'); 135 await expectActorInside(page); 136 await playground.getByRole('button', { name: 'Wander', exact: true }).click(); 137 await expect(playground.locator('.playground-status')).toHaveText('A little wander, then back to their mark.', { timeout: 25_000 }); 138 await expectActorInside(page); 139 await playground.getByRole('button', { name: 'Make an exit', exact: true }).click(); 140 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-phase', 'hidden'); 141 await expect(page.getByTestId('stage-actor-handle')).toHaveAttribute('tabindex', '-1'); 142 await playground.getByRole('button', { name: 'Reset stage', exact: true }).click(); 143 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-phase', 'idle'); 144 await expect(page.getByTestId('stage-actor-handle')).toHaveAttribute('tabindex', '0'); 145 await expectActorInside(page); 146}); 147 148test('tap direction and keyboard pick-up hand control back cleanly', async ({ page }) => { 149 const playground = await openPlayground(page, true); 150 const stage = page.getByTestId('character-stage'); 151 const handle = page.getByTestId('stage-actor-handle'); 152 const before = await actorX(page); 153 // Empty upper-left stage is outside the actor handle on every configured size. 154 await stage.click({ position: { x: 8, y: 8 } }); 155 await expect.poll(() => actorX(page)).toBeLessThan(before); 156 await expect(stage).toHaveAttribute('data-phase', 'idle'); 157 await handle.focus(); await handle.press('Space'); 158 await expect(handle).toHaveAttribute('aria-pressed', 'true'); 159 await handle.press('ArrowRight'); await handle.press('ArrowUp'); 160 await handle.press('Space'); 161 await expect(handle).toHaveAttribute('aria-pressed', 'false'); 162 await expect(stage).toHaveAttribute('data-phase', 'idle'); 163 await expectActorInside(page); 164 await expect(playground).toHaveAttribute('data-show', 'idle'); 165 await handle.press('Home'); 166 await expect(stage).toHaveAttribute('data-phase', 'idle'); 167}); 168 169test('pointer drag interrupts a performance and settles inside the stage', async ({ page }) => { 170 const playground = await openPlayground(page, true); 171 await playground.getByRole('button', { name: 'A little performance', exact: true }).click(); 172 await expect(playground).toHaveAttribute('data-selected-action', 'Suspicious'); 173 const handle = page.getByTestId('stage-actor-handle'); 174 const box = await handle.boundingBox(); 175 expect(box).not.toBeNull(); if (!box) return; 176 await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2); 177 await page.mouse.down(); 178 await expect(playground).toHaveAttribute('data-show', 'idle'); 179 await page.mouse.move(box.x + box.width / 2 + 35, box.y + box.height / 2 - 45, { steps: 8 }); 180 await page.mouse.up(); 181 await expect(handle).toHaveAttribute('aria-pressed', 'false'); 182 await expect(page.getByTestId('character-stage')).toHaveAttribute('data-phase', 'idle'); 183 await expectActorInside(page); 184}); 185 186test('a finite performance pauses offscreen and globally, then ends once', async ({ page }) => { 187 test.setTimeout(75_000); 188 const playground = await openPlayground(page, true); 189 await playground.getByRole('button', { name: 'A little performance', exact: true }).click(); 190 await expect(playground).toHaveAttribute('data-selected-action', 'Suspicious'); 191 await playground.getByRole('button', { name: 'Pause animations', exact: true }).click(); 192 const pausedAction = await playground.getAttribute('data-selected-action'); 193 const pausedX = await actorX(page); 194 // Deliberately exceed the suspicious clip's duration to catch a leaking dwell timer. 195 await page.waitForTimeout(4_500); 196 await expect(playground).toHaveAttribute('data-selected-action', pausedAction!); 197 expect(await actorX(page)).toBe(pausedX); 198 await playground.getByRole('button', { name: 'Resume animations', exact: true }).click(); 199 await page.locator('h1').scrollIntoViewIfNeeded(); 200 await expect(page.getByTestId('stage-actor-handle')).toHaveAttribute('aria-disabled', 'true'); 201 const offscreenAction = await playground.getAttribute('data-selected-action'); 202 await page.waitForTimeout(4_500); 203 await expect(playground).toHaveAttribute('data-selected-action', offscreenAction!); 204 await page.getByTestId('character-stage').scrollIntoViewIfNeeded(); 205 await expect(playground).toHaveAttribute('data-show', 'idle', { timeout: 40_000 }); 206 await expect(playground.locator('.playground-status')).toHaveText('That’s the show. Your turn.'); 207 await expect(playground).toHaveAttribute('data-selected-action', 'Idle'); 208 await page.waitForTimeout(500); 209 await expect(playground).toHaveAttribute('data-show', 'idle'); 210 await expectActorInside(page); 211}); 212 213test('character asset failure preserves the page and recovers when another character is chosen', async ({ page }) => { 214 // Intentional network errors are confined to this test, not filtered globally. 215 await page.route('**/animation/mobile/smartphone/scene.json', route => route.fulfill({ status: 503, body: 'Intentional asset failure' })); 216 await page.goto('/work/'); 217 const playground = page.getByTestId('character-playground'); 218 await expect(playground.getByRole('link', { name: 'Reload the example', exact: true })).toBeVisible(); 219 await expect(playground.getByLabel('All expressions and moves')).toBeEnabled(); 220 await playground.getByRole('button', { name: 'Laugh', exact: true }).click(); 221 await expect(playground).toHaveAttribute('data-selected-action', 'Laugh'); 222 await playground.getByRole('button', { name: 'App-bot', exact: true }).click(); 223 await expect(playground.getByRole('button', { name: 'See this expression' })).toBeEnabled(); 224 await expect(playground.getByRole('link', { name: 'Reload the example', exact: true })).toHaveCount(0); 225 await expect(page.locator('h1')).toHaveText('You are already looking at a piece of the work.'); 226 await page.getByRole('link', { name: 'Get my demo', exact: true }).first().click(); 227 await expect(page.locator('#demo-name')).toBeVisible(); 228}); 229 230test('the playground has readable controls, no detectable axe failures, and reflows at 320px', async ({ page }) => { 231 await page.setViewportSize({ width: 320, height: 900 }); 232 const playground = await openPlayground(page); 233 const axe = await new AxeBuilder({ page }).include('[data-testid="character-playground"]').withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa']).analyze(); 234 expect(axe.violations).toEqual([]); 235 const controls = await playground.locator('button:not(.tsc-character-stage__handle), select, .playground-attitude').evaluateAll(elements => elements.map(element => ({ label: element.textContent?.trim(), height: element.getBoundingClientRect().height, font: parseFloat(getComputedStyle(element).fontSize) }))); 236 for (const control of controls) { expect(control.height, control.label).toBeGreaterThanOrEqual(44); expect(control.font, control.label).toBeGreaterThanOrEqual(14); } 237 await expectNoOverflow(page, playground); 238 // Simulated enlarged text supplements viewport reflow; this is not a claim of 239 // actual browser zoom, screen-reader, or physical-device coverage. 240 await playground.evaluate(root => { 241 const elements = Array.from(root.querySelectorAll<HTMLElement>('h2, h3, p, span, strong, button, select, label, legend')); 242 const sizes = elements.map(element => parseFloat(getComputedStyle(element).fontSize)); 243 elements.forEach((element, index) => { element.style.fontSize = `${sizes[index] * 2}px`; }); 244 }); 245 await expectNoOverflow(page, playground); 246 await expect(playground.getByLabel('All expressions and moves')).toBeEnabled(); 247}); 248