Janady13/thatstupidcomputer / tests/animation/desktop-performances.test.mjs

1import test from 'node:test'; 2import assert from 'node:assert/strict'; 3import { createHash } from 'node:crypto'; 4import { readFileSync } from 'node:fs'; 5import { ComputerMotion, COMPUTER_MOTION_STATES, sampleDesktopPose } from '../../apps/web/src/animation/desktop/computer-motion.mjs'; 6import { DESKTOP_PERFORMANCES, DESKTOP_PERFORMANCE_BY_ID, DESKTOP_LEGACY_STATES, safeDesktopState } from '../../apps/web/src/animation/desktop/performances.mjs'; 7import { GESTURE_BASELINE, gestureAttributes } from '../../apps/web/src/animation/desktop/gesture-geometry.mjs'; 8 9const cables=JSON.parse(readFileSync(new URL('../../apps/web/src/animation/desktop/cable-poses.json',import.meta.url))); 10const originalKeys='bodyX,bodyY,bodyR,headX,headY,headR,fanX,fanY,fanR,fanWire,fanSpeed,eyeOpenL,eyeOpenR,eyeOpacity,browY,browL,browR,browHappy,gazeX,gazeY,noteR,heat,steam,dirt,glass,glassX,glassY,glassR,cursor,plugY,plugR,cableCoil,cableAmp,dustKick'.split(','); 11const peak=id=>sampleDesktopPose(id,DESKTOP_PERFORMANCE_BY_ID[id].peakSeconds,{attitudeEnabled:true}); 12 13test('desktop metadata defines exactly32 unique states and valid complete performance timings',()=>{ 14 assert.equal(DESKTOP_PERFORMANCES.length,32); 15 assert.deepEqual(DESKTOP_PERFORMANCES.map(x=>x.id),COMPUTER_MOTION_STATES); 16 assert.equal(new Set(COMPUTER_MOTION_STATES).size,32); 17 for(const entry of DESKTOP_PERFORMANCES){ 18 assert.equal(DESKTOP_PERFORMANCE_BY_ID[entry.id],entry); 19 assert(Object.isFrozen(entry));assert(entry.label&&entry.description); 20 assert(entry.seconds>0&&entry.seconds<=6.4&&entry.peakSeconds>0&&entry.peakSeconds<entry.seconds); 21 assert.equal(typeof entry.loop,'boolean');assert.equal(typeof entry.requiresAttitude,'boolean'); 22 } 23 assert.deepEqual(DESKTOP_PERFORMANCES.filter(x=>x.requiresAttitude).map(x=>x.id),['rude-flip-off','double-flip-off']); 24}); 25 26test('original twelve numeric pose channels match the immutable v2 reference at120 sampled poses',()=>{ 27 // Captured from the original delivered v2 module, before desktop-v3 edits. 28 const sampled=DESKTOP_LEGACY_STATES.map(state=>[state,[0,.17,.85,1.3,2.6,3.6,6.399,6.4,9.2,14.7].map(time=>{ 29 const p=sampleDesktopPose(state,time); 30 for(const key of Object.keys(GESTURE_BASELINE))assert.equal(p[key],0,`${state}:${key}`); 31 // Rounded to 6 decimals: the raw doubles differ in the last bits between x86-64 and arm64 32 // (raw x86-64 hash 0a9e61c0…d496f9); the rounded table hashes identically on both. 33 return Object.fromEntries(originalKeys.map(key=>[key,typeof p[key]==='number'?Number(p[key].toFixed(6)):p[key]])); 34 })]); 35 assert.equal(createHash('sha256').update(JSON.stringify(sampled)).digest('hex'),'4817abde6e3a9adff304798c4089b58ee1772dcf5849f0c65f0431edf913cf1b'); 36}); 37 38test('all32 authored performances remain finite and new one-shots finish at a stable baseline',()=>{ 39 const signatures=new Set(); 40 for(const entry of DESKTOP_PERFORMANCES){ 41 signatures.add(JSON.stringify(peak(entry.id))); 42 for(let time=0;time<entry.seconds+.2;time+=1/30){ 43 const p=sampleDesktopPose(entry.id,time,{attitudeEnabled:true}); 44 assert(Object.values(p).every(Number.isFinite),entry.id); 45 for(const key of ['heat','steam','eyeOpacity','browHappy','glass','dirt','gestureOpacity','mouthOpen','tongue'])assert(p[key]>=0&&p[key]<=1,`${entry.id}:${key}`); 46 assert(p.eyeOpenL>=0&&p.eyeOpenR>=0); 47 assert(!Object.keys(p).some(key=>/scale/i.test(key)),'the case must remain rigid'); 48 assert(Number.isInteger(p.handL)&&Number.isInteger(p.handR)); 49 if(!entry.requiresAttitude)assert(p.handL!==5&&p.handR!==5,entry.id); 50 } 51 if(!entry.loop){ 52 const end=sampleDesktopPose(entry.id,entry.seconds,{attitudeEnabled:true}); 53 assert.deepEqual(sampleDesktopPose(entry.id,entry.seconds+1000,{attitudeEnabled:true}),end); 54 for(const key of Object.keys(GESTURE_BASELINE))assert.equal(end[key],0,`${entry.id} left ${key} active`); 55 } 56 } 57 assert.equal(signatures.size,32); 58}); 59 60test('poses have specific acting: facepalm, shrug, directions, beckon, tongue and two distinct censored hands',()=>{ 61 const facepalm=peak('facepalm'),shrug=peak('shrug'),left=peak('point-left'),right=peak('point-right'); 62 assert(facepalm.armRX<-400&&facepalm.armRY<-400&&facepalm.eyeOpenL<.3); 63 assert(shrug.armLY<-170&&shrug.armRY<-170&&shrug.armLR<-50&&shrug.armRR>50); 64 assert(left.handL===2&&left.armLR===-90&&left.gazeX<0); 65 assert(right.handR===2&&right.armRR===90&&right.gazeX>0); 66 assert(peak('raspberry').tongue>.8); 67 assert(peak('thumbs-up').handR===3&&peak('demo-success').handR===3); 68 assert(peak('rude-flip-off').handR===5&&peak('rude-flip-off').handL!==5); 69 assert(peak('double-flip-off').handR===5&&peak('double-flip-off').handL===5); 70 const beckonA=sampleDesktopPose('beckon',1.35),beckonB=sampleDesktopPose('beckon',1.8); 71 assert(Math.abs(beckonA.armRR-beckonB.armRR)>10); 72 const angry=peak('angry');assert(angry.heat<=.15,'intermediate brown-on-brown eyes were unreadable in proof'); 73 for(const state of ['point-left','shrug','confused','demo-success'])assert(peak(state).armLX>=25,'left fingers need margin inside the original viewBox'); 74}); 75 76test('attitude requires explicit true and direct samplers reject unknown or inherited states',()=>{ 77 for(const value of [undefined,false,0,1,'true',{},null])for(const state of ['rude-flip-off','double-flip-off']){ 78 assert.equal(safeDesktopState(state,value),'eye-roll'); 79 assert.deepEqual(sampleDesktopPose(state,1.2,{attitudeEnabled:value}),sampleDesktopPose('eye-roll',1.2)); 80 } 81 assert.equal(safeDesktopState('double-flip-off',true),'double-flip-off'); 82 for(const state of ['__proto__','constructor','toString','invented']){ 83 assert.throws(()=>safeDesktopState(state),RangeError); 84 assert.throws(()=>sampleDesktopPose(state,0),RangeError); 85 } 86 for(const time of [-1,NaN,Infinity,'1'])assert.throws(()=>sampleDesktopPose('wave',time),RangeError); 87}); 88 89test('external-clock controller owns no RAF, supports deterministic seek, and copies snapshots',()=>withTestHost(host=>{ 90 const svg=fixtureSvg();const motion=new ComputerMotion(svg,{cables,state:'facepalm',externalClock:true,pointer:false}); 91 const at=DESKTOP_PERFORMANCE_BY_ID.facepalm.peakSeconds; 92 motion.seek(at);const snapshot=motion.getSnapshot(),attributes=svg.snapshot(); 93 assert.equal(snapshot.age,at);assert.equal(snapshot.pose.handR,0);assert.equal(snapshot.state,'facepalm'); 94 snapshot.pose.armRX=999; 95 assert.notEqual(motion.getSnapshot().pose.armRX,999); 96 motion.setState('idle');motion.advance(.1);motion.setState('facepalm',{immediate:true});motion.seek(at); 97 assert.deepEqual(svg.snapshot(),attributes);assert.equal(host.frames.size,0); 98 for(const value of [-1,NaN,Infinity,3601,'1'])assert.throws(()=>motion.seek(value),RangeError); 99 motion.destroy();assert.equal(host.listeners.size,0);assert(host.observers.every(x=>x.disconnected)); 100})); 101 102test('all20 finite runtime performances complete once, settle, and stay asleep',()=>withTestHost(host=>{ 103 for(const entry of DESKTOP_PERFORMANCES.filter(x=>!x.loop)){ 104 const completed=[],frames=[]; 105 const motion=new ComputerMotion(fixtureSvg(),{cables,state:entry.id,attitudeEnabled:true,externalClock:true,pointer:false,onComplete:state=>completed.push(state),onFrame:frame=>frames.push(frame)}); 106 for(let i=0;i<80;i++)motion.advance(.1); 107 assert.deepEqual(completed,[entry.id]);assert.equal(motion.complete,true); 108 assert.equal(frames.at(-1).complete,true); 109 const last=motion.getSnapshot();motion.advance(100);assert.deepEqual(motion.getSnapshot(),last); 110 assert.equal(host.frames.size,0);motion.destroy(); 111 } 112})); 113 114test('pause, reduced motion, document hiding and intersection stop time without catch-up',()=>withTestHost(host=>{ 115 const motion=new ComputerMotion(fixtureSvg(),{cables,state:'wave',pointer:false}); 116 assert.equal(host.frames.size,1);motion.advance(.2);assert.equal(motion.age,.1); 117 for(const [block,unblock] of [ 118 [()=>motion.pause(),()=>motion.resume()], 119 [()=>{host.document.hidden=true;host.emit('visibilitychange');},()=>{host.document.hidden=false;host.emit('visibilitychange');}], 120 [()=>host.observers[0].callback([{isIntersecting:false}]),()=>host.observers[0].callback([{isIntersecting:true}])], 121 ]){ 122 block();assert.equal(host.frames.size,0);const age=motion.age;motion.advance(120);assert.equal(motion.age,age); 123 unblock();assert.equal(host.frames.size,1);host.runFrame(1e9);assert.equal(motion.age,age,'first resumed frame establishes a fresh clock'); 124 } 125 host.media.matches=true;host.emit('media');assert.equal(host.frames.size,0); 126 assert.deepEqual(motion.getSnapshot().pose,peak('wave')); 127 const age=motion.age;motion.advance(100);assert.equal(motion.age,age); 128 motion.destroy();assert.equal(host.frames.size,0); 129})); 130 131test('initial reduced motion and paused loading display representative poses without scheduling',()=>{ 132 for(const mode of ['reduced','paused'])withTestHost(host=>{ 133 host.media.matches=mode==='reduced'; 134 const motion=new ComputerMotion(fixtureSvg(),{cables,state:'facepalm',paused:mode==='paused',pointer:false}); 135 assert.equal(host.frames.size,0);assert.deepEqual(motion.getSnapshot().pose,peak('facepalm')); 136 motion.setIntensity(.8);assert.deepEqual(motion.getSnapshot().pose,peak('facepalm')); 137 motion.setState('shrug');assert.deepEqual(motion.getSnapshot().pose,peak('shrug')); 138 motion.setIntensity(1);assert.deepEqual(motion.getSnapshot().pose,peak('shrug')); 139 motion.destroy(); 140 }); 141}); 142 143test('rude runtime gate and revocation remove middle-finger variants immediately',()=>withTestHost(()=>{ 144 const svg=fixtureSvg();const motion=new ComputerMotion(svg,{cables,state:'double-flip-off',externalClock:true,pointer:false}); 145 assert.equal(motion.state,'eye-roll');assert.equal(motion.requestedState,'double-flip-off'); 146 motion.setAttitudeEnabled(true);motion.setState('double-flip-off');motion.seek(2.55); 147 assert.equal(svg.nodes['gesture-hand-left-middle'].getAttribute('opacity'),'1'); 148 assert.equal(svg.nodes['gesture-hand-right-middle'].getAttribute('opacity'),'1'); 149 motion.setAttitudeEnabled(false); 150 assert.equal(motion.state,'eye-roll'); 151 assert.equal(svg.nodes['gesture-hand-left-middle'].getAttribute('opacity'),'0'); 152 assert.equal(svg.nodes['gesture-hand-right-middle'].getAttribute('opacity'),'0'); 153 motion.destroy(); 154})); 155 156test('completion callbacks can select the next state without returnToIdle overwriting it',()=>withTestHost(()=>{ 157 const motion=new ComputerMotion(fixtureSvg(),{cables,state:'wave',externalClock:true,pointer:false,returnToIdle:true}); 158 motion.options.onComplete=()=>motion.setState('thumbs-up',{immediate:true}); 159 motion.seek(4.39);motion.advance(.1); 160 assert.equal(motion.state,'thumbs-up');assert.equal(motion.complete,false); 161 motion.options.onComplete=undefined;motion.seek(4.19);motion.advance(.1);assert.equal(motion.state,'idle'); 162 motion.destroy(); 163})); 164 165test('state and frame callback reentrancy cannot draw a stale pose or revive a destroyed controller',()=>withTestHost(host=>{ 166 const svg=fixtureSvg();const original=svg.snapshot(); 167 const motion=new ComputerMotion(svg,{cables,externalClock:true,pointer:false}); 168 motion.options.onStateChange=state=>{if(state==='facepalm'){motion.setState('shush',{immediate:true});motion.seek(1.9);}}; 169 motion.setState('facepalm');assert.equal(motion.state,'shush');assert.deepEqual(motion.getSnapshot().pose,peak('shush')); 170 motion.options.onStateChange=undefined; 171 motion.options.onFrame=()=>motion.destroy();motion.advance(.1); 172 assert.equal(motion.destroyed,true);assert.equal(host.frames.size,0);assert.deepEqual(svg.snapshot(),original); 173 motion.resume();motion.setExternalClock(false);motion.setState('wave');assert.equal(host.frames.size,0); 174})); 175 176test('seek is silent about completion and a replacement seek inside onFrame wins',()=>withTestHost(()=>{ 177 let completions=0; 178 const motion=new ComputerMotion(fixtureSvg(),{cables,state:'wave',externalClock:true,pointer:false,onComplete:()=>completions++}); 179 motion.seek(10);assert.equal(motion.complete,true);assert.equal(completions,0); 180 motion.seek(4.39);let replace=true; 181 motion.options.onFrame=()=>{if(replace){replace=false;motion.setState('beckon',{immediate:true});motion.seek(2.15);}}; 182 motion.advance(.1);assert.equal(completions,0);assert.equal(motion.state,'beckon');assert.equal(motion.complete,false); 183 motion.destroy(); 184})); 185 186function fixtureSvg(){ 187 const ids=new Set(['body-motion','monitor','fan','rotor-motion','cable-path','connector','search-arm','brow-left','brow-right','brow-left-motion','brow-right-motion','eye-left-motion','eye-right-motion','eye-left','eye-right','desktop-gestures','gesture-face']); 188 for(const [id] of gestureAttributes(GESTURE_BASELINE))ids.add(id); 189 // A narrow DOM fixture verifies lifecycle and attribute restoration. Separate 190 // rendering tests exercise the actual SSR illustration and raster output. 191 const nodes=Object.fromEntries([...ids].map(id=>{ 192 const attributes=new Map([['id',id],['data-rig-id',id],['transform','translate(0 0)'],['d','M0 0 L1 1']]); 193 return [id,{id,getAttribute:key=>attributes.has(key)?attributes.get(key):null,setAttribute:(key,value)=>attributes.set(key,String(value)),removeAttribute:key=>attributes.delete(key),attributes}]; 194 })); 195 return {tagName:'svg',dataset:{},nodes,parentElement:null,querySelectorAll:()=>Object.values(nodes),snapshot:()=>Object.fromEntries(Object.entries(nodes).map(([id,node])=>[id,Object.fromEntries(node.attributes)]))}; 196} 197function withTestHost(run){ 198 const names=['document','matchMedia','requestAnimationFrame','cancelAnimationFrame','IntersectionObserver']; 199 const saved=new Map(names.map(name=>[name,Object.getOwnPropertyDescriptor(globalThis,name)])); 200 const frames=new Map(),listeners=new Map(),observers=[];let next=1; 201 const listen=(name,cb)=>{if(!listeners.has(name))listeners.set(name,new Set());listeners.get(name).add(cb);}; 202 const remove=(name,cb)=>{listeners.get(name)?.delete(cb);if(!listeners.get(name)?.size)listeners.delete(name);}; 203 const media={matches:false,addEventListener:(_,cb)=>listen('media',cb),removeEventListener:(_,cb)=>remove('media',cb)}; 204 const document={hidden:false,addEventListener:listen,removeEventListener:remove}; 205 class Observer {constructor(callback){this.callback=callback;this.disconnected=false;observers.push(this);}observe(){}disconnect(){this.disconnected=true;}} 206 const values={document,matchMedia:()=>media,requestAnimationFrame:cb=>{const id=next++;frames.set(id,cb);return id;},cancelAnimationFrame:id=>frames.delete(id),IntersectionObserver:Observer}; 207 for(const [name,value]of Object.entries(values))Object.defineProperty(globalThis,name,{value,configurable:true,writable:true}); 208 try{return run({frames,listeners,observers,media,document,emit:name=>{for(const cb of [...listeners.get(name)||[]])cb();},runFrame:time=>{const item=frames.entries().next().value;assert(item);frames.delete(item[0]);item[1](time);}});} 209 finally{for(const [name,descriptor]of saved)if(descriptor)Object.defineProperty(globalThis,name,descriptor);else delete globalThis[name];} 210} 211