buninu-browser 0.3.0 → 0.4.0

package/test/qml-flea-previews.test.js

@@ -0,0 +1,163 @@
+import { test, expect } from 'bun:test';
+import { join } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+import { fleaSandbox } from './helpers/flea-sandbox.js';
+const flea = process.env.BUNINU_FLEA_ROOT,
+  omarchy = process.env.BUNINU_OMARCHY_ROOT;
+for (const [type, extension, contents, expected] of [
+  [
+    'PreviewText',
+    'txt',
+    Array.from({ length: 80 }, (_, i) => 'example line ' + i).join('\n'),
+    'example line 0',
+  ],
+  ['PreviewText', 'csv', 'Name,Count\nApple,12\nOrange,9\n', 'Apple'],
+  [
+    'PreviewMarkdown',
+    'md',
+    '# Flea preview\n\nA **bold** paragraph.\n\n- First item\n- Second item\n',
+    'Flea preview',
+  ],
+])
+  test.skipIf(!flea || !omarchy)(
+    'unchanged Flea ' + type + ' renders a real .' + extension + ' file',
+    async () => {
+      const sandbox = fleaSandbox(flea, omarchy);
+      let browser;
+      try {
+        const path = join(sandbox.dir, 'sample.' + extension);
+        await Bun.write(path, contents);
+        const file = join(sandbox.dir, 'main.qml');
+        await Bun.write(
+          file,
+          `import QtQuick
+import ${JSON.stringify(join(sandbox.flea, 'ui'))} as Flea
+Rectangle {width:800;height:600;color:Flea.Theme.color.background
+ Flea.${type} {id:preview;anchors.fill:parent;active:true;path:${JSON.stringify(path)};size:${Buffer.byteLength(contents)}}
+}`,
+        );
+        browser = await createBrowser({
+          spareRenderer: false,
+          rendererTimeout: 30000,
+        });
+        await browser.context.addInitScript(
+          `globalThis.qmlErrors=[];addEventListener('error',e=>qmlErrors.push(String(e.error?.stack||e.message)));const old=console.error;console.error=(...args)=>{qmlErrors.push(args.map(String).join(' '));old(...args);};`,
+        );
+        await browser.context.navigate(Bun.pathToFileURL(file).href);
+        let text = '';
+        for (let i = 0; i < 150; i++) {
+          text = await browser.context.evaluate('document.body.innerText');
+          if (text.includes(expected)) break;
+          await Bun.sleep(40);
+        }
+        expect(
+          await browser.context.evaluate('JSON.stringify(qmlErrors)'),
+        ).toBe('[]');
+        expect(text).toContain(expected);
+        await Bun.write(
+          '/tmp/buninu-flea-preview-' + extension + '.png',
+          Buffer.from(
+            await browser.context.screenshot({ format: 'png' }),
+            'base64',
+          ),
+        );
+      } finally {
+        browser?.close();
+        sandbox.close();
+      }
+    },
+    60000,
+  );
+
+for (const extension of ['svg', 'png'])
+  test.skipIf(!flea || !omarchy)(
+    'unchanged Flea PreviewImage loads, zooms and resets a real ' +
+      extension +
+      ' image',
+    async () => {
+      const sandbox = fleaSandbox(flea, omarchy);
+      let browser;
+      try {
+        const path = join(sandbox.dir, 'sample.' + extension);
+        if (extension === 'svg')
+          await Bun.write(
+            path,
+            '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="160"><rect width="160" height="160" fill="#ff0000"/><rect x="160" width="160" height="160" fill="#0000ff"/></svg>',
+          );
+        else {
+          const { encodeImage } = await import('../lib/paint/frame.js');
+          const pixels = new Uint8Array(320 * 160 * 4);
+          for (let y = 0; y < 160; y++)
+            for (let x = 0; x < 320; x++)
+              pixels.set(
+                x < 160 ? [255, 0, 0, 255] : [0, 0, 255, 255],
+                (y * 320 + x) * 4,
+              );
+          await Bun.write(path, await encodeImage(pixels, 320, 160));
+        }
+        const file = join(sandbox.dir, 'image.qml');
+        await Bun.write(
+          file,
+          `import QtQuick
+import ${JSON.stringify(join(sandbox.flea, 'ui'))} as Flea
+Rectangle {width:800;height:600;color:Flea.Theme.color.background
+ Flea.PreviewImage {id:preview;anchors.fill:parent;path:${JSON.stringify(path)}}
+ Text {id:status;text:preview.status+":"+preview.zoom+":"+preview.fullPicture.drawn}
+ Button {id:zoom;y:550;text:"Zoom";onClicked:preview.zoomBy(1)}
+ Button {id:fit;x:100;y:550;text:"Fit";onClicked:preview.zoomFit()}
+}`,
+        );
+        browser = await createBrowser({
+          spareRenderer: false,
+          rendererTimeout: 30000,
+        });
+        await browser.context.addInitScript(
+          `globalThis.qmlErrors=[];addEventListener('error',e=>qmlErrors.push(String(e.error?.stack||e.message)));`,
+        );
+        await browser.context.navigate(Bun.pathToFileURL(file).href);
+        const until = async (predicate) => {
+          for (let i = 0; i < 150; i++) {
+            const status = await browser.context.evaluate(
+              'document.getElementById("status")?.textContent',
+            );
+            if (predicate(status)) return status;
+            await Bun.sleep(40);
+          }
+          throw Error(
+            await browser.context.evaluate(
+              'document.body.innerText+JSON.stringify(qmlErrors)',
+            ),
+          );
+        };
+        await until((s) => s?.startsWith('image:1:'));
+        await browser.context.evaluate(
+          'document.getElementById("zoom").click()',
+        );
+        const zoomed = await until(
+          (s) =>
+            s?.startsWith('image:') &&
+            !s.startsWith('image:1:') &&
+            s.endsWith(':true'),
+        );
+        expect(zoomed).toContain(':true');
+        await Bun.write(
+          '/tmp/buninu-flea-preview-' + extension + '.png',
+          Buffer.from(
+            await browser.context.screenshot({ format: 'png' }),
+            'base64',
+          ),
+        );
+        await browser.context.evaluate(
+          'document.getElementById("fit").click()',
+        );
+        await until((s) => s === 'image:1:false');
+        expect(
+          await browser.context.evaluate('JSON.stringify(qmlErrors)'),
+        ).toBe('[]');
+      } finally {
+        browser?.close();
+        sandbox.close();
+      }
+    },
+    60000,
+  );

