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

#!/usr/bin/env python3
"""
Deleting a photo from the Photos app, in a real browser.

Mounts the shipped `PhotosApp` on a made-up index, with a transport that
records what it is asked to delete and an index that drops what was deleted,
as a node's does. Right-clicks a tile, picks Delete, answers the page's own
confirmation (ask.js) one way then the other, and does the same from the
lightbox's bar.

    photo_delete_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 = 8776
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="photos"></div>
<script type="module">
import { html, render, useState } from '/vendor/htm-preact.js';
import { initLocale, setLocale } from '/i18n.js';
import { PhotosApp } from '/photos-app.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));

const PHOTOS = [
  { id: 'p1', name: 'beach.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 1,
    uploader_id: 'me' },
  { id: 'p2', name: 'dunes.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 2,
    uploader_id: 'me' },
  { id: 'p3', name: 'theirs.jpg', path: 'Pics/Summer', size: 4, type: 'image', added_at: 3,
    uploader_id: 'someone' },
];
const DELETED = [];
let onNode = [];
const ref = { current: null };
const noop = () => {};

function Host({ isNodeAdmin = false, readOnly = false }) {
  const [entries, setEntries] = useState(onNode);
  ref.current = {
    connected: true,
    signFn: 'sign-fn',
    async deleteFile(id, signFn) {
      DELETED.push([id, signFn]);
      onNode = onNode.filter((e) => e.id !== id);
      return { type: 'file_delete_ack' };
    },
    async fetchIndex() { return { entries: onNode }; },
  };
  return html`<${PhotosApp} groupId="g" transportRef=${ref} gekRef=${{ current: null }}
    status="connected" entries=${entries} photoDirectories=${['Pics']}
    setError=${noop} linkFor=${() => null} readOnly=${readOnly}
    isNodeAdmin=${isNodeAdmin} userId="me"
    applyIndex=${(idx) => setEntries(idx.entries)} />`;
}

const mount = async (props) => {
  onNode = PHOTOS.map((p) => ({ ...p }));
  DELETED.length = 0;
  const root = document.getElementById('photos');
  render(null, root);
  render(html`<${Host} ...${props} />`, root);
  await frame();
  const album = document.querySelector('.photo-album-card');
  if (album) { album.click(); await frame(); }
};
const tileNamed = (name) => [...document.querySelectorAll('.photo-tile')]
  .find((t) => (t.querySelector('img') || {}).alt === name || t.textContent.includes(name));
const tiles = () => document.querySelectorAll('.photo-tile').length;
const labels = () => [...document.querySelectorAll('.ctx-menu .ctx-menu-label')]
  .map((el) => el.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 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;
};
// The page's own confirmation: what it says, whether it is the topmost thing
// on screen, and an answer.
const dialog = () => document.querySelector('[role="alertdialog"]');
const onTop = () => {
  const d = dialog();
  if (!d) return false;
  const r = d.getBoundingClientRect();
  const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
  return Boolean(hit && d.contains(hit));
};
const answer = async (yes) => {
  const d = dialog();
  const buttons = [...d.querySelectorAll('button')];
  const b = yes ? buttons.find((x) => x.type === 'submit') || buttons.at(-1)
                : buttons.find((x) => x.type !== 'submit') || buttons[0];
  b.click();
  await wait(100);
  await frame();
};

(async () => {
  const cases = [];
  try {
    setLocale('en');
    await initLocale();

    // -- one's own photo, from the tile: cancelled, then confirmed --
    await mount({});
    const tile = document.querySelectorAll('.photo-tile')[0];
    await rightClick(tile);
    const own = labels();
    await pick('Delete');
    const asked = dialog() ? dialog().textContent : null;
    await answer(false);
    const afterNo = { deleted: DELETED.length, tiles: tiles() };
    await rightClick(document.querySelectorAll('.photo-tile')[0]);
    await pick('Delete');
    await answer(true);
    await wait(100); await frame();
    cases.push({ case: 'tile', labels: own, asked, after_no: afterNo,
      deleted: DELETED.map((d) => d.slice()), tiles: tiles() });

    // -- somebody else's photo: nothing to delete there --
    const others = [...document.querySelectorAll('.photo-tile')];
    let theirLabels = null;
    for (const t of others) {
      await rightClick(t);
      const l = labels();
      if (!l.includes('Delete')) { theirLabels = l; break; }
    }
    await closeMenus();
    cases.push({ case: 'not mine', menu_without_delete: theirLabels });

    // -- the node's operator may delete anyone's --
    await mount({ isNodeAdmin: true });
    const all = [];
    for (const t of document.querySelectorAll('.photo-tile')) {
      await rightClick(t);
      all.push(labels().includes('Delete'));
    }
    await closeMenus();
    cases.push({ case: 'operator', delete_offered: all });

    // -- from the lightbox: the button, the dialog above it, the next photo --
    await mount({});
    document.querySelectorAll('.photo-tile')[0].click();
    await frame();
    const title = () => (document.querySelector('.photo-lightbox .video-title') || {}).textContent;
    const before = title();
    const btn = document.querySelector('.photo-lightbox button[aria-label="Delete"]');
    if (btn) btn.click();
    await wait(50);
    const dialogOnTop = onTop();
    if (dialog()) await answer(true);
    await wait(100); await frame();
    cases.push({ case: 'lightbox', button: Boolean(btn), dialog_on_top: dialogOnTop,
      before, after: title() || null, open: Boolean(document.querySelector('.photo-lightbox')),
      deleted: DELETED.map((d) => d[0]) });

    // -- read-only (Search): never --
    await mount({ readOnly: true, isNodeAdmin: true });
    const ro = document.querySelectorAll('.photo-tile')[0];
    await rightClick(ro);
    const roLabels = labels();
    await closeMenus();
    ro.click(); await frame();
    cases.push({ case: 'read only', labels: roLabels,
      lightbox_button: Boolean(document.querySelector('.photo-lightbox button[aria-label="Delete"]')) });

    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())