122 lines
18 KiB
JavaScript
122 lines
18 KiB
JavaScript
#!/usr/bin/env node
|
|
// Real-server completeness and offline UI regression gate. All scratch stays in this worktree.
|
|
import {spawn} from 'node:child_process';
|
|
import {mkdtempSync,cpSync,mkdirSync,writeFileSync,rmSync} from 'node:fs';
|
|
import {resolve,join} from 'node:path';
|
|
import {createServer} from 'node:net';
|
|
import {chromium,webkit} from 'playwright';
|
|
import {createThrottleProxy} from './proxy.mjs';
|
|
const repo=resolve(new URL('..',import.meta.url).pathname), args=process.argv.slice(2);
|
|
const option=(key,fallback)=>args.includes(key)?args[args.indexOf(key)+1]:fallback;
|
|
const source=resolve(option('--source',join(repo,'frontend'))),legacy=args.includes('--legacy');
|
|
const scratch=mkdtempSync(join(repo,'perf/.tmp/offline-')),results=[];
|
|
const sleep=ms=>new Promise(r=>setTimeout(r,ms));
|
|
async function poll(fn,timeout=60000){const end=Date.now()+timeout;while(Date.now()<end){if(await fn())return true;await sleep(100);}return false;}
|
|
async function run(engine){
|
|
const cwd=join(scratch,engine);mkdirSync(cwd);cpSync(source,join(cwd,'public'),{recursive:true});
|
|
const socket=createServer();await new Promise(r=>socket.listen(0,'127.0.0.1',r));const port=socket.address().port;await new Promise(r=>socket.close(r));
|
|
let origin='http://127.0.0.1:'+port, log='',browser,proxy,context;
|
|
const child=spawn('bun',[join(repo,'server/server.js')],{cwd,env:{...process.env,PORT:String(port),ASSET_HASHING:legacy?'0':'1',ASSET_SYNC:legacy?'0':'1',BUILD_TAG:legacy?'1175f1a1d2c1':'',DB_PATH:join(cwd,'db.sqlite'),DATA_DIR:join(cwd,'data'),MEDIA_DIR:join(cwd,'media'),UPLOAD_DIR:join(cwd,'uploads')},stdio:['ignore','pipe','pipe']});
|
|
for(const stream of [child.stdout,child.stderr])stream.on('data',c=>log=(log+c).slice(-6000));
|
|
const result={engine,legacy,failures:[],events:[],layouts:[],conditions:[]};results.push(result);
|
|
try{
|
|
if(!await poll(async()=>{try{return(await fetch(origin+'/api/version')).ok;}catch{return false;}}))throw Error(log);
|
|
proxy=createThrottleProxy({targetPort:port,profile:'unthrottled'});proxy.startTracking();origin='http://127.0.0.1:'+await proxy.listen();
|
|
const manifest=await(await fetch(origin+'/api/manifest')).json();result.build=manifest.buildTag;
|
|
const type={chromium,webkit}[engine];
|
|
const openContext=async()=>{if(engine==='webkit'){browser ||= await type.launch();return browser.newContext();}return type.launchPersistentContext(join(cwd,'profile'),{headless:true});};
|
|
context=await openContext();
|
|
const configure=async()=>{await context.route('**/*',r=>r.continue());return context.addInitScript(()=>{Object.defineProperty(navigator,'onLine',{configurable:true,get:()=>localStorage.getItem('perf-offline')!=='1'});Object.defineProperty(navigator,'connection',{configurable:true,value:{get saveData(){return localStorage.getItem('perf-save-data')==='1';}}});});};
|
|
await configure();if(args.includes('--save-data'))await context.addInitScript(()=>localStorage.setItem('perf-save-data','1'));
|
|
let offline=false;
|
|
const attach=page=>{
|
|
page.on('response',r=>{if(offline&&r.status()>=400&&!new URL(r.url()).pathname.startsWith('/api/'))result.failures.push({kind:'http',url:r.url(),status:r.status()});});
|
|
page.on('requestfailed',r=>{if(offline)result.events.push({kind:'requestfailed',url:r.url(),error:r.failure()?.errorText});});
|
|
page.on('console',m=>{if(!offline&&['warning','error'].includes(m.type()))console.log(engine,'install console:',m.text());if(offline&&m.type()==='error')result.events.push({kind:'console',message:m.text()});});
|
|
page.on('pageerror',e=>{if(offline)result.events.push({kind:'pageerror',message:e.message,stack:e.stack});});
|
|
};
|
|
let page=await context.newPage();attach(page);
|
|
const boot=async()=>{await page.goto(origin);await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'));};
|
|
const inventory=()=>page.evaluate(async({manifest,legacy})=>{
|
|
const names=await caches.keys(),cache=await caches.open(legacy?names.find(n=>n.startsWith('ytplayer-')&&!['ytplayer-assets','ytplayer-fonts','ytplayer-thumbs'].includes(n)):'ytplayer-assets');
|
|
const missing=[];for(const [path,file]of Object.entries(manifest.files)){const r=await cache.match(legacy?path:path+'?v='+file.h);if(!r||(!legacy&&r.headers.get('X-Asset-Hash')!==file.h))missing.push(path);}
|
|
return{total:Object.keys(manifest.files).length,missing};
|
|
},{manifest,legacy});
|
|
const started=Date.now();console.log(engine,'install boot');await boot();console.log(engine,'waiting for worker activation');if(!await poll(()=>page.evaluate(async()=>!!(await navigator.serviceWorker.getRegistration())?.active),30000))throw Error('Worker did not activate: '+JSON.stringify(await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();return {active:r?.active?.state,waiting:r?.waiting?.state,installing:r?.installing?.state,caches:await caches.keys(),keys:(await(await caches.open('ytplayer-assets')).keys()).map(r=>new URL(r.url).pathname)};})));await page.evaluate(()=>navigator.serviceWorker.ready);console.log(engine,'worker active');await page.evaluate(()=>window.Lazy?.warm());
|
|
await poll(async()=>!(await inventory()).missing.length,Number(option('--warm-timeout','15000')));
|
|
console.log(engine,'inventory complete');result.installMs=Date.now()-started;result.inventory=await inventory();result.installWire=proxy.getStats();result.saveData=await page.evaluate(()=>navigator.connection?.saveData);
|
|
if(result.inventory.missing.length)result.failures.push({kind:'incomplete',paths:result.inventory.missing});
|
|
// Offline navigation always starts from a controlled document.
|
|
await page.reload();await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'));
|
|
await page.evaluate(()=>localStorage.setItem('perf-offline','1'));if(engine==='chromium')await context.setOffline(true);await proxy.setOffline(true);offline=true;result.offlineTransport=engine==='chromium'?'context.setOffline + proxy':'proxy (Linux WebKit setOffline breaks cached navigation)';
|
|
for(const layout of ['classic','f7-swipe','glass-stage','bento-hub']){
|
|
const check={layout,opened:[],errors:[]};result.layouts.push(check);
|
|
const attempt=async(name,fn)=>{console.log(engine,layout,name);try{await Promise.race([fn(),new Promise((_,reject)=>{const t=setTimeout(()=>reject(Error('Action timed out')),10000);t.unref();})]);check.opened.push(name);}catch(e){check.errors.push({name,error:e.message});result.failures.push({layout,name,error:e.message});}};
|
|
await attempt('reload',async()=>{await page.evaluate(layout=>{data.settings.layout=layout;localStorage.setItem('_ytpdata',JSON.stringify(data));},layout);await page.reload();await page.waitForFunction(()=>typeof data!=='undefined'&&document.querySelector('[aria-label="Car mode"]'),null,{timeout:10000});});
|
|
for(const view of ['search','queue','history','saved','downloads','settings','nowPlaying'])await attempt(view,()=>page.evaluate(async type=>{view={type};if(type==='settings')await renderSettings();else render();await new Promise(r=>setTimeout(r,150));},view));
|
|
await attempt('sidebar',()=>page.evaluate(()=>{document.querySelector('#menuBtn')?.click();document.querySelector('#sidebar')?.classList.remove('open');}));
|
|
await attempt('all lazy groups',()=>page.evaluate(async()=>{if(window.Lazy)for(const [name,group] of Object.entries(Lazy.manifest.groups))if(group.background)await Lazy.load(name);}));
|
|
for(const section of ['piano','midi','floating-lyrics','vocal-reducer','equalizer','setlist-import','broadcast','party-dj','direct-transfer'])await attempt(section,async()=>{await page.evaluate(async()=>{view={type:'settings'};await renderSettings();});await page.waitForSelector('[data-section="'+section+'"]',{timeout:5000,state:'attached'});await page.evaluate(id=>document.querySelector('[data-section="'+id+'"]').click(),section);await page.waitForTimeout(100);});
|
|
await attempt('presenter',async()=>{await page.evaluate(async()=>{history.replaceState(null,'','/?present=');await Presenter.boot();});await page.waitForSelector('#presenterView:not(.hidden)',{timeout:5000});await page.locator('#pvCode').fill('x');await page.locator('#pvPairBtn').click();if(!/6-digit/.test(await page.locator('#pvMsg').textContent()))throw Error('Presenter validation did not run');await page.evaluate(()=>{document.querySelector('#presenterView').classList.add('hidden');document.body.classList.remove('presenter-open');history.replaceState(null,'','/');});});
|
|
await attempt('video editor',async()=>{await page.evaluate(()=>openVideoEditor({id:'upl_0123456789ab',title:'Offline edit',duration:120}));if(!await page.evaluate(()=>window.OPFS?.isSupported())){if(!/Editing needs offline storage/.test(await page.locator('#toastContainer').textContent()))throw Error('Missing unsupported-storage explanation');result.unsupportedFeatures ||= [];if(!result.unsupportedFeatures.includes('video editor: OPFS unavailable in Linux WebKit'))result.unsupportedFeatures.push('video editor: OPFS unavailable in Linux WebKit');return;}await page.waitForSelector('.video-editor',{timeout:5000});await page.locator('.ve-from').fill('0:10');await page.locator('.ve-to').fill('0:20');await page.locator('.ve-add').click();if(!/10/.test(await page.locator('.ve-cuts').textContent()))throw Error('Cut was not added');await page.evaluate(()=>closeModal());});
|
|
await attempt('lyrics editor',async()=>{await page.evaluate(async()=>{data.profile={name:'offline-test'};await Notes.load({id:'abcdefghijk',title:'Offline lyrics'});document.querySelector('#lyricsEditBtn').click();});await page.waitForSelector('.lyr-editor-text',{timeout:5000});await page.locator('.lyr-editor-text').fill('[0:10] Offline lyric');await page.evaluate(()=>closeModal());});
|
|
await attempt('car',async()=>{await page.evaluate(()=>document.querySelector('[aria-label="Car mode"]').click());await page.waitForSelector('.car-mode',{timeout:5000});await page.getByRole('button',{name:'Exit Car mode'}).click();});
|
|
await attempt('remote',async()=>{await page.evaluate(()=>document.querySelector('#navRemoteBtn').click());await page.waitForSelector('#modal:not(.hidden)',{timeout:5000});await page.evaluate(()=>closeModal());});
|
|
await attempt('party',async()=>{await page.evaluate(()=>document.querySelector('#navPartyBtn').click());await page.waitForSelector('#partyPanel:not(.hidden)',{timeout:5000});await page.evaluate(()=>document.querySelector('#partyPanel').classList.add('hidden'));});
|
|
await attempt('share/external',()=>page.evaluate(async()=>{current={meta:{id:'benchmedia01',title:'Offline fixture'}};await Share.open();closeModal();await External.open();closeModal();}));
|
|
await attempt('stats',async()=>{await page.evaluate(()=>{view={type:'stats'};render();});await page.waitForSelector('.stats-empty, .stats',{timeout:5000});});
|
|
await attempt('service',()=>page.evaluate(()=>{enterServiceMode();exitServiceMode();}));
|
|
await attempt('runtime URLs',async()=>{const failures=await page.evaluate(async manifest=>{const paths=Object.keys(manifest.files).filter(p=>/\.(?:woff2|png|webmanifest)$/.test(p)||/\/(?:opfs-worker|hash-worker|direct-recv-worker|p2p-recv-worker|sha256-wasm)\.js$/.test(p)||p==='/piano-engine.mjs'||p==='/vendor/framework7-swipe.min.js');const bad=[];for(const path of paths){const r=await fetch(path);await r.arrayBuffer();if(!r.ok)bad.push(path+': '+r.status);}return bad;},manifest);if(failures.length)throw Error(failures.join(', '));});
|
|
}
|
|
const apiFailures=result.events.filter(e=>e.kind==='requestfailed'&&new URL(e.url).pathname.startsWith('/api/'));
|
|
result.expectedTransportErrors=result.events.filter(e=>e.kind==='pageerror'&&engine==='webkit'&&!e.stack&&apiFailures.length&&(e.message==='TypeError: Load failed'||e.message.includes('/api/')));
|
|
result.staticFailures=result.events.filter(e=>e.kind==='requestfailed'&&new URL(e.url).origin===origin&&!new URL(e.url).pathname.startsWith('/api/')&&new URL(e.url).pathname!=='/sw.js');
|
|
result.scriptErrors=result.events.filter(e=>e.kind==='pageerror'&&!result.expectedTransportErrors.includes(e));
|
|
result.failures.push(...result.staticFailures,...result.scriptErrors);
|
|
// Resumption and Save-Data/two-tab checks use the same persisted CacheStorage.
|
|
offline=false;if(engine==='chromium')await context.setOffline(false);await proxy.setOffline(false);await page.evaluate(()=>localStorage.removeItem('perf-offline'));
|
|
if(!legacy&&args.includes('--conditions')){
|
|
await proxy.setOffline(true);
|
|
await page.evaluate(async manifest=>{const c=await caches.open('ytplayer-assets');for(const p of Object.keys(manifest.files).filter(p=>manifest.files[p].g!=='core'))await c.delete(p+'?v='+manifest.files[p].h);localStorage.setItem('perf-save-data','1');},manifest);
|
|
await page.evaluate(()=>navigator.serviceWorker.controller.postMessage({type:'COMPLETE_ASSETS'}));
|
|
await poll(()=>page.evaluate(async()=>{const c=await caches.open('ytplayer-assets'),s=await(await c.match('/__ytp_asset_state')).json(),r=await c.match('/__ytp_completion/'+s.current.buildTag);return r&&(await r.json()).running;}),10000);
|
|
const interrupted=await inventory();
|
|
if(!interrupted.missing.length)throw Error('Interruption did not leave missing assets');
|
|
if(engine==='chromium'){const cdp=await context.newCDPSession(page);await cdp.send('ServiceWorker.enable');await cdp.send('ServiceWorker.stopAllWorkers');await cdp.detach();}
|
|
if(engine==='chromium'){
|
|
await page.close();await context.close();await proxy.setOffline(false);
|
|
context=await openContext();await configure();page=await context.newPage();attach(page);await boot();
|
|
}else{
|
|
// Linux WebKit persistent contexts do not share page/worker CacheStorage.
|
|
// Exercise a real worker re-registration in the same browser context.
|
|
await page.evaluate(async()=>{const r=await navigator.serviceWorker.getRegistration();await r.unregister();});
|
|
await page.close();await proxy.setOffline(false);page=await context.newPage();attach(page);await boot();
|
|
}
|
|
const other=await context.newPage();await other.goto(origin);await other.waitForSelector('#carModeBtn');
|
|
const complete=await poll(async()=>!(await inventory()).missing.length);
|
|
result.conditions.push({name:engine==='webkit'?'page closed, worker re-registration, Save-Data, two tabs':'interrupted job, page closed, browser restarted with same profile, Save-Data, two tabs',interruptedMissing:interrupted.missing.length,storageMode:engine==='webkit'?'same-context worker re-registration; Linux WebKit persistent CacheStorage is broken':'persistent disk profile',complete});
|
|
if(!complete)result.failures.push({kind:'resume',inventory:await inventory(),status:await page.evaluate(async()=>({registration:!!(await navigator.serviceWorker.getRegistration())?.active}))});
|
|
// Evict one optional file and require the online event alone to restart work.
|
|
const path='/piano-engine.mjs';await page.evaluate(async({path,manifest})=>{await(await caches.open('ytplayer-assets')).delete(path+'?v='+manifest.files[path].h);localStorage.removeItem('perf-save-data');window.dispatchEvent(new Event('online'));},{path,manifest});
|
|
const onlineResume=await poll(async()=>!(await inventory()).missing.length);result.conditions.push({name:'online event, Save-Data off',complete:onlineResume});if(!onlineResume)result.failures.push({kind:'online-resume'});
|
|
if(engine==='chromium'){
|
|
await sleep(100);await proxy.setOffline(true);
|
|
await context.route('**/admin.html?offline-inspector=1',route=>route.fulfill({contentType:'text/html',body:'<!doctype html><title>Cache inspector</title>'}));
|
|
const inspector=await context.newPage();await inspector.goto(origin+'/admin.html?offline-inspector=1');const cdp=await context.newCDPSession(inspector);
|
|
const {caches:names}=await cdp.send('CacheStorage.requestCacheNames',{securityOrigin:origin});
|
|
const cacheId=names.find(c=>c.cacheName==='ytplayer-assets').cacheId;
|
|
await page.evaluate(async manifest=>{const c=await caches.open('ytplayer-assets');for(const path of Object.keys(manifest.files).filter(p=>manifest.files[p].g!=='core'))await c.delete(path+'?v='+manifest.files[path].h);navigator.serviceWorker.controller.postMessage({type:'COMPLETE_ASSETS'});},manifest);
|
|
await poll(()=>page.evaluate(async()=>{const c=await caches.open('ytplayer-assets'),s=await(await c.match('/__ytp_asset_state')).json(),r=await c.match('/__ytp_completion/'+s.current.buildTag);return r&&(await r.json()).running;}),5000);
|
|
await page.close();await other.close();await proxy.setOffline(false);
|
|
const withoutPage=await poll(async()=>{const {cacheDataEntries:entries}=await cdp.send('CacheStorage.requestEntries',{cacheId,skipCount:0,pageSize:1000});return Object.entries(manifest.files).every(([path,file])=>entries.some(e=>e.requestURL===origin+path+'?v='+file.h&&e.responseHeaders.some(h=>h.name.toLowerCase()==='x-asset-hash'&&h.value===file.h)));});
|
|
result.conditions.push({name:'worker completes with every application page closed; passive same-origin inspector only',complete:withoutPage});
|
|
if(!withoutPage)result.failures.push({kind:'completion-without-page'});
|
|
await cdp.detach();await inspector.close();
|
|
}else await other.close();
|
|
}
|
|
console.log(engine,JSON.stringify({missing:result.inventory.missing,failures:result.failures,conditions:result.conditions}));
|
|
}catch(e){result.failures.push({kind:'harness',error:e.stack});console.log(engine,e.message);}finally{await context?.close();await browser?.close();await proxy?.close();child.kill('SIGTERM');if(child.exitCode===null)await new Promise(r=>child.once('exit',r));}
|
|
}
|
|
try{for(const engine of option('--browser','all')==='all'?['chromium','webkit']:[option('--browser')])await run(engine);}finally{writeFileSync(resolve(option('--out',join(repo,'perf/results/offline-complete.json'))),JSON.stringify({results},null,2)+'\n');rmSync(scratch,{recursive:true,force:true});}
|
|
if(results.some(r=>r.failures.length))process.exitCode=1;
|