diff options
Diffstat (limited to 'packages/meshbay-hub/tests/harness')
| -rwxr-xr-x | packages/meshbay-hub/tests/harness/music_queue_probe.py | 308 |
1 files changed, 308 insertions, 0 deletions
diff --git a/packages/meshbay-hub/tests/harness/music_queue_probe.py b/packages/meshbay-hub/tests/harness/music_queue_probe.py new file mode 100755 index 0000000..f74ceb2 --- /dev/null +++ b/packages/meshbay-hub/tests/harness/music_queue_probe.py @@ -0,0 +1,308 @@ +#!/usr/bin/env python3 +""" +The queue verbs, driven through the real interface in a real browser. + +`queue-ops.js` is unit-tested on its own, but everything between a right-click +and the reducer is not reachable that way: whether the menu opens at all, +whether the dots button survived being put inside a row that used to be one +big `<button>` (a button cannot contain a button — the browser reparents the +inner one and the row comes apart), and whether "play next" reaches the player +with its `op` intact through two components and the shell. + +So this renders the shipped `GroupPage` and the shipped `MusicPlayerBar` +against a stub node, presses the real controls, and reports the queue after +each one — read where a person reads it, out of the player's own queue panel. + + music_queue_probe.py + +Prints JSON: one entry per step, with the play order and the playing track. + +Playback itself cannot happen here: the stub never returns a transport, so +every track stays loading for ever. That is deliberate and is not what is +being measured — the queue is. +""" +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 = 8751 +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> +// Four albums of three tracks, each track titled so the queue can be read back +// unambiguously: "A2-t3" is the third track of the second album and nothing +// else. A fixture whose rows cannot be told apart measures nothing. +const ENTRIES = []; +let n = 0; +for (let a = 1; a <= 4; a++) { + for (let i = 1; i <= 3; i++) { + ENTRIES.push({ + id: 'e' + (++n), name: `A${a}-t${i}.flac`, display_title: `A${a}-t${i}`, + path: `musique/Artiste ${a}/Album ${a}`, type: 'audio', + artist: `Artiste ${a}`, album: `Album ${a}`, + track_no: i, duration: 200, size: 1024 * 1024, added_at: 1750000000 + n, + }); + } +} + +const ACK = { + is_node_admin: false, + enabled_apps: ['files', 'music'], + tmdb_enabled: false, musicbrainz_enabled: false, + video_directories: [], music_directories: ['musique'], 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: ['musique'], + roots: [{ name: 'musique', available: true, writable: false, + removable: false }] }; + }, + async fetchChatHistory() { return { messages: [], hasMore: false }; }, + async fetchLinkPreview() { return { ok: false }; }, + close() {}, + }; + 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, useState, useCallback } from '/vendor/htm-preact.js'; +import { initLocale } from '/i18n.js'; +import { GroupPage } from '/group-page.js'; +import { MusicPlayerBar } from '/music-player.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 waitFor = async (sel, tries = 60) => { + for (let i = 0; i < tries; i++) { + const el = document.querySelector(sel); + if (el) return el; + await sleep(50); + } + return null; +}; + +// The shell's two jobs, and only those: hold the queue, and pass `op` through. +// app.js does more (a transport fast path, the stop button); the contract this +// exercises is the shape of what it hands the player. +function Harness() { + const [queue, setQueue] = useState(null); + const onPlayQueue = useCallback((tracks, startIndex, source, op) => { + setQueue({ tracks, startIndex, nonce: Date.now(), op: op || 'replace' }); + }, []); + return html` + <${GroupPage} groupId="g1" token="t" username="me" userId="u1" + group=${{ id: 'g1', name: 'un groupe', owner_username: 'me', is_admin: false }} + userPrefs=${{ default_tab: 'music', media_page_size: '50' }} + onPlayQueue=${onPlayQueue} /> + ${queue && html`<${MusicPlayerBar} getConnection=${() => new Promise(() => {})} + queue=${queue} userPrefs=${{}} onClose=${() => setQueue(null)} />`} + `; +} + +const steps = []; + +// The queue as a person sees it: the player's own panel, opened and closed. +async function queueNow(label, extra) { + const open = document.querySelector('.music-player-extra .music-player-btn'); + if (!open) { steps.push({ step: label, bar: false, ...extra }); return; } + open.click(); + const panel = await waitFor('.music-detail .music-tracklist'); + const rows = [...document.querySelectorAll('.music-detail .music-tracklist .music-track-row')]; + steps.push({ + step: label, + bar: true, + play: rows.map((r) => r.querySelector('.music-track-title').textContent), + playing: (rows.findIndex((r) => r.classList.contains('active'))), + nowPlaying: (document.querySelector('.music-player-title') || {}).textContent || null, + ...extra, + }); + const close = document.querySelector('.music-detail .video-close'); + if (close) close.click(); + await sleep(120); +} + +const rightClick = (el) => el.dispatchEvent(new MouseEvent('contextmenu', { + bubbles: true, cancelable: true, clientX: 200, clientY: 200 })); + +const menuLabels = () => [...document.querySelectorAll('.ctx-menu .ctx-menu-item')] + .map((b) => b.querySelector('.ctx-menu-label').textContent); + +const clickMenu = async (i) => { + const items = [...document.querySelectorAll('.ctx-menu .ctx-menu-item')]; + items[i].click(); + await sleep(200); +}; + +(async () => { + const fail = (why) => parent.postMessage( + { error: why, logs: LOGS.slice(0, 12), + text: (document.getElementById('root').textContent || '').slice(0, 400) }, '*'); + try { + await initLocale(); + render(html`<${Harness} />`, document.getElementById('root')); + + if (!await waitFor('.music-card')) return fail('no album grid'); + const cards = [...document.querySelectorAll('.music-card')]; + if (cards.length < 4) return fail('expected 4 albums, got ' + cards.length); + + // 1. Open album 1 and play its second track — the ordinary path, through a + // row that is no longer one big button. + cards[0].click(); + if (!await waitFor('.music-detail .music-tracklist')) return fail('no detail modal'); + const rows = [...document.querySelectorAll('.music-detail .music-tracklist .music-track-main')]; + if (rows.length !== 3) return fail('album 1 has ' + rows.length + ' rows'); + rows[1].click(); + await sleep(250); + await queueNow('play a track'); + + // 2. Right-click album 2 → "add to queue". + rightClick(document.querySelectorAll('.music-card')[1]); + await sleep(150); + if (!document.querySelector('.ctx-menu')) return fail('right-click opened no menu'); + const labels = menuLabels(); + await clickMenu(2); + await queueNow('append album 2', { menu: labels }); + + // 3. Dots on album 3 → "play next". The other affordance, and the verb + // that has to land at pos + 1 rather than at the end. + const dots = document.querySelectorAll('.music-card .ctx-dots'); + if (dots.length < 3) return fail('only ' + dots.length + ' dots buttons'); + dots[2].click(); + await sleep(150); + if (!document.querySelector('.ctx-menu')) return fail('dots opened no menu'); + await clickMenu(1); + await queueNow('play next album 3'); + + // 4. Shuffle on and off again: the playing track must not change, and the + // queue must still hold everything appended to it. + document.querySelector('.music-player-transport .music-player-btn').click(); + await sleep(200); + await queueNow('shuffle on'); + document.querySelector('.music-player-transport .music-player-btn').click(); + await sleep(200); + await queueNow('shuffle off'); + + // 5. Replace: playing an album outright discards everything above. + document.querySelectorAll('.music-card')[3].click(); + if (!await waitFor('.music-detail .music-detail-meta .admin-btn')) return fail('no play-all'); + document.querySelector('.music-detail .music-detail-meta .admin-btn').click(); + await sleep(250); + await queueNow('replace with album 4'); + + parent.postMessage({ steps, 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") + 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) + for _ in range(400): + 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()) |