package/test/qml-flea-rows.test.js

@@ -0,0 +1,101 @@
+// Component tests with ordinary input data, not a replacement Flea backend.
+import { test, expect } from 'bun:test';
+import { join } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+import { fleaSandbox } from './helpers/flea-sandbox.js';
+const flea = process.env.BUNINU_FLEA_ROOT,
+  omarchy = process.env.BUNINU_OMARCHY_ROOT;
+for (const type of ['Row', 'GridTile'])
+  test.skipIf(!flea || !omarchy)(
+    'unchanged Flea ' +
+      type +
+      ' displays file metadata and reacts to changed input',
+    async () => {
+      const sandbox = fleaSandbox(flea, omarchy);
+      let browser;
+      try {
+        const file = join(sandbox.dir, 'rows.qml');
+        await Bun.write(
+          file,
+          `import QtQuick
+import ${JSON.stringify(join(sandbox.flea, 'ui'))} as Flea
+Rectangle {id:root;width:800;height:600;color:Flea.Theme.color.background
+ property var entry:({n:"example-notes.txt",s:12345,m:1700000000,p:33188,i:"file",k:0,d:false})
+ Flea.${type} {id:row;x:20;y:30;width:${type === 'Row' ? 760 : 260};height:${type === 'Row' ? 60 : 300};row:root.entry;cursor:true}
+ ${
+   type === 'GridTile'
+     ? `Text {id:captionMetrics;x:400;y:400;text:row.captionItem.lineCount+":"+row.captionItem.truncated}
+ Button {id:longName;x:200;y:500;text:"Long filename";onClicked:root.entry=({n:"a very long file name with many words and notes.txt",s:456,m:1700000000,p:33188,i:"file",k:0,d:false})}`
+     : ''
+ }
+ Button {id:change;y:500;text:"Change input";onClicked:root.entry=({n:"renamed-notes.txt",s:456,m:1700000000,p:33188,i:"file",k:0,d:false})}
+}`,
+        );
+        browser = await createBrowser({
+          spareRenderer: false,
+          rendererTimeout: 30000,
+        });
+        await browser.context.addInitScript(
+          `globalThis.qmlErrors=[];addEventListener('error',e=>qmlErrors.push(String(e.error?.stack||e.message)));const old=console.error;console.error=(...args)=>{qmlErrors.push(args.map(String).join(' '));old(...args);};`,
+        );
+        await browser.context.navigate(Bun.pathToFileURL(file).href);
+        const ready = await browser.context.evaluate(
+          '!!document.getElementById("change")',
+        );
+        if (!ready)
+          throw Error(
+            await browser.context.evaluate(
+              'document.querySelector("p")?.textContent||document.body.innerText',
+            ),
+          );
+
+        const until = async (word) => {
+          for (let i = 0; i < 150; i++) {
+            const text = await browser.context.evaluate(
+              'document.body.innerText',
+            );
+            if (text.includes(word)) return;
+            await Bun.sleep(40);
+          }
+          throw Error(
+            await browser.context.evaluate(
+              'document.body.innerText+JSON.stringify(qmlErrors)',
+            ),
+          );
+        };
+        await until('example-notes.txt');
+        await browser.context.evaluate(
+          'document.getElementById("change").click()',
+        );
+        await until('renamed-notes.txt');
+        if (type === 'GridTile') {
+          await browser.context.evaluate(
+            'document.getElementById("longName").click()',
+          );
+          let metric = '';
+          for (let i = 0; i < 100; i++) {
+            metric = await browser.context.evaluate(
+              'document.getElementById("captionMetrics").textContent',
+            );
+            if (metric === '2:false') break;
+            await Bun.sleep(20);
+          }
+          expect(metric).toBe('2:false');
+        }
+        expect(
+          await browser.context.evaluate('JSON.stringify(qmlErrors)'),
+        ).toBe('[]');
+        await Bun.write(
+          '/tmp/buninu-flea-' + type + '.png',
+          Buffer.from(
+            await browser.context.screenshot({ format: 'png' }),
+            'base64',
+          ),
+        );
+      } finally {
+        browser?.close();
+        sandbox.close();
+      }
+    },
+    60000,
+  );

