tricu

definition-names-probe.mjs (5930B)

---

 // Compiled-definition inspection through the shipped editor controls.
 import {el,input,change,status,wait,inspect,card,result,pause,sourceEditor} from './source-probe-helpers.mjs';
 const assert=(ok,message)=>{if(!ok)throw Error(message);};
 export async function run(control,backend='haskell-wasm'){
  await status('Ready');
  document.querySelector('[data-compiler-example=identity]').click();
  const long='aVeryLongDefinitionName'+ 'Extended'.repeat(9);
  const source=`-- λ🙂 positions stay native UTF-16 offsets
 !export answer
 answer = 42
 identity x = x
 ${long} = 9
 text = "fake = 1"
 outer x = let
   local = x
   in local
 select [] = 0
 select xs = 1
 -- comment = 1`;
  const editor=sourceEditor,wrapper=editor.dom;
  input('source-editor',source);await status('Compiled');editor.view.scrollDOM.scrollTop=0;
  await pause(0);
  const target=name=>wrapper.querySelector(`[data-definition="${name}"]`);
  assert(!wrapper.querySelector('.definition-gutter'),'No gutter');
  assert(parseFloat(getComputedStyle(wrapper).paddingLeft)<=20,'No reserved horizontal inspection column');
  const names=[...new Set([...wrapper.querySelectorAll('[data-definition]')].map(button=>button.dataset.definition))];
  assert(JSON.stringify(names)===JSON.stringify(['answer','identity',long,'text','outer','select']),'Only unique top-level declaration heads are interactive');
  assert(!target('local')&&!target('x')&&!target('fake')&&!target('comment'),'No local variables, references, comments or string lookalikes');
  assert(!target('answer').hidden&&target('answer').getAttribute('aria-disabled')==='false'&&target('answer').tabIndex===0,'Compiled names are keyboard accessible');
  assert(await inspect('answer')==='42','Name opens the actual retained definition');
  assert(target('answer').getAttribute('aria-expanded')==='true','Open name highlighted');
  const close=card().querySelector('[aria-label="Close definition inspection"]');
  const bounds=card().getBoundingClientRect(),buttonBounds=close.getBoundingClientRect();
  assert(Math.abs(bounds.right-buttonBounds.right-13)<=2&&Math.abs(buttonBounds.top-bounds.top-9)<=2,'Close is in the top-right corner');
  assert(buttonBounds.width>=44&&buttonBounds.height>=44,'Close has a comfortable touch target');
  card().querySelector('.edit-definition-name').click();
  const offset=source.indexOf('answer =');
  assert(card().hidden&&document.activeElement===editor.view.contentDOM&&editor.getSelection().from===offset&&editor.getSelection().to===offset+6,'Edit name selects exactly the declaration, not its export or references');
  assert(editor.getSource()===source,'Opening/closing and Edit name do not mutate source');
  // Selection, hold and drag checks complement trusted mouse/touch/keyboard input.
  const button=target('answer');
  const down=()=>button.dispatchEvent(new PointerEvent('pointerdown',{clientX:10,clientY:10,pointerId:1,bubbles:true}));
  const click=()=>button.dispatchEvent(new MouseEvent('click',{detail:1,bubbles:true}));
  down();await pause(550);click();assert(card().hidden,'Holding is not a tap');
  down();button.dispatchEvent(new PointerEvent('pointermove',{clientX:30,clientY:10,pointerId:1,bubbles:true}));click();assert(card().hidden,'Dragging is not a tap');
  down();const menu=new MouseEvent('contextmenu',{bubbles:true,cancelable:true});button.dispatchEvent(menu);click();assert(!menu.defaultPrevented&&card().hidden,'Native context menu is not intercepted');
  down();document.getSelection().selectAllChildren(button);click();assert(card().hidden,'Selecting the identifier does not inspect');document.getSelection().removeAllRanges();
  wrapper.dispatchEvent(new CompositionEvent('compositionstart'));
  assert(getComputedStyle(target('answer')).pointerEvents==='none','IME disables name pointer activation');
  wrapper.dispatchEvent(new CompositionEvent('compositionend'));
  input('source-editor',source.replaceAll('answer','renamed'));await pause(0);
  assert([...wrapper.querySelectorAll('[data-definition]')].every(button=>button.getAttribute('aria-disabled')==='true'||button.hidden),'Dirty names lose clickability immediately');
  await status('Compiled');assert(await inspect('renamed')==='42','Renamed definition resolves from the new compiled revision');
  input('source-editor','!export renamed\nrenamed = missing');await status('Compilation failed');
  assert([...wrapper.querySelectorAll('[data-definition]')].every(button=>button.getAttribute('aria-disabled')==='true'&&button.hidden),'Failed compilation leaves no clickable underline');
  input('source-editor',source);await status('Compiled');editor.view.scrollDOM.scrollTop=0;await pause(0);
  // Wrapped declaration fragments retain their inline text hit areas.
  const span=target(long);span.scrollIntoView({block:'center',behavior:'instant'});await new Promise(r=>requestAnimationFrame(()=>requestAnimationFrame(r)));const boxes=[...span.getClientRects()];
  assert(boxes.length>0&&span.tabIndex===0,'Wrapped inline name has one keyboard stop');
  for(const box of boxes){
   const hit=document.elementFromPoint(box.left+Math.min(3,box.width/2),box.top+box.height/2);
   assert(hit&&span.contains(hit),'Every visible name fragment has its own native inline hit area: '+JSON.stringify({box,hit:hit?.outerHTML.slice(0,180),window:innerHeight}));
  }
  assert(!wrapper.querySelector('.definition-targets'),'No manual overlay rectangles');
  assert(await inspect(long)==='9','Wrapped private definition is inspectable');
  card().querySelector('[aria-label="Close definition inspection"]').click();
  assert(document.activeElement===target(long),'Closing returns focus to the name');
  editor.view.scrollDOM.scrollTop=0;
  return {userAgent:navigator.userAgent,checks:['underlined definition names without a gutter; exact wrapped hit areas; unique heads only; retained/private inspection; Edit name and focus; dirty/error invalidation; native context menus; hold/drag/selection suppression; IME; one keyboard stop per name']};
 }