Janady13/thatstupidcomputer / tests/animation/demo-ssr.test.ts

1import test from 'node:test'; 2import assert from 'node:assert/strict'; 3import { createRequire } from 'node:module'; 4import { fileURLToPath } from 'node:url'; 5import { build } from 'esbuild'; 6import { DOMParser } from '@xmldom/xmldom'; 7import { createElement, type ComponentType, type ReactNode } from 'react'; 8import { renderToString } from 'react-dom/server'; 9import type { PublicSiteConfig } from '../../packages/site/truth.ts'; 10 11// Follow the existing geometry SSR convention: bundle actual components in 12// memory, with React external. No browser, HTTP server, email, or saved build. 13const root = fileURLToPath(new URL('../../', import.meta.url)); 14const bundle = await build({ 15 absWorkingDir: root, 16 stdin: { contents: `export { render } from './apps/web/src/entry-server.tsx'; 17 export { DemoCompanion } from './apps/web/src/components/DemoCompanion.tsx'; 18 export { AnimationProvider } from './apps/web/src/animation/orchestration/AnimationProvider.tsx';`, resolveDir: root, sourcefile: 'demo-ssr-test-entry.ts' }, 19 bundle: true, write: false, format: 'cjs', platform: 'node', packages: 'external', 20 jsx: 'automatic', loader: { '.css': 'empty' }, logLevel: 'silent', 21}); 22type CompanionStatus = 'idle' | 'pending' | 'accepted' | 'error'; 23type Renderer = { 24 render(path: string, config: PublicSiteConfig): string; 25 DemoCompanion: ComponentType<{ status: CompanionStatus; intent: null }>; 26 AnimationProvider: ComponentType<{ children?: ReactNode }>; 27}; 28const serverModule = { exports: {} as Renderer }; 29new Function('require', 'module', 'exports', bundle.outputFiles[0].text)(createRequire(import.meta.url), serverModule, serverModule.exports); 30const renderer = serverModule.exports; 31// An explicit public fixture avoids reading an operator's .env or truth export. 32const config: PublicSiteConfig = { 33 deployment: 'preview', canonicalOrigin: 'https://thatstupidcomputer.com', 34 siteName: 'That Stupid Computer', websiteId: 'https://thatstupidcomputer.com/#website', 35 contact: {}, crawlerPolicy: { training: 'deny', googleExtended: 'deny', source: 'preview-default' }, 36 truthStatus: 'unavailable-preview', 37}; 38function parse(markup: string) { 39 return new DOMParser().parseFromString(`<html xmlns="http://www.w3.org/1999/xhtml"><body>${markup}</body></html>`, 'application/xhtml+xml'); 40} 41function elements(markup: string, tag: string) { return Array.from(parse(markup).getElementsByTagName(tag)); } 42function byId(markup: string, id: string) { 43 const element = elements(markup, '*').find(node => node.getAttribute('id') === id); 44 assert.ok(element, `Expected server-rendered #${id}`); 45 return element; 46} 47function htmlAttribute(element: ReturnType<typeof byId>, name: string) { 48 // HTML attribute names are insensitive to case; the XML inspection tree is not. 49 return Array.from(element.attributes).find(attribute => attribute.name.toLowerCase() === name.toLowerCase())?.value ?? null; 50} 51 52test('home SSR includes ordinary demo CTAs and three native intent links before JavaScript', () => { 53 const markup = renderer.render('/', config); 54 const links = elements(markup, 'a'); 55 const hero = links.find(node => node.getAttribute('class')?.split(' ').includes('hero-demo')); 56 assert.ok(hero); 57 assert.equal(hero.getAttribute('href'), '/contact/'); 58 assert.equal(hero.textContent?.trim(), 'Get my demo'); 59 assert.equal(hero.hasAttribute('aria-hidden'), false); 60 const intentLabels = { design: 'I need a new website', rescue: 'My website needs rescuing', search: 'Help customers find me' }; 61 for (const [project, label] of Object.entries(intentLabels)) { 62 const link = links.find(node => node.getAttribute('class')?.split(' ').includes('computer-intent') && node.getAttribute('aria-label') === label); 63 assert.ok(link, label); 64 assert.equal(link.getAttribute('href'), `/contact/?project=${project}&from=computer#demo-request`); 65 assert.equal(link.hasAttribute('aria-hidden'), false); 66 assert.equal(link.getElementsByTagName('strong')[0]?.textContent, label, 'The visible key label matches its accessible name.'); 67 } 68 // The caption and tactile keys remain ordinary initial HTML, not a hidden chat panel. 69 const voice = elements(markup, 'div').find(node => node.getAttribute('class')?.split(' ').includes('computer-voice')); 70 assert.ok(voice); 71 assert.match(voice.getElementsByTagName('p')[0].textContent || '', /I have a few ideas for your website/); 72 assert.equal(elements(markup, 'details').some(node => node.getAttribute('class') === 'computer-chat'), false); 73 assert.doesNotMatch(markup, /The server did not finish this Suspense boundary|<canvas\b/); 74}); 75 76test('contact SSR is identical across intent queries and never reflects raw or private query text', () => { 77 const baseline = renderer.render('/contact/', config); 78 const privateText = 'synthetic.person@example.invalid'; 79 const injected = '<img src=x onerror=alert(1)>'; 80 const queries = [ 81 '?project=design&from=computer', '?project=rescue&from=computer', '?project=search&from=computer', 82 `?project=rescue&from=computer&email=${encodeURIComponent(privateText)}&message=${encodeURIComponent(injected)}`, 83 `?project=${encodeURIComponent(privateText)}&from=computer`, 84 '?project=design&project=rescue&from=computer', 85 '?status=accepted&ok=true&message=QUERY_CANNOT_CONFIRM_DELIVERY', 86 '?status=error&message=QUERY_CANNOT_INJECT_AN_ERROR', 87 ]; 88 for (const query of queries) { 89 const markup = renderer.render(`/contact/${query}#demo-request`, config); 90 assert.equal(markup, baseline, `Initial server markup changed for ${query}`); 91 for (const sentinel of [privateText, encodeURIComponent(privateText), injected, 'QUERY_CANNOT_CONFIRM_DELIVERY', 'QUERY_CANNOT_INJECT_AN_ERROR']) assert.equal(markup.includes(sentinel), false); 92 } 93 // Equality checks the first-render contract, not actual browser hydration. 94 assert.doesNotMatch(baseline, /The server did not finish this Suspense boundary/); 95}); 96 97test('the initial form retains native constraints, empty fields and a quiet feedback region', () => { 98 const markup = renderer.render('/contact/?project=rescue&from=computer', config); 99 const form = byId(markup, 'demo-request'); 100 assert.equal(form.tagName, 'form'); 101 assert.equal(form.getAttribute('action'), '/api/demo'); 102 assert.equal(form.getAttribute('method'), 'post'); 103 assert.equal(form.getAttribute('aria-label'), 'Request your website demo'); 104 assert.equal(form.getAttribute('aria-busy'), 'false'); 105 assert.equal(form.hasAttribute('novalidate'), false); 106 const labels = elements(markup, 'label'); 107 for (const field of ['name', 'email', 'business', 'message', 'consent']) { 108 const input = byId(markup, `demo-${field}`); 109 assert.ok(labels.some(label => label.getAttribute('for') === `demo-${field}`), `${field} has a native label`); 110 assert.equal(input.hasAttribute('required'), true, field); 111 assert.equal(input.getAttribute('aria-invalid'), 'false', field); 112 if (field === 'message') assert.equal(input.textContent, ''); 113 else if (field === 'consent') assert.equal(input.hasAttribute('checked'), false); 114 else assert.equal(input.getAttribute('value'), '', field); 115 } 116 assert.equal(byId(markup, 'demo-email').getAttribute('type'), 'email'); 117 assert.equal(htmlAttribute(byId(markup, 'demo-website'), 'maxlength'), '300'); 118 assert.equal(htmlAttribute(byId(markup, 'demo-message'), 'maxlength'), '4000'); 119 const selected = Array.from(byId(markup, 'demo-projectType').getElementsByTagName('option')).filter(option => option.hasAttribute('selected')); 120 assert.deepEqual(selected.map(option => option.getAttribute('value')), ['unsure']); 121 const feedback = elements(markup, 'div').find(node => node.getAttribute('class')?.split(' ').includes('form-feedback')); 122 assert.ok(feedback); 123 assert.equal(feedback.getAttribute('role'), 'status'); 124 assert.equal(feedback.getAttribute('aria-live'), 'polite'); 125 assert.equal(feedback.getAttribute('tabindex'), '-1'); 126 assert.equal(feedback.textContent, ''); 127 const submit = elements(markup, 'button').find(node => node.getAttribute('type') === 'submit'); 128 assert.ok(submit); 129 assert.equal(submit.textContent?.trim(), 'Get my demo'); 130 assert.equal(submit.hasAttribute('disabled'), false); 131 assert.equal(elements(markup, '*').some(node => node.getAttribute('role') === 'alert'), false); 132 assert.doesNotMatch(markup, /class="form-accepted"|Message accepted\.|accepted for sending/); 133}); 134 135test('the actual companion renders distinct pending, accepted and error messages without changing form status', () => { 136 const expected: Record<CompanionStatus, string> = { 137 idle: 'Tell me about your business. The human handles the clever part.', 138 pending: 'I’m keeping an eye on your request.', 139 accepted: 'A good first step. Even I’m impressed.', 140 error: 'Your details are still here. Let’s check what happened below.', 141 }; 142 for (const status of Object.keys(expected) as CompanionStatus[]) { 143 const markup = renderToString(createElement(renderer.AnimationProvider, null, createElement(renderer.DemoCompanion, { status, intent: null }))); 144 const aside = elements(markup, 'aside')[0]; 145 assert.equal(aside.getAttribute('aria-label'), 'A note from the computer'); 146 assert.ok(aside.textContent?.includes(expected[status])); 147 for (const other of Object.keys(expected) as CompanionStatus[]) if (other !== status) assert.equal(aside.textContent?.includes(expected[other]), false); 148 assert.doesNotMatch(markup, /<form\b|class="form-accepted"|role="alert"|<canvas\b|data-computer-art=/); 149 } 150 // Submit/failure transitions and focus require the separately authored browser 151 // tests. This Node test does not claim those unexecuted interactions passed. 152}); 153