tricu

theme.mjs (8613B)

---

 // Presentation-only browser regression; no compiler/runtime assets required.
 // nix shell nixpkgs#nodejs nixpkgs#chromium -c node ext/demo-site/test/theme.mjs
 import assert from 'node:assert/strict';
 import {spawn} from 'node:child_process';
 import {mkdtemp,readFile,writeFile,copyFile,rm} from 'node:fs/promises';
 import {tmpdir} from 'node:os';
 import {join} from 'node:path';
 import {pathToFileURL} from 'node:url';
 const dir=await mkdtemp(join(tmpdir(),'arboricx-theme-'));
 let browser,socket;
 try{
  const root=new URL('../',import.meta.url);
  const html=(await readFile(new URL('index.html',root),'utf8')).replace(/<script type="module"[^>]*><\/script>/,'');
  await writeFile(join(dir,'index.html'),html);
  await copyFile(new URL('style.css',root),join(dir,'style.css'));
  await copyFile(new URL('theme.js',root),join(dir,'theme.js'));
  browser=spawn(process.argv[2]||'chromium',['--headless','--no-sandbox','--disable-dev-shm-usage','--remote-debugging-port=0',`--user-data-dir=${join(dir,'profile')}`,'about:blank'],{stdio:['ignore','ignore','pipe']});
  const endpoint=await new Promise((resolve,reject)=>{
   let log='';const timer=setTimeout(()=>reject(Error(log)),15000);
   browser.on('error',reject);
   browser.stderr.on('data',chunk=>{log+=chunk;const m=log.match(/DevTools listening on (ws:\/\/\S+)/);if(m){clearTimeout(timer);resolve(new URL(m[1]));}});
  });
  const tab=await(await fetch(`http://${endpoint.host}/json/new?about:blank`,{method:'PUT'})).json();
  socket=new WebSocket(tab.webSocketDebuggerUrl);
  await new Promise((resolve,reject)=>{socket.onopen=resolve;socket.onerror=reject;});
  let id=0;const pending=new Map();
  socket.onmessage=({data})=>{const event=JSON.parse(data);if(event.id){const p=pending.get(event.id);pending.delete(event.id);event.error?p.reject(Error(JSON.stringify(event.error))):p.resolve(event.result);}};
  const send=(method,params={})=>new Promise((resolve,reject)=>{pending.set(++id,{resolve,reject});socket.send(JSON.stringify({id,method,params}));});
  const evaluate=async expression=>{const r=await send('Runtime.evaluate',{expression,returnByValue:true,awaitPromise:true});if(r.exceptionDetails)throw Error(JSON.stringify(r.exceptionDetails));return r.result.value;};
  await send('Page.navigate',{url:pathToFileURL(join(dir,'index.html')).href});
  for(let i=0;!await evaluate("document.readyState==='complete' && !!document.getElementById('source-editor')");i++){assert.ok(i<200);await new Promise(r=>setTimeout(r,25));}
  // Install the same presentation wrappers used by syntax.ts, without loading a runtime.
  await evaluate(`(()=>{for(const id of ['source-editor']){const input=document.getElementById(id),wrapper=document.createElement('div');wrapper.className='syntax-editor';input.before(wrapper);wrapper.append(input);input.classList.add('syntax-input');}})()`);
  await evaluate(`(()=>{const card=document.createElement('section');card.className='definition-card';card.style.position='relative';card.innerHTML='<div class="inline-io"><details><summary>IO details</summary></details><button>Run IO</button><input aria-label="Line"><select><option>Text</option></select></div>';document.querySelector('.source-panel').append(card);})()`);
  for(const scheme of ['light','dark','light']){
   await send('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:scheme}]});
   await evaluate('new Promise(r=>requestAnimationFrame(()=>requestAnimationFrame(r)))');
   const result=await evaluate(`(()=>{
    const css=e=>getComputedStyle(e),body=css(document.body),root=css(document.documentElement);
    const rgb=s=>s.match(/[\\d.]+/g).slice(0,3).map(Number);
    const lum=s=>rgb(s).map(v=>{v/=255;return v<=.04045?v/12.92:((v+.055)/1.055)**2.4;}).reduce((s,v,i)=>s+v*[.2126,.7152,.0722][i],0);
    const contrast=(a,b)=>(Math.max(lum(a),lum(b))+.05)/(Math.min(lum(a),lum(b))+.05);
    const background=element=>{for(let node=element;node;node=node.parentElement){const color=css(node).backgroundColor;if(color!=='rgba(0, 0, 0, 0)')return color;}return body.backgroundColor;};
    const pairs=[[body.color,body.backgroundColor]];
    for(const selector of ['.intro','a','.button.primary','#source-editor','#settings-panel','#import-dialog','.definition-card summary','.definition-card .inline-io button','.definition-card .inline-io input']){
     const e=document.querySelector(selector),s=css(e);
     pairs.push([selector==='#source-editor'?s.caretColor:s.color,background(e)]);
    }
    const editor=document.getElementById('source-editor').parentElement,ec=css(editor);
    for(const token of ['comment','string','escape','number','keyword','definition','tree','contract','invalid','operator']){
     const span=document.createElement('span');span.className='syntax-'+token;editor.append(span);pairs.push([css(span).color,ec.backgroundColor]);span.remove();
    }
    return {cardScheme:css(document.querySelector('.definition-card select')).colorScheme,scheme:root.colorScheme,paper:body.backgroundColor,contrast:pairs.map(([a,b])=>contrast(a,b)),source:css(document.getElementById('source-editor')).caretColor,
     chrome:[...document.querySelectorAll('meta[name="theme-color"]')].filter(m=>matchMedia(m.media).matches).map(m=>m.content)};
   })()`);
   assert.equal(result.scheme,scheme);assert.equal(result.cardScheme,'dark','Dark card native controls remain legible on a light page');
   assert.equal(result.paper,scheme==='dark'?'rgb(20, 30, 26)':'rgb(245, 242, 234)');
   assert.deepEqual(result.chrome,[scheme==='dark'?'#141e1a':'#f5f2ea']);
   assert.equal(result.source,'rgb(227, 237, 222)');
   for(const ratio of result.contrast)assert.ok(ratio>=4.5,`${scheme} text contrast ${ratio}`);
  }
  const scheme=()=>evaluate('getComputedStyle(document.documentElement).colorScheme');
  await evaluate("document.getElementById('theme-toggle').click()");
  assert.equal(await scheme(),'dark','Toggle overrides light system preference: '+JSON.stringify(await evaluate("({theme:document.documentElement.dataset.theme,hidden:document.getElementById('theme-toggle').hidden,aria:document.getElementById('theme-toggle').getAttribute('aria-label'),scripts:[...document.scripts].map(s=>s.src),href:location.href})")));
  assert.equal(await evaluate("document.getElementById('theme-toggle').getAttribute('aria-label')"),'Switch to light mode');
  await send('Page.reload');
  for(let i=0;!await evaluate("document.readyState==='complete' && !document.getElementById('theme-toggle')?.hidden");i++){assert.ok(i<200);await new Promise(r=>setTimeout(r,25));}
  assert.equal(await scheme(),'dark','Explicit choice survives reload');
  await send('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'dark'}]});
  await evaluate("document.getElementById('theme-toggle').focus()");
  await send('Input.dispatchKeyEvent',{type:'keyDown',key:' ',code:'Space',windowsVirtualKeyCode:32});
  await send('Input.dispatchKeyEvent',{type:'keyUp',key:' ',code:'Space',windowsVirtualKeyCode:32});
  assert.equal(await scheme(),'light','Keyboard toggles to light even on a dark system');
  for(const width of [320,390,1440]){
   await send('Emulation.setDeviceMetricsOverride',{width,height:844,deviceScaleFactor:1,mobile:width<950});
   assert.equal(await evaluate('document.documentElement.scrollWidth<=innerWidth'),true,'Header fits '+width);
   assert.equal(await evaluate("document.getElementById('theme-toggle').getBoundingClientRect().height>=44"),true,'Touch target');
  }
  await evaluate("localStorage.removeItem('arboricx-theme');window.dispatchEvent(new StorageEvent('storage',{key:'arboricx-theme',newValue:null}))");
  assert.equal(await scheme(),'dark','Clearing preference resumes system default');
  // Storage failure must not prevent page-local toggling.
  await evaluate("Storage.prototype.setItem=()=>{throw Error('blocked')};document.getElementById('theme-toggle').click()");
  assert.equal(await scheme(),'light');
  await evaluate("document.getElementById('source-editor').classList.add('syntax-input')");
  await send('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'dark'},{name:'forced-colors',value:'active'}]});
  assert.equal(await evaluate("getComputedStyle(document.getElementById('source-editor')).color===getComputedStyle(document.getElementById('source-editor')).caretColor"),true);
  console.log('Theme checks passed: system changes, contrast, toggle/keyboard, persistence, mobile header, blocked storage and forced colors.');
 }finally{
  socket?.close();
  if(browser&&browser.exitCode===null){const exited=new Promise(r=>browser.once('exit',r));browser.kill();await exited;}
  await rm(dir,{recursive:true,force:true});
 }