package/test/qml-flea-textures.test.js

@@ -0,0 +1,59 @@
+import { test, expect } from 'bun:test';
+import { join } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+import { loadGraphics } from '../lib/renderer/page-renderer.js';
+import { fleaSandbox } from './helpers/flea-sandbox.js';
+const flea=process.env.BUNINU_FLEA_ROOT, omarchy=process.env.BUNINU_OMARCHY_ROOT;
+for(const kind of ['swap','clip']) test.skipIf(!flea||!omarchy)('unchanged Flea '+kind+' paints actual texture pixels',async()=>{
+  const sandbox=fleaSandbox(flea,omarchy);
+  let browser;
+  try {
+    const content=kind==='swap'?`
+ property bool complete:true
+ Flea.PreviewSwap {id:swap;x:20;y:20;width:180;height:100;ready:complete;folderHold:true
+  Rectangle {id:source;anchors.fill:parent;color:"red"}}
+ Button {id:move;y:150;text:"Move";onClicked:{complete=false;swap.hold(function(){source.color="blue";swap.start(false)},1)}}
+ Button {id:finish;x:100;y:150;text:"Finish";onClicked:{swap.folderHold=false;complete=true}}
+ Text {id:status;y:200;text:JSON.stringify(swap.describe())}
+`:`
+ Rectangle {id:source;x:20;y:20;width:100;height:60;color:"red"}
+ Flea.HtmlClip {id:clip;x:150;y:20;width:100;height:60;radius:20;target:source}
+ Button {id:blue;y:150;text:"Blue";onClicked:source.color="blue"}
+`;
+    const file=join(sandbox.dir,'main.qml');
+    await Bun.write(file,`import QtQuick\nimport ${JSON.stringify(join(sandbox.flea,'ui'))} as Flea\nRectangle {width:400;height:240;color:"white"\n${content}\n}`);
+    browser=await createBrowser({spareRenderer:false,rendererTimeout:15000});
+    await browser.context.resize(400,240);
+    await browser.context.addInitScript('globalThis.errors=[];addEventListener("error",e=>errors.push(String(e.error?.stack||e.message)))');
+    await browser.context.navigate(Bun.pathToFileURL(file).href);
+    const run=code=>browser.context.evaluate(code);
+    async function until(fn){for(let i=0;i<70;i++){if(await fn())return;await Bun.sleep(20);}throw Error(await run('document.body.innerText+JSON.stringify(errors)'));}
+    const {CanvasKit:kit}=await loadGraphics();
+    async function capture(){return Buffer.from(await browser.context.screenshot({format:'png'}),'base64');}
+    function pixel(bytes,x,y){const image=kit.MakeImageFromEncoded(bytes);try{return [...image.readPixels(x,y,{width:1,height:1,colorType:kit.ColorType.RGBA_8888,alphaType:kit.AlphaType.Unpremul,colorSpace:kit.ColorSpace.SRGB})];}finally{image.delete();}}
+    if(kind==='swap'){
+      await until(async()=>await run('!!document.getElementById("move")'));
+      expect(pixel(await capture(),30,30)).toEqual([255,0,0,255]);
+      await run('document.getElementById("move").click()');
+      await until(async()=>await run('JSON.parse(document.getElementById("status").textContent).holding'));
+      const held=await capture();await Bun.write('/tmp/flea-preview-held.png',held);
+      expect(pixel(held,30,30)).toEqual([255,0,0,255]);
+      expect(await run('document.getElementById("source").style.backgroundColor')).toBe('blue');
+      await run('document.getElementById("finish").click()');
+      await until(async()=>!(await run('JSON.parse(document.getElementById("status").textContent).holding')));
+      const done=await capture();await Bun.write('/tmp/flea-preview-released.png',done);
+      expect(pixel(done,30,30)).toEqual([0,0,255,255]);
+      expect(await run('JSON.parse(document.getElementById("status").textContent).last.end')).toBe('landed');
+    }else{
+      await until(async()=>pixel(await capture(),200,50)[0]===255&&pixel(await capture(),200,50)[1]===0);
+      const rounded=await capture();await Bun.write('/tmp/flea-preview-rounded.png',rounded);
+      expect(pixel(rounded,25,25)).toEqual([255,255,255,255]);
+      expect(pixel(rounded,151,21)).toEqual([255,255,255,255]);
+      expect(pixel(rounded,200,50)).toEqual([255,0,0,255]);
+      await run('document.getElementById("blue").click()');
+      await until(async()=>pixel(await capture(),200,50)[0]===0);
+      expect(pixel(await capture(),200,50)).toEqual([0,0,255,255]);
+    }
+    expect(await run('errors')).toEqual([]);
+  }finally{browser?.close();sandbox.close();}
+},30000);

