tricu

definition-name-inputs.mjs (8937B)

---

 // Trusted Chromium input, complementary to the cross-browser DOM/geometry probe.
 import assert from 'node:assert/strict';
 import {writeFile} from 'node:fs/promises';
 const pause=ms=>new Promise(resolve=>setTimeout(resolve,ms));
 export async function definitionNameInputs({send,evaluate,report,prefix}){
  const target=`document.querySelector('[data-definition="answer"]')`;
  const closed=`document.querySelector('.definition-card').hidden`;
  const wait=async(expression,label)=>{for(let i=0;i<800;i++){if(await evaluate(expression))return;await pause(25);}throw Error('Definition input timeout: '+label+' / '+JSON.stringify(await evaluate(`({active:document.activeElement.outerHTML.slice(0,300),hidden:document.querySelector('.definition-card').hidden,result:document.querySelector('.definition-card pre').textContent,status:document.getElementById('status').textContent})`)));};
  const point=async selector=>evaluate(`(()=>{const e=${selector};e.scrollIntoView({block:'center',behavior:'instant'});const r=e.getBoundingClientRect();return {x:r.x+r.width/2,y:r.y+r.height/2};})()`);
  const mouse=async selector=>{
   const {x,y}=await point(selector);
   await send('Input.dispatchMouseEvent',{type:'mousePressed',x,y,button:'left',clickCount:1});
   await send('Input.dispatchMouseEvent',{type:'mouseReleased',x,y,button:'left',clickCount:1});
  };
  const key=async(key,code,windowsVirtualKeyCode,modifiers=0)=>{
   await send('Input.dispatchKeyEvent',{type:'keyDown',key,code,windowsVirtualKeyCode,modifiers,...(key==='Enter'?{text:'\r',unmodifiedText:'\r'}:key===' '?{text:' ',unmodifiedText:' '}: {})});
   await send('Input.dispatchKeyEvent',{type:'keyUp',key,code,windowsVirtualKeyCode,modifiers});
  };
  const close=async()=>{
   if(!await evaluate(closed))await mouse(`document.querySelector('[aria-label="Close definition inspection"]')`);
   await wait(closed,'close');
  };
  const inspect=async()=>wait(`!${closed}&&!document.querySelector('.definition-card select').disabled&&document.querySelector('.definition-card pre').textContent==='42'`,'actual value');
  for(const width of [390,1440]){
   await send('Emulation.setDeviceMetricsOverride',{width,height:1000,deviceScaleFactor:1,mobile:width<741});
   await evaluate("new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)))");
   await mouse(target);await inspect();
   assert(await evaluate("document.activeElement!==globalThis.__sourceEditor.view.contentDOM"),'Inspection keeps focus outside the editing surface');
   const expected=await evaluate("globalThis.__sourceEditor.getSource()");
   await mouse(`document.querySelector('.edit-definition-name')`);
   assert(await evaluate("document.activeElement===globalThis.__sourceEditor.view.contentDOM&&globalThis.__sourceEditor.getSource().slice(globalThis.__sourceEditor.getSelection().from,globalThis.__sourceEditor.getSelection().to)==='answer'"),'Trusted Edit name focuses and selects the native identifier');
   await send('Input.insertText',{text:'renamed'});
   assert.equal(await evaluate("globalThis.__sourceEditor.getSource()"),expected.replace('answer =','renamed ='),'Native typing replaces only the declaration name');
   await key('z','KeyZ',90,2);
   assert.equal(await evaluate("globalThis.__sourceEditor.getSource()"),expected,'Rename has native undo');
   await wait("document.getElementById('status').textContent==='Compiled'",'undo compile');
   await evaluate(`globalThis.__sourceEditor.focus()`);await key('Tab','Tab',9);
   assert(await evaluate(`document.activeElement===${target}`),'Tab reaches the declaration name');
   await key('Enter','Enter',13);await inspect();
   assert(await evaluate("document.activeElement===document.querySelector('.definition-card pre')"),'Keyboard inspection focuses the result');
   await key('Escape','Escape',27);
   assert(await evaluate(`${closed}&&document.activeElement===${target}`),'Escape returns keyboard focus to the definition name / '+JSON.stringify(await evaluate(`({active:document.activeElement.outerHTML.slice(0,250),hidden:${closed},target:${target}.outerHTML,scroll:document.getElementById('source-editor').scrollTop,status:document.getElementById('status').textContent})`)));
   await key(' ','Space',32);await inspect();await close();
   // Clicking the RHS places the editing caret.
   const rhs=await evaluate("(()=>{const s=[...document.querySelectorAll('.cm-content .syntax-definition')].find(s=>s.textContent==='answer').getBoundingClientRect();return {x:s.right+parseFloat(getComputedStyle(document.getElementById('source-editor')).fontSize)*1.5,y:s.y+s.height/2};})()");
   await send('Input.dispatchMouseEvent',{type:'mousePressed',...rhs,button:'left',clickCount:1});
   await send('Input.dispatchMouseEvent',{type:'mouseReleased',...rhs,button:'left',clickCount:1});
   assert(await evaluate(`${closed}&&document.activeElement===globalThis.__sourceEditor.view.contentDOM`),'RHS click edits normally');
   const p=await point(target);
   await send('Input.dispatchTouchEvent',{type:'touchStart',touchPoints:[{...p,radiusX:2,radiusY:2}]});
   await send('Input.dispatchTouchEvent',{type:'touchEnd',touchPoints:[]});await inspect();
   assert(await evaluate("document.activeElement!==globalThis.__sourceEditor.view.contentDOM"),'Touch inspection leaves the editing keyboard closed');
   await close();
 
   const hold=await point(target);
   await send('Input.dispatchTouchEvent',{type:'touchStart',touchPoints:[{...hold,radiusX:2,radiusY:2}]});
   await pause(750);await send('Input.dispatchTouchEvent',{type:'touchEnd',touchPoints:[]});await pause(100);
   assert(await evaluate(closed),'Real touch hold does not inspect');
   assert(await evaluate("document.activeElement===globalThis.__sourceEditor.view.contentDOM&&globalThis.__sourceEditor.getSource().slice(globalThis.__sourceEditor.getSelection().from,globalThis.__sourceEditor.getSelection().to)==='answer'"),'Touch hold selects the identifier in the native editor / '+JSON.stringify(await evaluate(`({active:document.activeElement.outerHTML.slice(0,200),start:globalThis.__sourceEditor.getSelection().from,end:globalThis.__sourceEditor.getSelection().to,target:${target}.outerHTML})`)));
   await evaluate('document.getSelection().removeAllRanges()');
   await evaluate(`globalThis.__sourceEditor.select(0);${target}.focus({preventScroll:true})`);
   const pan=await point(target);
   await send('Input.dispatchTouchEvent',{type:'touchStart',touchPoints:[pan]});
   await send('Input.dispatchTouchEvent',{type:'touchMove',touchPoints:[{x:pan.x,y:pan.y+40}]});
   await pause(550);await send('Input.dispatchTouchEvent',{type:'touchEnd',touchPoints:[]});
   assert(await evaluate(`${closed}&&globalThis.__sourceEditor.getSelection().from===0&&globalThis.__sourceEditor.getSelection().to===0`),'Touch panning cancels the hold without selecting or inspecting');
   // Drag from ordinary text across a clickable name using editor selection.
   const drag=await evaluate("(()=>{const w=document.getElementById('source-editor'),a=w.querySelector('.syntax-directive').getBoundingClientRect(),b=w.querySelector('[data-definition=identity]').getBoundingClientRect();return {from:{x:a.left+2,y:a.top+a.height/2},to:{x:b.left+b.width/2,y:b.top+b.height/2}};})()");
   await send('Input.dispatchMouseEvent',{type:'mousePressed',...drag.from,button:'left',clickCount:1});
   await send('Input.dispatchMouseEvent',{type:'mouseMoved',...drag.to,button:'left',buttons:1});
   await send('Input.dispatchMouseEvent',{type:'mouseReleased',...drag.to,button:'left',clickCount:1});
   assert(await evaluate(`${closed}&&globalThis.__sourceEditor.getSource().slice(globalThis.__sourceEditor.getSelection().from,globalThis.__sourceEditor.getSelection().to).includes('answer = 42')`),'Native drag selection crosses name decorations without inspecting');
   // Select an identifier range in the canonical document.
   await evaluate("(()=>{const e=globalThis.__sourceEditor,start=e.getSource().indexOf('identity x');e.select(start,start+14);})()");
   assert(await evaluate("globalThis.__sourceEditor.getSelection().to>globalThis.__sourceEditor.getSelection().from"),'Native source selections survive name decoration');
   if(prefix){
    await evaluate("document.activeElement.blur();window.scrollTo({top:0,behavior:'instant'})");
    const capture=async suffix=>{
     const {cssContentSize:r}=await send('Page.getLayoutMetrics');
     const shot=await send('Page.captureScreenshot',{format:'png',captureBeyondViewport:true,clip:{x:0,y:0,width:r.width,height:r.height,scale:1}});
     await writeFile(prefix+'-'+suffix+'-'+width+'.png',Buffer.from(shot.data,'base64'));
    };
    await capture('names');await mouse(target);await inspect();await capture('card');await close();
   }
  }
  report.checks.push('trusted mouse/touch name activation without editing keyboard; native Edit name typing/undo; Enter/Space/Escape focus; RHS caret placement; touch-hold name selection; panning cancellation; native cross-name drag selection at 390/1440px');
 }