Janady13/thatstupidcomputer / tests/animation/upgrade-acceptance.test.mjs

1import test from 'node:test'; 2import assert from 'node:assert/strict'; 3import { readFileSync, existsSync } from 'node:fs'; 4import { createHash } from 'node:crypto'; 5import { fileURLToPath } from 'node:url'; 6import { resolve } from 'node:path'; 7import { CharacterController, indexNodes, sampleClip } from '../../apps/web/src/animation/mobile/character-controller.mjs'; 8import * as core from '../../apps/web/src/animation/core/contracts.mjs'; 9import { ALL_ACTIONS, NEW_ACTIONS, LEGACY_ACTIONS, PERFORMANCES, CHARACTER_PERFORMANCES } from '../../apps/web/src/animation/performances/catalog.mjs'; 10 11const root = fileURLToPath(new URL('../../', import.meta.url)); 12const read = relative => JSON.parse(readFileSync(resolve(root, relative), 'utf8')); 13const hash = value => createHash('sha256').update(value).digest('hex'); 14const baseline = read('tests/animation/fixtures/v1-baseline.json'); 15const slugs = ['smartphone', 'flip-phone', 'app-bot', 'pager', 'handheld']; 16const oldNames = ['Idle', 'Happy', 'Excited', 'Sad', 'Angry', 'Confused', 'Searching', 'Sassy', 'EyeRoll', 'RudeFlipOff', 'Wave', 'Revived', 'WalkRight', 'WalkLeft']; 17const newNames = ['Laugh', 'Proud', 'Shy', 'Suspicious', 'Startled', 'Frustrated', 'Sleepy', 'WakeUp', 'Think', 'Facepalm', 'Shrug', 'PointLeft', 'PointRight', 'Bow', 'Jump', 'Land', 'RunRight', 'RunLeft']; 18const expectedNames = [...oldNames, ...newNames]; 19const assets = Object.fromEntries(slugs.map(slug => [slug, { 20 model: read(`apps/web/public/animation/mobile/${slug}/scene.json`), 21 clips: read(`apps/web/public/animation/mobile/${slug}/motion.json`), 22}])); 23const keyOf = track => `${track.target}:${track.property}`; 24const near = (a, b, epsilon = 1e-7) => Math.abs(a - b) <= epsilon; 25const baseValue = (node, property) => property === 'rotation' ? (node.rotation ?? 0) * Math.PI / 180 26 : node[property] ?? (property === 'opacity' || property.startsWith('scale') ? 1 : 0); 27const sampleTimes = clip => [...new Set([0, ...Array.from({ length: 40 }, (_, i) => clip.seconds * (i + 1) / 40), clip.seconds, clip.seconds + .5])]; 28 29test('portable original fixture contains all five source hashes and seventy original timelines', () => { 30 assert.equal(baseline.schemaVersion, 1); 31 assert.deepEqual(Object.keys(baseline.characters).sort(), [...slugs].sort()); 32 for (const source of Object.values(baseline.characters)) { 33 assert.match(source.sceneSha256, /^[a-f0-9]{64}$/); 34 assert.match(source.originalMotionSha256, /^[a-f0-9]{64}$/); 35 assert.equal(source.originalClipCount, 14); 36 assert.deepEqual(Object.keys(source.clips), oldNames); 37 for (const clip of Object.values(source.clips)) { 38 assert.ok(Object.keys(clip.tracks).length > 40); 39 for (const sha of Object.values(clip.tracks)) assert.match(sha, /^[a-f0-9]{64}$/); 40 } 41 } 42}); 43 44test('catalog, runtime, TypeScript union and public manifest agree on all thirty-two actions', () => { 45 assert.deepEqual([...LEGACY_ACTIONS], oldNames); 46 assert.deepEqual([...NEW_ACTIONS], newNames); 47 assert.deepEqual([...ALL_ACTIONS], expectedNames); 48 assert.deepEqual([...core.MOBILE_ACTIONS], expectedNames); 49 assert.equal(new Set(ALL_ACTIONS).size, 32); 50 const declaration = readFileSync(resolve(root, 'apps/web/src/animation/mobile/types.ts'), 'utf8'); 51 const union = declaration.match(/export type ActionName\s*=\s*([^;]+);/); 52 assert.ok(union, 'ActionName declaration is present'); 53 assert.deepEqual([...union[1].matchAll(/['"]([A-Za-z]+)['"]/g)].map(match => match[1]), expectedNames); 54 const manifest = read('apps/web/public/animation/manifest.json'); 55 assert.deepEqual(manifest.characters.map(character => character.slug).sort(), [...slugs].sort()); 56 for (const character of manifest.characters) { 57 assert.deepEqual(character.clips.map(clip => clip.name), expectedNames); 58 const actual = new Map(assets[character.slug].clips.map(clip => [clip.name, clip])); 59 for (const declared of character.clips) { 60 const clip = actual.get(declared.name); 61 assert.ok(clip, `${character.slug}: ${declared.name} has actual tracks`); 62 assert.equal(declared.seconds, clip.seconds); 63 assert.equal(declared.loop, clip.loop); 64 } 65 } 66 for (const action of newNames) assert.equal(core.safeAction(action, false), action); 67 assert.equal(core.safeAction('RudeFlipOff', false), 'EyeRoll'); 68 assert.equal(core.safeAction('RudeFlipOff', true), 'RudeFlipOff'); 69}); 70 71for (const slug of slugs) { 72 const { model, clips } = assets[slug]; 73 const nodes = indexNodes(model.root); 74 const original = baseline.characters[slug]; 75 76 test(`${slug}: original scene bytes, IDs and vector geometry remain unchanged`, () => { 77 const bytes = readFileSync(resolve(root, `apps/web/public/animation/mobile/${slug}/scene.json`)); 78 assert.equal(hash(bytes), original.sceneSha256); 79 assert.equal(model.root.id, original.rootId); 80 assert.equal(model.width, 720); assert.equal(model.height, 920); 81 const visit = node => { 82 assert.ok(['group', 'path'].includes(node.type)); 83 assert.equal(node.href, undefined); assert.equal(node.script, undefined); 84 if (node.type === 'path') assert.equal(typeof node.d, 'string'); 85 for (const child of node.children ?? []) visit(child); 86 }; 87 visit(model.root); 88 }); 89 90 test(`${slug}: original fourteen clip identities, metadata and every existing track are preserved`, () => { 91 for (const [name, saved] of Object.entries(original.clips)) { 92 const clip = clips.find(candidate => candidate.name === name); 93 assert.ok(clip, `${name} was removed`); 94 for (const [key, value] of Object.entries(saved.metadata)) assert.deepEqual(clip[key], value, `${name}.${key} changed`); 95 const tracks = new Map(clip.tracks.map(track => [keyOf(track), track])); 96 for (const [key, expected] of Object.entries(saved.tracks)) { 97 assert.ok(tracks.has(key), `${name}: missing original ${key}`); 98 assert.equal(hash(JSON.stringify(tracks.get(key))), expected, `${name}: changed original ${key}`); 99 } 100 for (const track of clip.tracks) { 101 if (Object.hasOwn(saved.tracks, keyOf(track))) continue; 102 assert.ok(nodes[track.target], `${name}: reset target exists`); 103 const neutral = baseValue(nodes[track.target], track.property); 104 assert.ok(track.keys.every(([, value]) => near(value, neutral)), `${name}: additional ${keyOf(track)} must be a constant baseline reset`); 105 } 106 } 107 }); 108 109 test(`${slug}: all thirty-two clips have full property resets, ordered keys and finite bounded poses`, () => { 110 assert.ok(readFileSync(resolve(root, `apps/web/public/animation/mobile/${slug}/motion.json`)).length <= 2_000_000, 'Motion must fit the actual runtime loader transfer limit'); 111 core.validateCharacter(model, clips); 112 assert.deepEqual(clips.map(clip => clip.name), expectedNames); 113 const completeTargets = [...new Set(clips.flatMap(clip => clip.tracks.map(keyOf)))].sort(); 114 for (const clip of clips) { 115 assert.deepEqual(clip.tracks.map(keyOf).sort(), completeTargets, `${clip.name}: stale properties could survive a transition`); 116 for (const track of clip.tracks) { 117 assert.equal(track.keys[0][0], 0); 118 assert.equal(track.keys.at(-1)[0], clip.duration); 119 for (let i = 0; i < track.keys.length; i++) { 120 const [frame, value] = track.keys[i]; 121 assert.ok(Number.isFinite(frame) && Number.isFinite(value)); 122 if (i) assert.ok(frame > track.keys[i - 1][0]); 123 if (track.property === 'opacity') assert.ok(value >= 0 && value <= 1, `${clip.name}: opacity range`); 124 if (track.property.startsWith('scale')) assert.ok(value > 0 && value <= 2, `${clip.name}: scale must not mirror or collapse the drawing`); 125 if (track.property === 'rotation') assert.ok(Math.abs(value) <= Math.PI * 4, `${clip.name}: rotation units/range`); 126 if (track.property === 'x' || track.property === 'y') assert.ok(Math.abs(value) <= 1000, `${clip.name}: unbounded local translation`); 127 if (newNames.includes(clip.name) && track.target === 'body-bob' && track.property === 'x') assert.ok(Math.abs(value) < 20, `${clip.name}: body drift exceeds the acting envelope`); 128 if (newNames.includes(clip.name) && track.target === 'body-bob' && track.property === 'y') assert.ok(value > -75 && value < 35, `${clip.name}: body jump/compression exceeds the acting envelope`); 129 if (['character', 'travel-root', 'rig-root'].includes(track.target) && track.property.startsWith('scale')) assert.equal(value, baseValue(nodes[track.target], track.property), 'Host travel must not mirror lettering'); 130 } 131 if (newNames.includes(clip.name) && clip.loop) assert.ok(near(track.keys[0][1], track.keys.at(-1)[1], 1e-4), `${clip.name}: loop seam ${keyOf(track)}`); 132 } 133 for (const time of sampleTimes(clip)) for (const values of Object.values(sampleClip(clip, time))) for (const value of Object.values(values)) assert.ok(Number.isFinite(value)); 134 } 135 }); 136 137 test(`${slug}: new gestures have visible pose changes at catalog peaks and different movement tracks`, () => { 138 const signatures = new Set(); 139 for (const name of newNames) { 140 const clip = clips.find(candidate => candidate.name === name); 141 assert.ok(clip, `${name} is not generated yet`); 142 const peak = PERFORMANCES[name].peakSeconds; 143 assert.ok(peak > 0 && peak < clip.seconds, `${name}: representative time lies within actual clip`); 144 const first = sampleClip(clip, 0), pose = sampleClip(clip, peak); 145 let changedTargets = new Set(); 146 for (const [target, values] of Object.entries(pose)) for (const [property, value] of Object.entries(values)) { 147 const start = first[target]?.[property] ?? baseValue(nodes[target], property); 148 const threshold = property === 'rotation' ? .035 : property === 'opacity' ? .4 : property.startsWith('scale') ? .1 : 2; 149 if (Math.abs(value - start) >= threshold) changedTargets.add(target); 150 } 151 assert.ok(changedTargets.size >= 2, `${name}: peak must change at least two rig layers materially`); 152 const animated = clip.tracks.filter(track => track.keys.some(([, value]) => !near(value, track.keys[0][1], 1e-4))); 153 assert.ok(animated.length >= 4, `${name}: actual multi-layer motion required`); 154 signatures.add(movementSignature(model, clip)); 155 } 156 assert.equal(signatures.size, 18, 'Action names must correspond to distinct motion, not relabeled copies'); 157 const sleepy = clips.find(clip => clip.name === 'Sleepy'), wake = clips.find(clip => clip.name === 'WakeUp'); 158 assert.deepEqual(sampleClip(sleepy, sleepy.seconds), sampleClip(wake, 0), 'The sleep-to-wake sequence must share its joining pose'); 159 }); 160 161 test(`${slug}: new actions keep limb connections and readable stage-space pivots`, () => { 162 for (const clip of clips.filter(candidate => newNames.includes(candidate.name))) for (const time of sampleTimes(clip)) { 163 const positions = worldTransforms(model.root, sampleClip(clip, time)); 164 for (const side of ['left', 'right']) for (const [joint, end] of [[`thigh-${side}`, `knee-${side}`], [`calf-${side}`, `ankle-${side}`], [`upper-arm-${side}`, `elbow-${side}`], [`forearm-${side}`, `wrist-${side}`]]) { 165 const a = positions[joint], b = positions[end]; 166 const expectedLength = Math.hypot(nodes[end].x ?? 0, nodes[end].y ?? 0); 167 assert.ok(near(Math.hypot(a[4] - b[4], a[5] - b[5]), expectedLength, .01), `${clip.name}@${time}: ${joint} length changed`); 168 } 169 for (const target of ['face', 'wrist-left', 'wrist-right', 'ankle-left', 'ankle-right']) { 170 const [, , , , x, y] = positions[target]; 171 assert.ok(x >= -36 && x <= 756 && y >= -92 && y <= 1012, `${clip.name}@${time}: ${target} pivot is outside the stage guard band`); 172 } 173 } 174 }); 175 176 test(`${slug}: action transitions clear imperative poses and destruction releases owned resources`, () => { 177 withFakeBrowser(environment => { 178 const svg = fakeSvg(model); 179 const controller = new CharacterController(svg, model, clips, { externalClock: true }); 180 for (const name of [...newNames, ...oldNames]) { 181 const clip = clips.find(candidate => candidate.name === name); 182 assert.ok(clip); 183 controller.setAction(name); 184 for (let i = 0; i < 4; i++) controller.advance(.1); 185 const freshSvg = fakeSvg(model); 186 const fresh = new CharacterController(freshSvg, model, clips, { action: name, externalClock: true }); 187 fresh.seek(.4); 188 assert.deepEqual(svg.snapshot(), freshSvg.snapshot(), `${name}: previous action left stale SVG attributes`); 189 fresh.destroy(); 190 controller.seek(Math.min(clip.seconds * .6, 2)); 191 } 192 controller.setLayerVisible('device-body', false); 193 controller.destroy(); 194 assert.equal(svg.nodes['device-body'].style.display, ''); 195 assert.equal(environment.frames.size, 0); 196 assert.ok(environment.observers.every(observer => observer.disconnected)); 197 assert.equal(environment.mediaListeners.size, 0); 198 assert.equal(environment.documentListeners.size, 0); 199 const snapshot = svg.snapshot(); 200 controller.advance(.1); controller.seek(3); 201 assert.deepEqual(svg.snapshot(), snapshot, 'destroyed controller must not mutate its former SVG'); 202 }); 203 }); 204} 205 206test('character personalities differ in sampled motion after geometry offsets and metadata are removed', () => { 207 assert.deepEqual(Object.keys(CHARACTER_PERFORMANCES).sort(), [...slugs].sort()); 208 for (const action of newNames) { 209 const signatures = slugs.map(slug => { 210 const clip = assets[slug].clips.find(candidate => candidate.name === action); 211 assert.ok(clip, `${slug}: ${action} is not generated yet`); 212 return movementSignature(assets[slug].model, clip); 213 }); 214 assert.equal(new Set(signatures).size, 5, `${action}: five labels must have five actual acting profiles`); 215 } 216}); 217 218test('completed one-shots stop scheduling frames and a fresh action rearms playback', () => { 219 const { model, clips } = assets.smartphone; 220 assert.ok(clips.some(clip => clip.name === 'Land')); 221 withFakeBrowser(environment => { 222 let completions = 0; 223 const player = new CharacterController(fakeSvg(model), model, clips, { action: 'Land', onComplete: () => completions++ }); 224 let timestamp = 1000; 225 for (let i = 0; i < 100 && environment.frames.size; i++) { environment.runFrame(timestamp); timestamp += 100; } 226 assert.equal(completions, 1); 227 assert.equal(player.complete, true); 228 assert.equal(environment.frames.size, 0, 'A completed nonlooping action must stop requesting animation frames'); 229 player.seek(.2); 230 assert.equal(player.complete, false); 231 assert.equal(environment.frames.size, 1, 'Seeking back into a completed action rearms unpaused playback'); 232 player.setAction('RunRight'); 233 assert.equal(player.complete, false); 234 assert.equal(environment.frames.size, 1); 235 player.pause(); assert.equal(environment.frames.size, 0); 236 player.setAction('Wave'); assert.equal(environment.frames.size, 0, 'changing action preserves explicit pause'); 237 player.resume(); assert.equal(environment.frames.size, 1); 238 environment.media.matches = true; 239 for (const listener of environment.mediaListeners) listener(); 240 assert.equal(environment.frames.size, 0, 'reduced motion stops scheduling'); 241 player.destroy(); 242 }); 243}); 244 245test('reduced motion displays the catalog Sleepy and Startled peaks without scheduling frames', () => { 246 const { model, clips } = assets.smartphone; 247 withFakeBrowser(environment => { 248 environment.media.matches = true; 249 const svg = fakeSvg(model); 250 const rendered = []; 251 const player = new CharacterController(svg, model, clips, { action: 'Sleepy', onRender: frame => rendered.push(frame) }); 252 for (const action of ['Sleepy', 'Startled']) { 253 player.setAction(action); 254 const clip = clips.find(candidate => candidate.name === action); 255 const peak = PERFORMANCES[action].peakSeconds; 256 assert.equal(rendered.at(-1).time, peak); 257 assert.equal(svg.dataset.action, action); 258 assert.deepEqual(player.pose, sampleClip(clip, peak), `${action}: reduced motion must show the expressive peak`); 259 assert.equal(environment.frames.size, 0); 260 const snapshot = svg.snapshot(); 261 player.advance(.1); 262 assert.deepEqual(svg.snapshot(), snapshot, 'reduced pose remains still'); 263 } 264 player.destroy(); 265 assert.equal(environment.frames.size, 0); 266 }); 267}); 268 269test('upgraded native evidence, when supplied, names all thirty-two actions and binds to actual bytes', t => { 270 const relative = 'native/canvas-verified-assets.json'; 271 if (!existsSync(resolve(root, relative))) { t.skip('BLOCKED: upgraded native runtime evidence has not been supplied'); return; } 272 const records = read(relative); 273 if (!Object.values(records).some(record => record.animations?.some(name => newNames.includes(name)))) { 274 t.skip('BLOCKED: retained fourteen-action native evidence does not verify this upgrade'); return; 275 } 276 for (const slug of slugs) { 277 const record = records[slug]; 278 assert.ok(record, `${slug}: missing upgraded native evidence`); 279 assert.equal(record.status, 'canvas-runtime-verified'); 280 assert.deepEqual([...record.animations].sort(), [...expectedNames].sort()); 281 assert.equal(record.actionCount, expectedNames.length); 282 assert.ok(Number.isInteger(record.sampleCount) && record.sampleCount >= expectedNames.length * 2); 283 assert.match(record.sha256, /^[a-f0-9]{64}$/); 284 assert.ok(record.runtimeVersion && record.testedAt); 285 assert.ok(Number.isFinite(Date.parse(record.testedAt))); 286 assert.notEqual(record.browserWebGLVerified, true, 'Node/Canvas evidence cannot claim the policy-blocked browser verification'); 287 assert.equal(record.src, `/animation/rive/${slug}.riv`); 288 assert.equal(hash(readFileSync(resolve(root, `apps/web/public${record.src}`))), record.sha256); 289 assert.equal(hash(readFileSync(resolve(root, `apps/web/public/animation/mobile/${slug}/motion.json`))), record.motionSHA256, 290 `${slug}: native evidence must refer to the current motion source`); 291 } 292}); 293 294function movementSignature(model, clip) { 295 const nodes = indexNodes(model.root); 296 const targets = ['body-bob', 'torso-roll', 'device-body', 'upper-arm-left', 'upper-arm-right', 'forearm-left', 'forearm-right', 'brow-left', 'brow-right', 'eye-left', 'eye-right']; 297 const values = []; 298 for (const fraction of [.13, .29, .47, .68, .86]) { 299 const pose = sampleClip(clip, clip.seconds * fraction); 300 for (const target of targets) for (const property of ['x', 'y', 'rotation', 'scaleY']) { 301 const neutral = baseValue(nodes[target], property); 302 values.push(Math.round(((pose[target]?.[property] ?? neutral) - neutral) * 1000) / 1000); 303 } 304 } 305 return hash(JSON.stringify(values)); 306} 307 308function worldTransforms(rootNode, pose) { 309 const result = {}; 310 const multiply = (a, b) => [a[0] * b[0] + a[2] * b[1], a[1] * b[0] + a[3] * b[1], a[0] * b[2] + a[2] * b[3], a[1] * b[2] + a[3] * b[3], a[0] * b[4] + a[2] * b[5] + a[4], a[1] * b[4] + a[3] * b[5] + a[5]]; 311 function visit(node, parent) { 312 const p = pose[node.id] ?? {}; 313 const angle = p.rotation ?? baseValue(node, 'rotation'); 314 const sx = p.scaleX ?? node.scaleX ?? 1, sy = p.scaleY ?? node.scaleY ?? 1; 315 const matrix = [Math.cos(angle) * sx, Math.sin(angle) * sx, -Math.sin(angle) * sy, Math.cos(angle) * sy, p.x ?? node.x ?? 0, p.y ?? node.y ?? 0]; 316 const world = multiply(parent, matrix); 317 result[node.id] = world; 318 for (const child of node.children ?? []) visit(child, world); 319 } 320 visit(rootNode, [1, 0, 0, 1, 0, 0]); 321 return result; 322} 323 324function fakeSvg(model) { 325 const nodes = Object.fromEntries(Object.entries(indexNodes(model.root)).map(([id, source]) => { 326 const attributes = new Map([['transform', `translate(${source.x ?? 0} ${source.y ?? 0}) rotate(${source.rotation ?? 0}) scale(${source.scaleX ?? 1} ${source.scaleY ?? 1})`], ['opacity', String(source.opacity ?? 1)]]); 327 return [id, { dataset: { rigId: id }, attributes, style: { display: '', removeProperty(name) { if (name === 'display') this.display = ''; } }, setAttribute(key, value) { attributes.set(key, String(value)); } }]; 328 })); 329 return { localName: 'svg', dataset: {}, nodes, querySelectorAll: () => Object.values(nodes), snapshot: () => Object.fromEntries(Object.entries(nodes).map(([id, node]) => [id, Object.fromEntries(node.attributes)])) }; 330} 331 332function withFakeBrowser(run) { 333 const names = ['window', 'document', 'requestAnimationFrame', 'cancelAnimationFrame', 'IntersectionObserver']; 334 const saved = new Map(names.map(name => [name, Object.getOwnPropertyDescriptor(globalThis, name)])); 335 const frames = new Map(), mediaListeners = new Set(), documentListeners = new Set(), observers = []; 336 let nextFrame = 1; 337 const media = { matches: false, addEventListener: (_, callback) => mediaListeners.add(callback), removeEventListener: (_, callback) => mediaListeners.delete(callback) }; 338 class Observer { constructor(callback) { this.callback = callback; this.disconnected = false; observers.push(this); } observe() {} disconnect() { this.disconnected = true; } } 339 const values = { 340 window: { matchMedia: () => media, IntersectionObserver: Observer }, 341 document: { hidden: false, addEventListener: (_, callback) => documentListeners.add(callback), removeEventListener: (_, callback) => documentListeners.delete(callback) }, 342 requestAnimationFrame: callback => { const id = nextFrame++; frames.set(id, callback); return id; }, 343 cancelAnimationFrame: id => frames.delete(id), IntersectionObserver: Observer, 344 }; 345 for (const [name, value] of Object.entries(values)) Object.defineProperty(globalThis, name, { value, configurable: true, writable: true }); 346 try { 347 run({ frames, media, mediaListeners, documentListeners, observers, runFrame(timestamp) { const [id, callback] = frames.entries().next().value; frames.delete(id); callback(timestamp); } }); 348 } finally { 349 for (const [name, descriptor] of saved) if (descriptor) Object.defineProperty(globalThis, name, descriptor); else delete globalThis[name]; 350 } 351} 352