package/test/qml-flea-view-switch.test.js

@@ -0,0 +1,33 @@
+import { test, expect } from 'bun:test';
+import { mkdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+import { fleaSandbox } from './helpers/flea-sandbox.js';
+const flea=process.env.BUNINU_FLEA_ROOT, omarchy=process.env.BUNINU_OMARCHY_ROOT;
+test.skipIf(!flea||!omarchy||!process.env.FLEA_BIN)('Flea hides retained columns when switching back to list',async()=>{
+ const sandbox=fleaSandbox(flea,omarchy), oldPath=process.env.FLEA_PATH;
+ let browser;
+ try {
+  process.env.FLEA_PATH=sandbox.values.HOME;
+  mkdirSync(join(sandbox.values.HOME,'Documents'));
+  await Bun.write(join(sandbox.values.HOME,'Documents/inside.txt'),'inside');
+  await Bun.write(join(sandbox.values.HOME,'hello.md'),'hello');
+  await Bun.write(join(sandbox.values.HOME,'second.js'),'second');
+  browser=await createBrowser({spareRenderer:false,rendererTimeout:30000});
+  await browser.context.resize(800,600);
+  await browser.context.addInitScript(`globalThis.views=[];let rt;Object.defineProperty(globalThis,"__qmlRuntime",{get:()=>rt,set:r=>{rt=r;const d=r.describe;r.describe=(v,t,...a)=>{if(t.includes("ColumnsArea")||t.includes("Pane"))views.push({v,t});return d(v,t,...a)}}});globalThis.qmlErrors=[];addEventListener('error',e=>qmlErrors.push(String(e.error?.stack||e.message)));`);
+  await browser.context.navigate(Bun.pathToFileURL(join(sandbox.flea,'ui/boot/shell.qml')).href);
+  const names=column=>browser.context.evaluate(`Array.from(document.querySelectorAll('[data-qml-type="Text"]')).map(e=>({text:e.textContent,r:e.getBoundingClientRect()})).filter(({text,r})=>/^(cache|config|data|home|imports|state|Documents|inside.txt|hello.md|second.js)$/.test(text)&&r.width>0&&r.y>20&&r.x>=${column===0?200:500}&&r.x<${column===0?500:800}).sort((a,b)=>a.r.y-b.r.y).map(e=>e.text)`);
+  async function until(column,wanted){for(let i=0;i<150;i++){const actual=await names(column);if(JSON.stringify(actual)===JSON.stringify(wanted))return;await Bun.sleep(30);}expect(await names(column)).toEqual(wanted);}
+  await until(0,['Documents','hello.md','second.js']);
+  await browser.context.press('2',{code:'Digit2',modifiers:2});
+  await until(1,['inside.txt']);
+  await browser.context.press('1',{code:'Digit1',modifiers:2});
+  await Bun.sleep(100);
+  expect(await browser.context.evaluate(`views.find(({t})=>t.includes('Pane')).v.viewMode`)).toBe('list');
+  expect(await browser.context.evaluate(`views.find(({t})=>t.includes('Pane')).v.columnsArea.visible`)).toBe(false);
+  await until(1,[]);
+  await Bun.write('/tmp/flea-list-switch.png',Buffer.from(await browser.context.screenshot({format:'png'}),'base64'));
+  expect(await browser.context.evaluate('qmlErrors')).toEqual([]);
+ }finally{browser?.close();if(oldPath===undefined)delete process.env.FLEA_PATH;else process.env.FLEA_PATH=oldPath;sandbox.close();}
+},60000);

package/test/qml-flea-wayland.test.js

@@ -0,0 +1,68 @@
+// Opt-in real socket test; owns its compositor and never touches a user's Land.
+import { test, expect } from 'bun:test';
+import { join } from 'node:path';
+import { fleaSandbox } from './helpers/flea-sandbox.js';
+import { launch } from '../frontends/wayland/index.js';
+const flea = process.env.BUNINU_FLEA_ROOT,
+  omarchy = process.env.BUNINU_OMARCHY_ROOT;
+test.skipIf(!flea || !omarchy || !process.env.BUNINU_QML_WAYLAND_TEST)(
+  'real Flea receives Wayland keys and closes through Super-W',
+  async () => {
+    const { start } = await import('../../buninu-land/compositor.js');
+    const sandbox = fleaSandbox(flea, omarchy),
+      oldRuntime = process.env.XDG_RUNTIME_DIR;
+    let land, app;
+    try {
+      process.env.XDG_RUNTIME_DIR = sandbox.dir;
+      land = await start([
+        '--remote-debugging-port=0',
+        '--window-size=1000,720',
+      ]);
+      app = await launch({
+        url: Bun.pathToFileURL(join(sandbox.flea, 'ui/boot/shell.qml')).href,
+        width: 1000,
+        height: 720,
+        socket: join(sandbox.dir, 'wayland-buninu'),
+      });
+      const until = async (predicate) => {
+        for (let i = 0; i < 300; i++) {
+          if (await predicate()) return;
+          await Bun.sleep(40);
+        }
+        throw Error('Flea Wayland state did not settle');
+      };
+      const text = () =>
+        app.browser.context.evaluate('document.body.innerText');
+      await until(() =>
+        land.compositor.wm.renderSurfaces().some((s) => s.pixels),
+      );
+      expect(await text()).toContain('PLACES');
+      const key = async (key, code, modifiers = 0) => {
+        for (const type of ['keyDown', 'keyUp'])
+          land.context.dispatchKeyEvent({ type, key, code, modifiers });
+        await Bun.sleep(100);
+      };
+      await key(',', 'Comma');
+      await until(async () => (await text()).includes('Settings'));
+      await Bun.write(
+        '/tmp/buninu-flea-wayland.png',
+        Buffer.from(await land.context.screenshot({ format: 'png' }), 'base64'),
+      );
+      await key('Escape', 'Escape');
+      await until(async () => !(await text()).includes('Settings'));
+      let closed = false;
+      app.done.then(() => (closed = true));
+      await key('w', 'KeyW', 4);
+      await until(() => closed);
+      await until(() => !land.compositor.wm.visible.length);
+      expect(closed).toBe(true);
+    } finally {
+      app?.close();
+      land?.close();
+      if (oldRuntime === undefined) delete process.env.XDG_RUNTIME_DIR;
+      else process.env.XDG_RUNTIME_DIR = oldRuntime;
+      sandbox.close();
+    }
+  },
+  120000,
+);

package/test/qml-flea.test.js

@@ -0,0 +1,34 @@
+import { test, expect } from 'bun:test';
+import { createBrowser } from '../lib/headless-shell.js';
+
+test('Flea EscapeHint imports a real singleton and shares reactive theme updates', async () => {
+  const browser = await createBrowser({ spareRenderer: false });
+  try {
+    await browser.context.resize(640, 400, 1);
+    await browser.context.navigate(
+      new URL('./fixtures/qml/flea/demo.qml', import.meta.url).href,
+    );
+    expect(await browser.context.evaluate('document.title')).toBe(
+      'Browser — Flea real import test',
+    );
+    const colors = () =>
+      browser.context.evaluate(
+        "JSON.stringify([...document.querySelectorAll('[data-qml-type=Text]')].filter(e=>e.textContent==='esc').map(e=>e.style.color))",
+      );
+    expect(JSON.parse(await colors())).toEqual(['#70e1e8', '#70e1e8']);
+    await browser.context.evaluate('document.querySelector("button").click()');
+    expect(JSON.parse(await colors())).toEqual(['#ffcc66', '#ffcc66']);
+    await browser.context.evaluate('document.querySelector("button").click()');
+    expect(JSON.parse(await colors())).toEqual(['#70e1e8', '#70e1e8']);
+    expect(await browser.context.evaluate('typeof Theme')).toBe('undefined');
+    await Bun.write(
+      '/tmp/browser-flea-import.png',
+      Buffer.from(
+        await browser.context.screenshot({ format: 'png' }),
+        'base64',
+      ),
+    );
+  } finally {
+    browser.close();
+  }
+}, 30000);