diff options
Diffstat (limited to 'packages/meshbay-hub/tests/harness/menu_scroll_probe.py')
| -rwxr-xr-x | packages/meshbay-hub/tests/harness/menu_scroll_probe.py | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/packages/meshbay-hub/tests/harness/menu_scroll_probe.py b/packages/meshbay-hub/tests/harness/menu_scroll_probe.py new file mode 100755 index 0000000..809d1b1 --- /dev/null +++ b/packages/meshbay-hub/tests/harness/menu_scroll_probe.py @@ -0,0 +1,216 @@ +#!/usr/bin/env python3 +""" +The pop-up menu, scrolled in a real browser. + +A playlist's tracklist expands inside `.ctx-menu`, which is `overflow-y: auto` +with a `max-height` — so a menu taller than the window is the ordinary case, +not an edge one, and scrolling it is the only way to reach the track being +removed. + +`playlist_ui_probe.py` cannot see this: it reaches every row with `.click()`, +which scrolls nothing. Neither can a source-reading test, because the question +is which listener a scroll event reaches. So this mounts the shipped `Menu`, +scrolls it the two ways a person can, and reads back whether it survived. + +The last case is the one that must keep failing to close: a scroll of the +*page* has to dismiss the menu, or it ends up pointing at an album that has +moved out from under it. + + menu_scroll_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 = 8757 +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="root"></div> +<!-- Something for the page itself to scroll, for the last case. --> +<div style="height: 3000px"></div> +<script type="module"> +import { html, render } from '/vendor/htm-preact.js'; +import { Menu } from '/menu.js'; + +const LOGS = []; +addEventListener('error', (e) => LOGS.push('error: ' + (e.message || e))); +addEventListener('unhandledrejection', + (e) => LOGS.push('rejection: ' + ((e.reason && (e.reason.stack || e.reason.message)) || e.reason))); + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +const frame = () => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); + +// Sixty rows, which is what a playlist of sixty tracks draws. Fewer than the +// panel's max-height holds would measure nothing at all, so the count is +// checked rather than assumed (`overflows` below). +const ITEMS = []; +for (let i = 1; i <= 60; i++) { + ITEMS.push({ key: 'k' + i, label: 'Track ' + i, hint: 'An Artist', + onSelect: () => {} }); +} + +const cases = []; +let closed = false; + +(async () => { + const fail = (why) => parent.postMessage({ error: why, logs: LOGS.slice(0, 12) }, '*'); + try { + const onClose = () => { closed = true; }; + render(html`<${Menu} x=${300} y=${40} items=${ITEMS} onClose=${onClose} />`, + document.getElementById('root')); + await frame(); + + const panel = document.querySelector('.ctx-menu'); + if (!panel) return fail('no menu rendered'); + + const overflows = panel.scrollHeight > panel.clientHeight + 1; + cases.push({ case: 'the panel is scrollable at all', + overflows, scrollHeight: panel.scrollHeight, + clientHeight: panel.clientHeight, + // Read back, not asserted from the stylesheet: the sidebar + // needed exactly this, for exactly this reason. + overscrollBehaviorY: getComputedStyle(panel).overscrollBehaviorY }); + if (!overflows) return fail('the fixture does not overflow — it measures nothing'); + + // 1. The wheel. An untrusted WheelEvent performs no default scroll in + // Chrome, so what a wheel *does* is reproduced instead: the panel's + // scrollTop moves, which is what raises the event any listener sees. + panel.scrollTop = 200; + await frame(); + cases.push({ case: 'scrolled inside the menu', + stillOpen: !closed && !!document.querySelector('.ctx-menu'), + scrollTop: document.querySelector('.ctx-menu') + ? document.querySelector('.ctx-menu').scrollTop : null }); + + // 2. Pressing the scrollbar. Chrome reports the scrolled element itself as + // the target of that mousedown — not a child, and not the document. + closed = false; + const live = document.querySelector('.ctx-menu'); + if (live) { + live.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true })); + await frame(); + live.scrollTop = 400; + await frame(); + } + cases.push({ case: 'pressed the menu scrollbar and dragged', + stillOpen: !closed && !!document.querySelector('.ctx-menu'), + scrollTop: document.querySelector('.ctx-menu') + ? document.querySelector('.ctx-menu').scrollTop : null }); + + // 3. A press outside still closes it. + closed = false; + if (document.querySelector('.ctx-menu')) { + document.body.dispatchEvent( + new MouseEvent('mousedown', { bubbles: true, cancelable: true })); + await frame(); + } + cases.push({ case: 'pressed outside the menu', closed }); + + // 4. And so does a scroll of the page. Not optional: the menu is fixed, so + // a grid scrolling under it leaves it pointing at the wrong album. + render(html`<${Menu} x=${300} y=${40} items=${ITEMS} onClose=${onClose} />`, + document.getElementById('root')); + await frame(); + closed = false; + window.scrollTo(0, 500); + await sleep(80); + cases.push({ case: 'scrolled the page underneath', closed }); + + parent.postMessage({ cases, logs: LOGS.slice(0, 8) }, '*'); + } catch (err) { + fail(String((err && err.stack) || err)); + } +})(); +</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()) |