diff options
Diffstat (limited to 'packages/meshbay-hub/tests/harness')
4 files changed, 419 insertions, 2 deletions
diff --git a/packages/meshbay-hub/tests/harness/layout_probe.py b/packages/meshbay-hub/tests/harness/layout_probe.py index 65b3083..0abbda6 100644 --- a/packages/meshbay-hub/tests/harness/layout_probe.py +++ b/packages/meshbay-hub/tests/harness/layout_probe.py @@ -81,7 +81,7 @@ RECORDS = [] def main() -> int: widths = [int(w) for w in sys.argv[1].split(",")] - fragment = Path(sys.argv[2]).read_text() + fragment = Path(sys.argv[2]).read_text(encoding="utf-8") selectors = sys.argv[3:] class H(http.server.BaseHTTPRequestHandler): diff --git a/packages/meshbay-hub/tests/harness/lazy_failure_probe.py b/packages/meshbay-hub/tests/harness/lazy_failure_probe.py new file mode 100644 index 0000000..357529a --- /dev/null +++ b/packages/meshbay-hub/tests/harness/lazy_failure_probe.py @@ -0,0 +1,151 @@ +#!/usr/bin/env python3 +""" +What `lazy()` shows when the module it asks for answers 404. + +The shape found live: a tab opened before a hub deploy asks for its not-yet- +loaded modules under the previous `/a/<hash>/` prefix, which the new hub no +longer serves. Every lazily loaded view — Search, Videos, Music, Photos, the +video player — sat on its spinner for good, with an empty console. This +renders the shipped `lazy.js` against a module that does not exist, and one +that does, and reads back what is on the page. + + lazy_failure_probe.py +""" + +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 = 8763 +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="plain"></div><div id="framed"></div><div id="fine"></div> +<script type="module"> +import { html, render } from '/vendor/htm-preact.js'; +import { initLocale } from '/i18n.js'; +import { lazy } from '/lazy.js'; + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +const errors = []; +const origError = console.error; +console.error = (...a) => { errors.push(a.map(String).join(' ')); origError(...a); }; + +const read = (id) => { + const root = document.getElementById(id); + return { + spinner: !!root.querySelector('.spinner'), + notice: (root.querySelector('.lazy-failed p') || {}).textContent || null, + buttons: [...root.querySelectorAll('.lazy-failed button')].map((b) => b.textContent.trim()), + overlay: !!root.querySelector('.video-player-overlay .lazy-failed'), + text: root.textContent.trim(), + }; +}; + +(async () => { + try { + await initLocale(); + // The stale tab's request: a module under a prefix nobody serves. + const Gone = lazy(() => import('/a/0000000000/gone.js'), 'Gone'); + const frame = (c) => html`<div class="video-overlay video-player-overlay">${c}</div>`; + const GoneOverlay = lazy(() => import('/a/0000000000/player.js'), 'Player', + frame(html`<p class="page-message"><span class="spinner"></span></p>`), frame); + // A module that exists still renders as itself. + const Fine = lazy(() => import('/icon.js'), 'Icon'); + + let closed = 0; + render(html`<${Gone} />`, document.getElementById('plain')); + render(html`<${GoneOverlay} onClose=${() => { closed += 1; }} />`, + document.getElementById('framed')); + render(html`<${Fine} name="close" />`, document.getElementById('fine')); + await sleep(1500); + + const out = { plain: read('plain'), framed: read('framed'), errors, + fine: !!document.querySelector('#fine svg, #fine .icon') }; + const btns = document.querySelectorAll('#framed .lazy-failed button'); + if (btns[1]) btns[1].click(); + out.closed = closed; + parent.postMessage(out, '*'); + } catch (err) { + parent.postMessage({ error: String((err && err.stack) || err) }, '*'); + } +})(); +</script></body></html>""" + +PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head> +<body style="margin:0"><iframe src="/case" style="width:900px;height:700px;border:0"></iframe> +<script> +addEventListener('message', (e) => fetch('/log', { method: 'POST', body: JSON.stringify(e.data) })); +</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=900,700", + f"http://127.0.0.1:{PORT}/"], + stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL) + deadline = time.time() + 60 + while not RECORDS and time.time() < deadline: + time.sleep(0.2) + proc.terminate() + proc.wait(timeout=20) + if not RECORDS: + print("the page never reported", file=sys.stderr) + return 1 + print(json.dumps(RECORDS[0])) + return 0 + + +if __name__ == "__main__": + raise SystemExit(main()) diff --git a/packages/meshbay-hub/tests/harness/scroll_probe.py b/packages/meshbay-hub/tests/harness/scroll_probe.py index ae407b8..55d5b2b 100644 --- a/packages/meshbay-hub/tests/harness/scroll_probe.py +++ b/packages/meshbay-hub/tests/harness/scroll_probe.py @@ -32,7 +32,7 @@ STATIC = Path(__file__).resolve().parents[2] / "src" / "meshbay_hub" / "static" # group-page refactor. APP = STATIC / "chat-app.js" PORT = 8736 -FRAG = Path(sys.argv[1]).read_text() +FRAG = Path(sys.argv[1]).read_text(encoding="utf-8") HEIGHTS = ([int(h) for h in sys.argv[2].split(",")] if len(sys.argv) > 2 else [700, 900, 1200]) diff --git a/packages/meshbay-hub/tests/harness/video_series_probe.py b/packages/meshbay-hub/tests/harness/video_series_probe.py new file mode 100644 index 0000000..f161c30 --- /dev/null +++ b/packages/meshbay-hub/tests/harness/video_series_probe.py @@ -0,0 +1,266 @@ +#!/usr/bin/env python3 +""" +What is on screen after watching one episode of a show, and closing the player. + +Playing an episode used to close the show's detail modal, so the next episode +meant opening the show again and picking the season again, every time. The +modal now stays open under the player. That is a claim about three components +at once — `PosterGrid` deciding whether to close it, `GroupPage` mounting the +player beside it, and the stylesheet deciding which of two `.video-overlay`s is +on top — so this renders the shipped `GroupPage` against a stub node and walks +it as a reader would, reading back what is on the page after each step. + +A film goes through the same modal and must still close it: it has nothing left +to pick from. + + video_series_probe.py +""" + +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 = 8761 +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> +<nav class="nav"><div class="nav-left"><a class="nav-brand" href="#/">MeshBay</a></div></nav> +<div class="layout"><main class="main"><div id="root"></div></main></div> +<script> +const ENTRIES = []; +let n = 0; +// Two seasons of three episodes, so there is a season to pick and a +// "next episode" after the one played. No thumbnails: a card with no frame to +// fetch is ready at once. +for (let s = 1; s <= 2; s++) { + for (let e = 1; e <= 3; e++) { + ENTRIES.push({ id: 'ep' + s + e, name: 'Some.Show.S0' + s + 'E0' + e + '.mkv', + display_title: 'Some Show', path: 'videos/Some Show/Season ' + s, + type: 'video', season: s, episode: e, duration: 2600, size: 1024, + added_at: 1750000000 + (++n) }); + } +} +ENTRIES.push({ id: 'film', name: 'A.Film.mkv', display_title: 'A Film', + path: 'videos/films', type: 'video', duration: 6000, size: 1024, + added_at: 1750000000 + (++n) }); + +const ACK = { + is_node_admin: false, + enabled_apps: ['video'], + tmdb_enabled: true, tmdb_language: 'en-US', + video_directories: ['videos'], music_directories: [], photo_directories: [], +}; + +window.MeshBayTransport = function () { + const self = { + connected: false, memberRole: 'member', supportsAppOps: true, + sessionKeys: null, gekRaw: null, + newNodeBundle: null, newNodeBundleRecovery: null, + async connect() { self.connected = true; return ACK; }, + async fetchIndex() { + return { entries: ENTRIES, dirs: ['videos'], + roots: [{ name: 'videos', available: true, writable: false, + removable: false }] }; + }, + // Unmatched: the modal still opens for both, and nothing here depends on + // what TMDB would have said. + async fetchMediaMeta() { return { confidence: 0 }; }, + addReconnectListener() { return () => {}; }, + close() {}, + }; + // Everything else the player asks for never answers: it sits on its + // spinner, which is all a stacking and a close need. + return new Proxy(self, { + get(target, prop) { + if (prop in target) return target[prop]; + if (typeof prop === 'string' && prop.startsWith('on')) return undefined; + if (typeof prop === 'symbol') return undefined; + return () => new Promise(() => {}); + }, + set(target, prop, value) { target[prop] = value; return true; }, + }); +}; +</script> +<script type="module"> +import { html, render } from '/vendor/htm-preact.js'; +import { initLocale } from '/i18n.js'; +import { GroupPage } from '/group-page.js'; + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); +const $ = (sel) => document.querySelector(sel); +const $$ = (sel) => [...document.querySelectorAll(sel)]; +async function until(pred, what) { + for (let i = 0; i < 100; i++) { if (pred()) return; await sleep(50); } + throw new Error('timed out waiting for ' + what); +} + +try { localStorage.removeItem('meshbay_video_view_mode'); } catch {} + +const player = () => $('.video-player-overlay'); +// Which overlay a click in the middle of the window would reach. +const topmost = () => { + const el = document.elementFromPoint(innerWidth / 2, innerHeight / 2); + if (!el) return null; + if (el.closest('.video-player-overlay')) return 'player'; + if (el.closest('.video-detail') || el.closest('.video-overlay')) return 'detail'; + return 'page'; +}; +const state = () => ({ + detail: !!$('.video-detail'), + player: !!player(), + topmost: topmost(), + season: ($('.video-season-current') || {}).textContent?.trim() || null, + marked: $$('.video-episode-row.last-played').map( + (r) => r.querySelector('.video-episode-label').textContent.replace(/\s+/g, ' ').trim()), + rows: $$('.video-episode-row').map( + (r) => r.querySelector('.video-episode-label').textContent.replace(/\s+/g, ' ').trim()), +}); + +(async () => { + const out = {}; + try { + await initLocale(); + render(html`<${GroupPage} groupId="g1" token="t" username="me" userId="u1" + group=${{ id: 'g1', name: 'a group', owner_username: 'me', is_admin: false }} + userPrefs=${{ default_tab: 'video', media_page_size: '50' }} />`, + document.getElementById('root')); + + await until(() => $$('.video-card-title').length === 2, 'two cards'); + const card = (title) => $$('.video-card').find( + (c) => c.querySelector('.video-card-title').textContent.trim().startsWith(title)); + + // The show: open it, go to season 2, play its second episode. + card('Some Show').click(); + await until(() => $('.video-season-trigger'), 'the show modal'); + $('.video-season-trigger').click(); + await until(() => $$('.video-season-option').length === 2, 'the season menu'); + $$('.video-season-option')[1].click(); + await sleep(100); + $$('.video-episode-row')[1].click(); + await until(() => player() && player().querySelector('.video-top-bar'), 'the player'); + await sleep(100); + out.playing = state(); + + // Esc is how most people leave a player. + dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); + await until(() => !player(), 'the player to close on Esc'); + await sleep(100); + out.afterEscape = state(); + + // Next episode, straight from the modal, then the player's own close button. + $$('.video-episode-row')[2].click(); + await until(() => player() && player().querySelector('.video-top-bar .video-close'), + 'the player again'); + const closes = player().querySelectorAll('.video-top-bar .video-close'); + closes[closes.length - 1].click(); + await until(() => !player(), 'the player to close on its button'); + await sleep(100); + out.afterClose = state(); + + // Closing the modal itself still closes it. + $('.video-detail .video-top-bar .video-close').click(); + await sleep(100); + out.afterModalClose = state(); + + // Reopening the show starts afresh: no mark carried over from last time. + card('Some Show').click(); + await until(() => $('.video-detail'), 'the show modal again'); + await sleep(100); + out.reopened = state(); + $('.video-detail .video-top-bar .video-close').click(); + await sleep(100); + + // A film: its modal closes when it starts, as it always did. + card('A Film').click(); + await until(() => $('.video-detail .admin-btn'), 'the film modal'); + $('.video-detail .admin-btn').click(); + await until(() => player(), 'the film player'); + await sleep(100); + out.film = state(); + + parent.postMessage(out, '*'); + } catch (err) { + parent.postMessage({ ...out, error: String((err && err.stack) || err) }, '*'); + } +})(); +</script></body></html>""" + +PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head> +<body style="margin:0"><iframe src="/case" style="width:1100px;height:800px;border:0"></iframe> +<script> +addEventListener('message', (e) => fetch('/log', { method: 'POST', body: JSON.stringify(e.data) })); +</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") + elif path == "/v1/groups/g1/nodes": + self._send(b'{"nodes": [{"node_id": "n1"}]}', "application/json") + 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) + deadline = time.time() + 90 + while not RECORDS and time.time() < deadline: + time.sleep(0.2) + proc.terminate() + proc.wait(timeout=20) + if not RECORDS: + print("the page never reported", file=sys.stderr) + return 1 + print(json.dumps(RECORDS[0])) + return 0 + + +if __name__ == "__main__": + raise SystemExit(main()) |