path: root/packages/meshbay-hub/tests/harness/copy_link_probe.py

#!/usr/bin/env python3
"""
"Copy link" in Files, Music and Photos, in a real browser.

Mounts the shipped `FilesPanel`, `MusicApp` and `PhotosApp` on a made-up
index — no node, no transport — with the `linkFor` a group page gives them,
built by the real `copy-link.js` for a group `demo@someowner`. Opens each
menu the way a reader would (right-click; the dots on a phone; the Files
toolbar with one row ticked), picks "Copy link", and reads back what reached
the clipboard and what the page said.

    copy_link_probe.py

Prints JSON: one entry per case.
"""

import http.server
import json
import socketserver
import subprocess
import sys
import tempfile
import threading
import time
from pathlib import Path

STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static"
PORT = 8775
RECORDS = []
socketserver.TCPServer.allow_reuse_address = True

FRAME = r"""<!doctype html><html><head><meta charset=utf-8>
<link rel="stylesheet" href="/style.css"></head><body>
<div id="files"></div><div id="music"></div><div id="photos"></div>
<script type="module">
import { html, render } from '/vendor/htm-preact.js';
import { initLocale, setLocale } from '/i18n.js';
import { FilesPanel } from '/files-app.js';
import { MusicApp } from '/music-app.js';
import { PhotosApp } from '/photos-app.js';
import { groupItemLink, entryPath } from '/copy-link.js';

const LOGS = [];
addEventListener('error', (e) => LOGS.push('error: ' + (e.message || e)));
addEventListener('unhandledrejection',
  (e) => LOGS.push('rejection: ' + (e.reason && e.reason.message || e.reason)));
const frame = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
const wait = (ms) => new Promise((r) => setTimeout(r, ms));

// What the clipboard was handed, and nothing else: a headless page has no
// clipboard permission to test against.
const COPIES = [];
Object.defineProperty(navigator, 'clipboard', { configurable: true,
  value: { writeText: async (text) => { COPIES.push(text); } } });

const GROUP = { name: 'demo', owner_username: 'someowner' };
const linkFor = (target) => (target
  ? groupItemLink(GROUP, typeof target === 'string' ? target : entryPath(target)) : null);
const noop = () => {};
const ref = { current: null };

const labels = () => [...document.querySelectorAll('.ctx-menu .ctx-menu-label')]
  .map((el) => el.textContent);
const pick = async (label) => {
  const item = [...document.querySelectorAll('.ctx-menu .ctx-menu-item')]
    .find((b) => b.querySelector('.ctx-menu-label').textContent === label);
  if (!item) return false;
  item.click();
  await wait(50);
  return true;
};
const note = () => (document.querySelector('.page-note') || {}).textContent || '';
const closeMenus = async () => {
  document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
  await frame();
};
const rightClick = async (el) => {
  await closeMenus();
  const r = el.getBoundingClientRect();
  el.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true,
    clientX: r.left + 10, clientY: r.top + 5 }));
  await frame();
};
const rowNamed = (name) => [...document.querySelectorAll('tr.file-row')]
  .find((tr) => tr.querySelector('.file-name')
    && tr.querySelector('.file-name').textContent.trim().startsWith(name));

(async () => {
  const cases = [];
  try {
    setLocale('en');
    await initLocale();
    try { localStorage.setItem('meshbay_music_view_mode', 'flat'); } catch {}

    // -- Files --
    const FILES = [
      { id: 'f1', name: 'IMG 0001.JPG', path: 'Root/trip_2015', size: 10, type: 'image',
        added_at: 1 },
      { id: 'f2', name: 'notes.txt', path: 'Root/trip_2015', size: 5, type: 'document',
        added_at: 2 },
    ];
    render(html`<${FilesPanel} groupId="g" transportRef=${ref} gekRef=${ref}
      status="connected" entries=${FILES} nodeDirs=${['Root', 'Root/trip_2015']}
      nodeRoots=${[{ name: 'Root', writable: false }]}
      setEntries=${noop} setNodeDirs=${noop} setNodeRoots=${noop} applyIndex=${noop}
      isNodeAdmin=${false} operatorPaired=${false} userId="me" setError=${noop}
      onPreview=${noop} linkFor=${linkFor} />`, document.getElementById('files'));
    await frame();

    await rightClick(rowNamed('Root'));
    const folderLabels = labels();
    await pick('Copy link');
    cases.push({ case: 'files folder', labels: folderLabels, copied: COPIES.at(-1), note: note() });

    rowNamed('Root').click(); await frame();
    rowNamed('trip_2015').click(); await frame();
    await rightClick(rowNamed('IMG 0001.JPG'));
    const fileLabels = labels();
    await pick('Copy link');
    cases.push({ case: 'files file', labels: fileLabels, copied: COPIES.at(-1), note: note() });

    await closeMenus();
    const linkBtn = () => document.querySelector('.tb-actions button[aria-label="Copy link"]');
    rowNamed('notes.txt').querySelector('input[type=checkbox]').click(); await frame();
    const oneTicked = linkBtn() ? !linkBtn().disabled : null;
    if (linkBtn() && !linkBtn().disabled) { linkBtn().click(); await wait(50); }
    const copiedFromToolbar = COPIES.at(-1);
    for (const n of ['IMG 0001.JPG', 'notes.txt']) {
      rowNamed(n).querySelector('input[type=checkbox]').click(); await frame();
    }
    const twoTicked = linkBtn() ? !linkBtn().disabled : null;
    cases.push({ case: 'files toolbar', one_enabled: oneTicked, two_enabled: twoTicked,
      copied: copiedFromToolbar });
    render(null, document.getElementById('files'));

    // -- Music: a loose track, its row's dots (what a phone has) --
    const TRACKS = [
      { id: 'a1', name: 'track 01.flac', path: 'Music/Some Album', size: 3, type: 'audio' },
      { id: 'a2', name: 'track 02.flac', path: 'Music/Some Album', size: 3, type: 'audio' },
    ];
    render(html`<${MusicApp} groupId="g" transportRef=${ref} gekRef=${ref}
      status="connected" entries=${TRACKS} musicDirectories=${['Music']}
      musicbrainzConfig=${{ enabled: false }} onPlayQueue=${noop} userId=""
      linkFor=${linkFor} />`, document.getElementById('music'));
    await frame();
    await closeMenus();
    const dots = document.querySelector('.music-flat-track .ctx-dots');
    if (dots) { dots.click(); await frame(); }
    const trackLabels = labels();
    await pick('Copy link');
    cases.push({ case: 'music track', dots: Boolean(dots), labels: trackLabels,
      copied: COPIES.at(-1) });
    render(null, document.getElementById('music'));

    // -- Photos: right-click a tile; the lightbox's button --
    const PHOTOS = [
      { id: 'p1', name: 'beach.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 1 },
    ];
    render(html`<${PhotosApp} groupId="g" transportRef=${ref} gekRef=${ref}
      status="connected" entries=${PHOTOS} photoDirectories=${['Pics']}
      setError=${noop} linkFor=${linkFor} />`, document.getElementById('photos'));
    await frame();
    const album = document.querySelector('.photo-album-card');
    if (album) { album.click(); await frame(); }
    const tile = document.querySelector('.photo-tile');
    let tileLabels = [];
    if (tile) {
      await rightClick(tile);
      tileLabels = labels();
      await pick('Copy link');
    }
    const fromTile = COPIES.at(-1);
    if (tile) { tile.click(); await frame(); }
    const lb = document.querySelector('.photo-lightbox button[aria-label="Copy link"]');
    COPIES.length = 0;
    if (lb) { lb.click(); await wait(50); }
    cases.push({ case: 'photos', tile: Boolean(tile), labels: tileLabels, copied: fromTile,
      lightbox_button: Boolean(lb), lightbox_copied: COPIES.at(-1) || null });

    // Said, then gone (note.js): still up just after, not 2.5 s later.
    const upAfterCopy = Boolean(document.querySelector('.page-note'));
    await wait(2700);
    cases.push({ case: 'note goes', up_after_copy: upAfterCopy,
      up_later: Boolean(document.querySelector('.page-note')) });

    parent.postMessage({ cases, logs: LOGS, origin: location.origin }, '*');
  } catch (err) {
    parent.postMessage({ error: String(err && (err.stack || err)), logs: LOGS }, '*');
  }
})();
</script></body></html>"""

PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head>
<body style="margin:0"><div id="frames"></div><script>
addEventListener('message', (e) => {
  fetch('/log', { method: 'POST', body: JSON.stringify(e.data) });
});
const f = document.createElement('iframe');
f.src = '/case';
f.style.cssText = 'width:1100px;height:800px;border:0;display:block';
document.getElementById('frames').appendChild(f);
</script></body></html>"""


class H(http.server.BaseHTTPRequestHandler):
    def log_message(self, *a):
        pass

    def do_POST(self):
        length = int(self.headers.get("Content-Length") or 0)
        if self.path == "/log":
            RECORDS.append(json.loads(self.rfile.read(length).decode()))
        else:
            self.rfile.read(length)
        self.send_response(204)
        self.end_headers()

    def _send(self, body: bytes, ctype: str) -> None:
        self.send_response(200)
        self.send_header("Content-Type", ctype)
        self.send_header("Content-Length", str(len(body)))
        self.end_headers()
        self.wfile.write(body)

    def do_GET(self):
        path = self.path.split("?")[0]
        if path == "/":
            self._send(PAGE.encode(), "text/html; charset=utf-8")
        elif path == "/case":
            self._send(FRAME.encode(), "text/html; charset=utf-8")
        else:
            asset = (STATIC / path.lstrip("/")).resolve()
            if not str(asset).startswith(str(STATIC)) or not asset.is_file():
                self.send_response(404)
                self.end_headers()
                return
            self._send(asset.read_bytes(),
                       "text/css" if asset.suffix == ".css"
                       else "text/javascript" if asset.suffix == ".js"
                       else "application/octet-stream")


def main() -> int:
    with socketserver.TCPServer(("127.0.0.1", PORT), H) as srv:
        threading.Thread(target=srv.serve_forever, daemon=True).start()
        with tempfile.TemporaryDirectory(ignore_cleanup_errors=True) as profile:
            proc = subprocess.Popen(
                ["google-chrome", "--headless=new", "--disable-gpu", "--no-sandbox",
                 f"--user-data-dir={profile}", "--window-size=1100,900",
                 f"http://127.0.0.1:{PORT}/"],
                stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
            for _ in range(300):
                if RECORDS:
                    break
                time.sleep(0.1)
            proc.terminate()
            try:
                proc.wait(timeout=10)
            except subprocess.TimeoutExpired:
                proc.kill()
                proc.wait()
    if not RECORDS:
        print(json.dumps({"error": "no measurement"}), file=sys.stderr)
        return 1
    print(json.dumps(RECORDS[0], indent=1))
    return 0


if __name__ == "__main__":
    raise SystemExit(main())