scripts/check_app_state.mjs

// A dependency-free DOM/media adapter exercises application state without a browser.
import fs from 'node:fs';import assert from 'node:assert/strict';import {pathToFileURL,fileURLToPath} from 'node:url';import path from 'node:path';
const root=fileURLToPath(new URL('../',import.meta.url)),html=fs.readFileSync(root+'/index.html','utf8'),registry=[],ids=new Map();let draws=0;
class Element{
 constructor(tag='div'){this.tagName=tag.toUpperCase();this.children=[];this.style={};this.dataset={};this.value='';this.textContent='';this.hidden=false;this.disabled=false;this.attributes={};this.clientWidth=360;this.clientHeight=280;this.duration=5;this.currentTime=0;this.seeking=false;this.classList={toggle:()=>{},add:()=>{},remove:()=>{}};registry.push(this);}
 append(...children){this.children.push(...children);if(this.tagName==='SELECT'&&!this.value)this.value=children[0]?.value||'';}
 replaceChildren(...children){this.children=[];this.append(...children);}
 setAttribute(k,v){this.attributes[k]=v;}
 addEventListener(){} pause(){} scrollIntoView(){} click(){this.onclick?.();}setPointerCapture(){}
 getContext(){return new Proxy({},{get:(t,k)=>t[k]??(()=>{if(k==='stroke')draws++;if(k==='createLinearGradient')return{addColorStop(){}};}),set:(t,k,v)=>(t[k]=v,true)});}
}
for(const m of html.matchAll(/<([a-z0-9]+)\b[^>]*\bid="([^"]+)"[^>]*>/g)){const e=new Element(m[1]);e.id=m[2];e.checked=m[0].includes(' checked');e.value=/\bvalue="([^"]*)"/.exec(m[0])?.[1]||'';ids.set(e.id,e);}
const meshControl=new Element();const modes=['compare','lineup','overlay'].map(mode=>{const e=new Element('button');e.dataset.mode=mode;return e;});
globalThis.document={hidden:false,querySelector:s=>s.startsWith('#')?ids.get(s.slice(1)):s==='.mesh-control'?meshControl:null,querySelectorAll:s=>s==='[data-mode]'?modes:s==='.example-card'?registry.filter(e=>e.className==='example-card'):[],createElement:t=>new Element(t),createTextNode:text=>({textContent:text}),addEventListener:()=>{}};
globalThis.window={addEventListener:()=>{}};globalThis.ResizeObserver=class{observe(){}};globalThis.matchMedia=()=>({matches:true});globalThis.requestAnimationFrame=fn=>(globalThis.nextFrame=fn,1);globalThis.cancelAnimationFrame=()=>{};globalThis.fetch=async p=>({ok:true,json:async()=>JSON.parse(fs.readFileSync(root+'/'+p,'utf8'))});
await import(pathToFileURL(root+'/app.js'));await new Promise(r=>setTimeout(r,30));
assert.equal(ids.get('load-status').textContent,'');assert.equal(ids.get('example').children.length,3);assert.equal(ids.get('play').disabled,false);assert.ok(draws>0);
const drawBefore=draws;ids.get('variant').value='9';ids.get('variant').oninput({target:ids.get('variant')});assert.match(ids.get('variant-value').textContent,/0.9/);assert.ok(draws>drawBefore);
modes[1].onclick();assert.equal(ids.get('variant').disabled,true);assert.equal(ids.get('motion-labels').children.length,5);
modes[2].onclick();assert.equal(ids.get('variant').disabled,false);
ids.get('camera').value='90';ids.get('camera').oninput({target:ids.get('camera')});assert.equal(ids.get('camera-value').textContent,'90°');
ids.get('frame').value='70';ids.get('frame').oninput({target:ids.get('frame')});assert.match(ids.get('pipeline-count').textContent,/71/);assert.ok(ids.get('pipeline-video').currentTime>0);
ids.get('example').value='fall-real-real';await ids.get('example').onchange();assert.equal(ids.get('frame').max,130);assert.match(ids.get('pipeline-video').src,/original-2/);
ids.get('play').onclick();nextFrame(1000);nextFrame(2000);assert.match(ids.get('frame-count').textContent,/26/);ids.get('play').onclick();assert.equal(ids.get('play').textContent,'Play');
ids.get('archive-variant').value='10';ids.get('archive-variant').oninput();await new Promise(r=>setTimeout(r,180));assert.match(ids.get('archive-video').src,/archive-1-10/);
ids.get('pipeline-human').checked=true;ids.get('pipeline-human').onchange();ids.get('pipeline-skeleton').checked=true;ids.get('pipeline-skeleton').onchange();ids.get('smoothing').value='original';ids.get('smoothing').onchange();assert.equal(ids.get('smoothing-note').textContent,'Unfiltered saved poses');ids.get('smoothing').value='smooth';ids.get('smoothing').onchange();assert.match(ids.get('smoothing-note').textContent,/original data preserved/);assert.match(ids.get('pipeline-variant').textContent,/Same extracted pose/);assert.equal(meshControl.hidden,true);console.log('Application state checks passed: loading, variants, lineup, overlay, camera, synchronized scrubbing, example switching, playback, archive selection.');