diff options
Diffstat (limited to 'packages/meshbay-hub/tests')
| -rwxr-xr-x | packages/meshbay-hub/tests/harness/sticky_header_probe.py | 563 | ||||
| -rw-r--r-- | packages/meshbay-hub/tests/test_desktop_shell.py | 13 | ||||
| -rw-r--r-- | packages/meshbay-hub/tests/test_hook_ordering.py | 4 | ||||
| -rw-r--r-- | packages/meshbay-hub/tests/test_page_does_not_scroll.py | 7 | ||||
| -rw-r--r-- | packages/meshbay-hub/tests/test_sticky_header.py | 297 |
5 files changed, 881 insertions, 3 deletions
diff --git a/packages/meshbay-hub/tests/harness/sticky_header_probe.py b/packages/meshbay-hub/tests/harness/sticky_header_probe.py new file mode 100755 index 0000000..9e9dc3c --- /dev/null +++ b/packages/meshbay-hub/tests/harness/sticky_header_probe.py @@ -0,0 +1,563 @@ +#!/usr/bin/env python3 +""" +Does the header stay put? + +Files, Videos, Music and Photos pin three bands under the navigation bar — the +tab bar (the search field, on the Search page), the application's toolbar, and +the file table's column heads — so that scrolling a library never costs the +controls that steer it. Two of those offsets are `calc()` over a height +measured at runtime (sticky.js), which means the arrangement can be wrong in +ways no stylesheet reading finds: a band an inch too low leaves a stripe of +list showing through above it, a band too high hides the one over it, and a +toolbar that wraps to three rows on a phone moves the column heads by 96px +that nothing in the CSS knows about. + +So this scrolls. It renders the shipped `GroupPage` and `SearchPage` against a +stub node, walks to each application, scrolls the window down, and reports the +rectangle of every band before and after — at a desktop width and at a phone +width, where the toolbars wrap and the measurement earns its keep. + + sticky_header_probe.py + +Prints JSON: one object per case, each with `before` and `after` maps of +selector -> {top, bottom, height} in viewport coordinates, plus what the +window did. + +Chrome by default; `--engine firefox` runs the same cases in Firefox, which is +half of MeshBay's readers and has its own history with `position: sticky`. +""" +import argparse +import http.server +import json +import os +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 +# Set when every case has reported. Firefox needs it: it has no +# "navigate and stay open" headless mode that runs a page to completion, only +# `--screenshot`, which fires at the load event and exits. So each frame holds +# one image open, the load event waits for that image, and the image is +# answered here once the run is done. Chrome does not need it and does not get +# it. +FINISHED = threading.Event() + +# 1100 desktop; 420 is where the phone media query has been tuned; 390 is an +# actual handset, and the width the first report of a band not pinning at all +# came from; 360 is the small end of what is still sold, and it is where the +# settings table's two switches and its two buttons have the least room. +WIDTHS = [1100, 420, 390, 360] + +# The tab bar's buttons are the enabled apps in registry order, so Files is 1, +# Videos 2, Music 3, Photos 4 (Chat is 0, Settings last). The Search page's +# view toggle is files/videos/music/photos in that order. +GROUP_CASES = [ + ("group files", {"page": "group", "click": [".group-tabs .group-tab:nth-of-type(2)"], + "ready": ".file-toolbar", + "bands": [".group-tabs", ".file-toolbar", ".file-table th"], + "content": ".file-row"}), + # Inside a root, where the rows are the library's own folders. The report + # that started this came from there, not from the top level. + ("group files in a folder", {"page": "group", + # The second row, which is the music root: + # the first is `films`, whose folders are + # short and prove nothing. + "click": [".group-tabs .group-tab:nth-of-type(2)", + ".file-table tbody tr:nth-of-type(2)"], + "ready": ".file-toolbar", + "bands": [".group-tabs", ".file-toolbar", + ".file-table th"], + "content": ".file-row"}), + ("group videos", {"page": "group", "click": [".group-tabs .group-tab:nth-of-type(3)"], + "ready": ".video-toolbar", + "bands": [".group-tabs", ".video-toolbar"], + "content": ".video-tile-slot"}), + ("group music", {"page": "group", "click": [".group-tabs .group-tab:nth-of-type(4)"], + "ready": ".video-toolbar", + "bands": [".group-tabs", ".video-toolbar"], + "content": ".music-tile-slot"}), + ("group photos", {"page": "group", "click": [".group-tabs .group-tab:nth-of-type(5)"], + "ready": ".photo-toolbar", + "bands": [".group-tabs", ".photo-toolbar"], + "content": ".photo-album-tile-slot"}), + # An open album swaps the toolbar for its own title bar, which pins in the + # same place — the one band that is not a toolbar. + # The group's own Settings, as its operator sees it: the shared-directories + # table is four columns of controls, none of which can be squeezed, and it + # was the next thing to hang off the right of a phone. + ("group settings", {"page": "group", + "click": [".group-tabs .group-tab:nth-of-type(6)"], + "ready": ".shared-dirs-tbl", + "bands": [".group-tabs"], + "content": ".shared-dirs-tbl tbody tr"}), + ("group photo album", {"page": "group", + "click": [".group-tabs .group-tab:nth-of-type(5)", + ".photo-album-card"], + "ready": ".photo-album-bar", + "bands": [".group-tabs", ".photo-album-bar"], + "content": ".photo-tile-slot"}), + # Search's Files view opens on the list of groups, one folder per group — + # the rows are inside it. + ("search files", {"page": "search", "click": [".view-toggle button:nth-of-type(1)", + ".file-row.dir-row"], + "ready": ".file-toolbar", + "bands": [".search-bar", ".file-toolbar", ".file-table th"], + "content": ".file-row"}), + ("search videos", {"page": "search", "click": [".view-toggle button:nth-of-type(2)"], + "ready": ".video-toolbar", + "bands": [".search-bar", ".video-toolbar"], + "content": ".video-tile-slot"}), + ("search music", {"page": "search", "click": [".view-toggle button:nth-of-type(3)"], + "ready": ".video-toolbar", + "bands": [".search-bar", ".video-toolbar"], + "content": ".music-tile-slot"}), + # Photos on the Search page has no toolbar of its own: its only control is + # the filter, and the search field above it already is one. + ("search photos", {"page": "search", "click": [".view-toggle button:nth-of-type(4)"], + "ready": ".photo-album-grid", + "bands": [".search-bar"], + "content": ".photo-album-tile-slot"}), +] + +CASES = [(f"{name} @{w}", dict(spec, width=w, label=name)) + for w in WIDTHS for name, spec in GROUP_CASES] + +# The shell around the page under test: the real navigation bar (which is what +# every band pins beneath), the real sidebar, the real main column. Measuring a +# page mounted on a bare body would put every band at the top of the window and +# prove nothing about the offset. +SHELL = """ +<nav class="nav"> + <div class="nav-left"><button class="nav-hamburger">☰</button> + <a class="nav-brand" href="#/">MeshBay</a></div> + <div class="nav-right"><a class="nav-notif" href="#/">🔔</a> + <div class="user-menu"><button class="nav-btn">someone</button></div></div> +</nav> +<div class="layout"> + <aside class="sidebar"><div class="sidebar-section">Groups</div></aside> + <main class="main"><div id="root"></div></main> +</div> +""" + +# Substituted by name, not by `%`-formatting: this template is JavaScript, +# and JavaScript has a modulo operator. `i % ARTISTS.length` in the fixture +# below made the whole page fail to render with "not enough arguments for +# format string", from inside a request handler, which reads as the probe +# measuring nothing rather than as a typo. +FRAME = r"""<!doctype html><html><head><meta charset=utf-8> +<link rel="stylesheet" href="/style.css"></head><body> +<!--SHELL--> +<script> +const CFG = /*CFG*/; + +// An index big enough that every view scrolls: loose files for Files, a films +// root, an album tree for Music, and forty photo albums. +// +// The names are the length real ones are, and that is not decoration. The +// first version of this fixture used `note-007.txt` and one group called +// `un groupe`, which fits any screen — so it measured a table that never +// overflowed, and missed the fault that was actually reported from a phone. +// A fixture narrower than the real thing tests the fixture. +// Underscores on purpose. A name with no space in it is one unbreakable word, +// and a table column is sized from what its content cannot be narrower than — +// which is the whole point of the case reported from a phone. +const ARTISTS = ['Augustus Pablo', 'Babylon Circus', 'Ben Harper', + 'Beruriers Noirs', 'Billy Ze Kick', 'Black Sabbath', + 'Chemical Brothers', 'Dire Straits', 'Dj_Shadow', + 'Massive Attack', 'Noir Desir', 'Rage Against The Machine', + 'Rage_Against_The_Machine_Discography_1992-2000_FLAC']; +const ENTRIES = []; +let n = 0; +const add = (o) => ENTRIES.push(Object.assign( + { id: 'e' + (++n), size: 1024 * 1024 * n, added_at: 1750000000 + n }, o)); +for (let i = 0; i < 60; i++) + add({ name: `${ARTISTS[i % ARTISTS.length]} - ${String(i + 1).padStart(2, '0')} ` + + `Un titre de morceau plutot long.flac`, path: '', type: 'document' }); +for (let i = 0; i < 40; i++) + add({ name: `${ARTISTS[i % ARTISTS.length]} au Zenith (2019) 1080p.mkv`, + path: 'films', type: 'video', + display_title: `${ARTISTS[i % ARTISTS.length]} au Zenith` }); +for (let a = 0; a < 20; a++) + for (let t = 0; t < 2; t++) + add({ name: `${t + 1} track.flac`, + path: `musique/${ARTISTS[a % ARTISTS.length]} ${a}/disque ${t}`, + type: 'audio', artist: `Artiste ${a}`, album: `Disque ${a}-${t}`, + track_no: t + 1, duration: 200 }); +for (let d = 0; d < 40; d++) + // The first album is deep enough to scroll on its own: an open album is a + // case of its own, and one that fits the window proves nothing. + for (let i = 0; i < (d === 0 ? 80 : 6); i++) + add({ name: `img-${String(i).padStart(3, '0')}.jpg`, + path: `photos/sortie ${String(d).padStart(2, '0')}`, type: 'image' }); + +const ACK = { + is_node_admin: true, member_upload: true, + enabled_apps: ['chat', 'files', 'video', 'music', 'photo'], + tmdb_enabled: false, musicbrainz_enabled: false, + video_directories: ['films'], music_directories: ['musique'], + photo_directories: ['photos'], +}; + +// The node, as far as the page is concerned. Anything reached for beyond the +// handful of calls below answers with a promise that never settles: a thumb +// or a metadata lookup left pending shows a spinner, and a spinner occupies +// exactly the tile the grid already reserved — which is all the bands need. +window.MeshBayTransport = function () { + const self = { + // The operator of this node: it is their own library, and it is what puts + // the eject/remove pair in the settings table and the fifth button in the + // Files toolbar. + connected: false, memberRole: 'operator', supportsAppOps: true, + // Every property the page *reads* rather than calls has to be declared: + // the fallback below answers with a function, and a function is truthy, so + // an undeclared `newNodeBundle` sends the page off to store a key bundle + // that never comes back — it waits there for ever, on "Connecting". + sessionKeys: null, gekRaw: null, + newNodeBundle: null, newNodeBundleRecovery: null, + async connect() { self.connected = true; return ACK; }, + async fetchIndex() { + return { entries: ENTRIES, dirs: ['films', 'musique', 'photos'], + roots: [{ name: 'films', available: true, writable: false, + removable: true }, + { name: 'musique', available: true, writable: true, + removable: true }, + { name: 'photos', 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]; + // A handler slot the page reads before assigning must stay empty, or the + // page calls this stub as though the node had spoken. + 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'; +import { SearchPage } from '/search-page.js'; + +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + +// A page that never reaches "connected" says why in the console and nowhere +// else; without this a failure reads only as "the toolbar never appeared". +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))); +for (const level of ['error', 'warn']) { + const orig = console[level].bind(console); + console[level] = (...a) => { LOGS.push(level + ': ' + a.map(String).join(' ')); orig(...a); }; +} + +async function waitFor(sel, ms = 15000) { + const until = Date.now() + ms; + for (;;) { + const el = document.querySelector(sel); + if (el) return el; + if (Date.now() > until) return null; + await sleep(50); + } +} + +const box = (sel) => { + const el = document.querySelector(sel); + if (!el) return null; + const r = el.getBoundingClientRect(); + return { top: Math.round(r.top), bottom: Math.round(r.bottom), + height: Math.round(r.height), + // The gap the band keeps below it, in the flow and once pinned. + gap: Math.round(parseFloat(getComputedStyle(el).marginBottom) || 0) }; +}; + +const snapshot = () => { + const out = {}; + for (const sel of ['.nav', ...CFG.bands, CFG.content]) out[sel] = box(sel); + return out; +}; + +// How far past the window the document reaches sideways. On Android a page +// wider than the screen takes everything pinned out of the visible area with +// it — the header is still stuck to the top of a viewport the reader can no +// longer see — so this is measured on every case, not only the ones with a +// table. +const overflowX = () => Math.round( + document.documentElement.scrollWidth - document.documentElement.clientWidth); + +// Two frames: one for the scroll to be applied, one for the sticky bands to be +// laid out against it. +const settle = () => new Promise((r) => + requestAnimationFrame(() => requestAnimationFrame(r))); + +(async () => { + const fail = (why) => parent.postMessage( + { case: CFG.index, error: why, logs: LOGS.slice(0, 12), + text: (document.getElementById('root').textContent || '').slice(0, 300) }, + '*'); + try { + await initLocale(); + if (CFG.page === 'group') { + render(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: 'files' }} />`, + document.getElementById('root')); + } else { + render(html`<${SearchPage} token="t" username="me" userId="u1" + ${/* Underscores, like the folder names: the group's name is a whole + column of its own in Search, in a cell with no wrapping rule, + and a hyphen is a break opportunity while an underscore is + not. */''} + groups=${[{ id: 'g1', name: 'musique_de_la_maison_2024', + owner_username: 'cbesson' }]} + userPrefs=${{}} />`, document.getElementById('root')); + // Results only exist once an index has arrived; the view toggle is drawn + // with them. + const field = await waitFor('.search-bar input'); + if (!field) return fail('no search field'); + if (!await waitFor('.view-toggle')) return fail('no results to view'); + } + + // Whether the search field *asks* for focus, not whether it holds it: + // every case is an iframe of one page and only one document in a page can + // have an active element, so real focus is a property of the harness here + // rather than of the page under test. + const searchInput = document.querySelector('.search-bar input'); + const autofocusAsked = !!(searchInput && searchInput.autofocus); + + for (const sel of CFG.click) { + const el = await waitFor(sel); + if (!el) return fail('nothing at ' + sel); + el.click(); + await sleep(120); + } + if (!await waitFor(CFG.ready)) return fail('never drew ' + CFG.ready); + if (!await waitFor(CFG.content)) return fail('never drew ' + CFG.content); + await settle(); + + const before = snapshot(); + const room = document.documentElement.scrollHeight - innerHeight; + scrollTo(0, Math.min(500, Math.max(0, room))); + await settle(); + await sleep(150); + await settle(); + const after = snapshot(); + const scrolledBy = Math.round(scrollY); + + // All the way down. A sticky element only sticks inside its own parent, so + // a band whose containing block ends before the page does comes unstuck + // partway — which a single 500px scroll never reaches. + scrollTo(0, Math.max(0, room)); + await settle(); + await sleep(150); + await settle(); + const bottom = snapshot(); + + parent.postMessage({ + case: CFG.index, before, after, bottom, + bottomScrollY: Math.round(scrollY), + scrollY: scrolledBy, room: Math.round(room), + overflowX: overflowX(), + // Whether the Search page's group column is on screen. It is dropped at + // phone widths, where the file name needs every pixel it can get. + groupColumn: (() => { + const el = document.querySelector('.file-table th.td-group'); + if (!el) return 'absent'; + return getComputedStyle(el).display === 'none' ? 'hidden' : 'shown'; + })(), + // What is actually too wide, when something is. + widest: (() => { + const limit = document.documentElement.clientWidth; + return [...document.querySelectorAll('.main *')] + .filter((el) => el.getBoundingClientRect().right > limit + 1) + .slice(0, 6) + .map((el) => (el.tagName.toLowerCase() + '.' + (el.className || '')) + .slice(0, 60) + ' →' + + Math.round(el.getBoundingClientRect().right)); + })(), + innerHeight, innerWidth, + // What the stylesheet was actually handed, so a wrong offset can be told + // from an unmeasured one. + // The Search field focuses itself on a pointer device and must go on + // doing so — it stopped only for touch, where the keyboard it raises + // takes the pinned header out of the visible viewport. + autofocusAsked, + chromeH: getComputedStyle(document.querySelector('.sticky-chrome')) + .getPropertyValue('--chrome-h').trim(), + toolbarH: getComputedStyle(document.querySelector('.sticky-chrome')) + .getPropertyValue('--toolbar-h').trim(), + }, '*'); + } catch (err) { + fail(String(err && err.stack || err)); + } +})(); +</script></body></html>""" + +# Appended to every frame when the engine needs the load event held back. +HOLD = "" +HOLD_TAG = '<img src="/hold" style="position:fixed;left:-4px;top:-4px;width:1px">' + +PAGE = r"""<!doctype html><html><head><meta charset=utf-8></head> +<body style="margin:0"><div id="frames"></div><script> +const CASES = /*CASES*/; +const seen = []; +addEventListener('message', (e) => { + seen.push(e.data); + if (seen.length === CASES.length) { + fetch('/log', { method: 'POST', body: JSON.stringify(seen) }); + } +}); +for (let i = 0; i < CASES.length; i++) { + const f = document.createElement('iframe'); + f.src = '/case?n=' + i; + f.style.cssText = + `width:${CASES[i]}px;height:760px;border:0;display:block;margin-bottom:4px`; + document.getElementById('frames').appendChild(f); +} +</script></body></html>""" + + +def render_frame(index: int) -> str: + """One case's page: the shell around it and its own configuration.""" + cfg = dict(CASES[index][1], index=index) + return (FRAME.replace("<!--SHELL-->", SHELL) + .replace("/*CFG*/", json.dumps(cfg)) + HOLD) + + +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())) + FINISHED.set() + 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 == "/hold": + FINISHED.wait(120) + self._send(b"", "image/gif") + elif path == "/": + widths = [spec["width"] for _, spec in CASES] + self._send(PAGE.replace("/*CASES*/", json.dumps(widths)).encode(), + "text/html; charset=utf-8") + elif path == "/case": + index = int(self.path.split("n=")[1]) + self._send(render_frame(index).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") + + +# Each engine gets the same page and reports through the same `/log` POST, so +# nothing here depends on a debugging protocol only one of them speaks. +ENGINES = { + "chrome": lambda profile, size: [ + "google-chrome", "--headless=new", "--disable-gpu", "--no-sandbox", + f"--user-data-dir={profile}", f"--window-size={size}"], + # Firefox has no headless mode that simply opens a page and waits, so it + # is driven through `--screenshot`: the picture is thrown away, the point + # is that the page runs and the load event is what ends the process. + # + # And it is isolated with `HOME`, not `--profile`: given `--profile` on a + # directory it has not initialised itself, this Firefox starts, prints its + # headless banner, and then never requests the URL at all — no error, no + # page, nothing to debug. Pointing HOME at a throwaway directory lets it + # create its own default profile there, which works and leaves the + # developer's real one alone. + "firefox": lambda profile, size: [ + "firefox", "--headless", + "--screenshot", str(Path(profile) / "shot.png"), + "--window-size", size], +} +# The environment each engine is launched with, on top of the current one. +ENGINE_ENV = {"firefox": lambda profile: {"HOME": profile}} +# Which engines need the load event held until the measurement is in. +HOLDS_LOAD = {"firefox"} + + +def main() -> int: + ap = argparse.ArgumentParser() + ap.add_argument("--engine", choices=sorted(ENGINES), default="chrome") + args = ap.parse_args() + launcher = ENGINES[args.engine] + global HOLD + HOLD = HOLD_TAG if args.engine in HOLDS_LOAD else "" + + with socketserver.ThreadingTCPServer(("127.0.0.1", PORT), H) as srv: + threading.Thread(target=srv.serve_forever, daemon=True).start() + # ignore_cleanup_errors for the same reason group_tab_probe.py gives: + # Chrome's children outlive terminate() by a moment and go on writing + # into the profile, and a throwaway profile is not worth a failed run. + with tempfile.TemporaryDirectory(ignore_cleanup_errors=True) as profile: + env = dict(os.environ, + **ENGINE_ENV.get(args.engine, lambda _p: {})(profile)) + proc = subprocess.Popen( + launcher(profile, "1200,900") + [f"http://127.0.0.1:{PORT}/"], + env=env, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL) + for _ in range(900): + 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 + by_case = {r["case"]: r for r in RECORDS[0]} + print(json.dumps( + [dict(name=CASES[i][0], engine=args.engine, width=CASES[i][1]["width"], + view=CASES[i][1]["label"], page=CASES[i][1]["page"], + bands=CASES[i][1]["bands"], content=CASES[i][1]["content"], + **by_case[i]) + for i in sorted(by_case)], indent=1)) + return 0 + + +if __name__ == "__main__": + raise SystemExit(main()) diff --git a/packages/meshbay-hub/tests/test_desktop_shell.py b/packages/meshbay-hub/tests/test_desktop_shell.py index 039ea2f..2e7ea82 100644 --- a/packages/meshbay-hub/tests/test_desktop_shell.py +++ b/packages/meshbay-hub/tests/test_desktop_shell.py @@ -154,8 +154,17 @@ def test_the_policy_is_sent_as_a_header(): """ source = _main() assert "'Content-Security-Policy': CSP" in source - assert "Content-Security-Policy" not in INDEX.read_text(encoding="utf-8") \ - .split("-->")[1], "the packaged page still carries a policy of its own" + # Comments stripped, all of them, rather than skipping past the first + # `-->`. The page's only mention of a policy is the comment explaining why + # it is not here, so the check has to see the markup with every comment + # gone — the earlier version took `split("-->")[1]`, which meant adding a + # second comment anywhere above made it read that comment's own text and + # fail on correct markup. A guard that depends on how many comments precede + # it is not guarding the thing it names. + markup = re.sub(r"<!--.*?-->", "", INDEX.read_text(encoding="utf-8"), + flags=re.S) + assert "Content-Security-Policy" not in markup, \ + "the packaged page still carries a policy of its own" def test_the_policy_keeps_wasm_unsafe_eval(): diff --git a/packages/meshbay-hub/tests/test_hook_ordering.py b/packages/meshbay-hub/tests/test_hook_ordering.py index 01516bd..3e9c968 100644 --- a/packages/meshbay-hub/tests/test_hook_ordering.py +++ b/packages/meshbay-hub/tests/test_hook_ordering.py @@ -45,6 +45,10 @@ STATIC_FILES = [ "music-app-settings.js", "photos-app-settings.js", "helloworld-app.js", "helloworld-app-settings.js", "auth-page.js", "explore-page.js", "create-group-page.js", + # The Search page was missing from this list while being the densest + # `useMemo` chain in the tree — a dozen derived lists, each depending on + # the one above it, which is precisely the shape this checks. + "search-page.js", ] pytestmark = pytest.mark.skipif(not APP.exists(), reason="SPA sources unavailable") diff --git a/packages/meshbay-hub/tests/test_page_does_not_scroll.py b/packages/meshbay-hub/tests/test_page_does_not_scroll.py index 1187a7a..9f983af 100644 --- a/packages/meshbay-hub/tests/test_page_does_not_scroll.py +++ b/packages/meshbay-hub/tests/test_page_does_not_scroll.py @@ -13,12 +13,15 @@ Neither is visible in the stylesheet. Both are one subtraction against another, in different files, and the only way to see them is to measure the document against the window — which is what this does, running the real `fit()` lifted out of `app.js` rather than a copy of it. + +The group fragment carries `.sticky-chrome`, as `group-page.js` does: the tab +bar is `position: sticky` inside it, and a sticky element that is measured +without the class it pins under is measured in its old, ordinary flow. """ import json import shutil import subprocess -import textwrap from pathlib import Path import pytest @@ -45,6 +48,7 @@ CHAT_TAB = NAV_AND_SIDEBAR + """ <div class="layout"> <aside class="sidebar"><div class="sidebar-section">Groups</div></aside> <main class="main"> + <div class="sticky-chrome"> <div class="group-header"><h2>a group</h2></div> <div class="group-tabs"> <button class="group-tab active">Chat</button> @@ -55,6 +59,7 @@ CHAT_TAB = NAV_AND_SIDEBAR + """ <div class="chat-messages"><p>hello</p></div> <div class="chat-composer"><input type="text" /><button class="admin-btn">Send</button></div> </div> + </div> </main> </div> """ diff --git a/packages/meshbay-hub/tests/test_sticky_header.py b/packages/meshbay-hub/tests/test_sticky_header.py new file mode 100644 index 0000000..32b8124 --- /dev/null +++ b/packages/meshbay-hub/tests/test_sticky_header.py @@ -0,0 +1,297 @@ +""" +Scrolling a library does not cost you the controls that steer it. + +Files, Videos, Music and Photos are read by scrolling, and everything that says +*what* is being read — which application, where in the tree, which filter, +which column sorts — used to leave with the first screenful. Those controls pin +under the navigation bar now, in three bands: the group's tab bar (the search +field, on the Search page), the application's own toolbar, and the file table's +column heads. + +Two of the three offsets are `calc()` over a height nothing declares: the +toolbar wraps to three rows at a phone width, grows a field while a folder is +being named, and loses its filter on the Search page, so sticky.js measures it +and publishes `--chrome-h` / `--toolbar-h`. That is exactly the arrangement +CLAUDE.md has been bitten by twice — two subtractions in different files, each +correct on its own, the page a few pixels wrong at every window size and +nothing in either file to show it. A number in a stylesheet cannot be read to +find that out. So this scrolls the shipped pages in a real browser and measures +the rectangles: every band pinned, edge to edge, nothing overlapping, nothing +showing between. + +Three widths, for three different reasons. At 1100 the toolbar is one row; at +420 it is three, and a stack that only ever adds up on a desktop is the whole +class of fault this is written against; 390 is an actual handset. And both +engines: Firefox is half of MeshBay's readers, `position: sticky` is exactly +the kind of thing engines disagree about, and the first report that a band did +not pin at all came from a phone. +""" + +import json +import shutil +import subprocess +from pathlib import Path + +import pytest + +HARNESS = Path(__file__).parent / "harness" / "sticky_header_probe.py" +STATIC = Path(__file__).resolve().parents[1] / "src" / "meshbay_hub" / "static" + +pytestmark = pytest.mark.skipif( + shutil.which("google-chrome") is None or not (STATIC / "style.css").exists(), + reason="Chrome or the SPA stylesheet is not available") + +ENGINES = ["chrome"] + (["firefox"] if shutil.which("firefox") else []) + +# A rectangle read back from the browser is rounded, and a border can land +# either side of a half pixel. One pixel of slack, never more — the faults this +# exists for are tens of pixels. +SLACK = 1 + +# Eleven views (seven in a group, four on the Search page) at four widths. +EXPECTED_CASES = 44 + + +@pytest.fixture(scope="module", params=ENGINES) +def measured(request): + proc = subprocess.run(["python3", str(HARNESS), "--engine", request.param], + capture_output=True, text=True, timeout=900) + assert proc.returncode == 0, ( + f"probe failed in {request.param}: {proc.stdout}{proc.stderr}") + cases = json.loads(proc.stdout) + assert cases, f"the probe measured nothing in {request.param}" + return cases + + +def test_every_view_was_reached(measured): + """ + A case that never got to its application reports an error rather than an + empty measurement — and an empty measurement would satisfy every assertion + below by having nothing to assert on. + """ + broken = [f"{c.get('engine')} {c['name']}: {c['error']}" + f"\n console: {c.get('logs')}" + f"\n on screen: {c.get('text')}" + for c in measured if "error" in c] + assert not broken, "\n".join(broken) + assert len(measured) == EXPECTED_CASES, ( + f"expected {EXPECTED_CASES} measurements, got {len(measured)}") + + +def test_the_page_really_scrolled(measured): + """ + Everything below compares a scrolled page with an unscrolled one. A view + that fits its window compares it with itself and proves nothing — so this + fails the fixture, not the layout, before a silent pass can happen. + """ + flat = [c["name"] for c in measured if c["scrollY"] <= 0] + assert not flat, "nothing scrolled, so nothing was tested: " + ", ".join(flat) + + +def test_the_bands_stack_under_the_navigation_bar(measured): + """ + From the top: the navigation bar, then each band, each starting exactly one + gap below the one above it — the gap being the upper band's own + `margin-bottom`, which it keeps when it pins and paints as a ring. Land + short of it and two bands come into contact, which is what the first + version shipped and what was reported: two rounded panels flush against + each other in Files, and the row of controls glued to the tab bar in + Videos, Music and Photos. Land past it and a stripe of the list shows + through between them. + """ + faults = [] + for case in measured: + after = case["after"] + edge = after[".nav"]["bottom"] + for selector in case["bands"]: + band = after[selector] + if abs(band["top"] - edge) > SLACK: + faults.append( + f"{case['engine']} {case['name']}: {selector} pinned at " + f"y={band['top']}, expected y={edge}") + edge = band["bottom"] + band["gap"] + assert not faults, "\n".join(faults) + + +def test_a_band_keeps_the_gap_it_has_in_the_flow(measured): + """ + Pinning must not change the spacing. Measured against the same page before + it was scrolled: the distance from a band to the next one down is the same + whether it is pinned or sitting in the flow, so nothing shifts at the + moment it pins. + """ + faults = [] + for case in measured: + for upper, lower in zip(case["bands"], case["bands"][1:]): + flow = case["before"][lower]["top"] - case["before"][upper]["bottom"] + pinned = case["after"][lower]["top"] - case["after"][upper]["bottom"] + if abs(flow - pinned) > SLACK: + faults.append( + f"{case['engine']} {case['name']}: {upper} → {lower} is " + f"{flow}px apart in the flow and {pinned}px pinned") + assert not faults, "\n".join(faults) + + +def test_bands_stay_pinned_at_the_bottom_of_the_page(measured): + """ + A sticky element only sticks inside its own parent's box, so a band whose + containing block ends before the page does comes unstuck partway down — + invisible to any test that scrolls a fixed amount. Scrolled to the very + end, every band is still where it was. + """ + faults = [] + for case in measured: + for selector in case["bands"]: + if abs(case["bottom"][selector]["top"] + - case["after"][selector]["top"]) > SLACK: + faults.append( + f"{case['engine']} {case['name']}: {selector} is at " + f"y={case['after'][selector]['top']} partway down and " + f"y={case['bottom'][selector]['top']} at the end") + assert not faults, "\n".join(faults) + + +def test_each_band_stays_whole(measured): + """ + Pinned and *entire*: a band clipped by the navigation bar above it, or with + its own content spilling out of the rectangle it reserved, is not visible + just because its top edge is in the right place. + """ + faults = [] + for case in measured: + for selector in case["bands"]: + before, after = case["before"][selector], case["after"][selector] + if after["height"] <= 0: + faults.append(f"{case['name']}: {selector} has no height at all") + elif abs(after["height"] - before["height"]) > SLACK: + faults.append( + f"{case['name']}: {selector} is {after['height']}px pinned " + f"but {before['height']}px in the flow — pinning resized it") + if after["top"] < case["after"][".nav"]["bottom"] - SLACK: + faults.append( + f"{case['name']}: {selector} runs up behind the navigation bar") + assert not faults, "\n".join(faults) + + +def test_the_list_is_what_moves(measured): + """ + The bands hold still and the content goes past them — not the other way + round, and not everything holding still because the page never moved. The + content is checked to have travelled by the full scroll: a band that + dragged its list along with it would show up here as a short journey. + """ + faults = [] + for case in measured: + selector = case["content"] + before, after = case["before"][selector], case["after"][selector] + travelled = before["top"] - after["top"] + if abs(travelled - case["scrollY"]) > SLACK: + faults.append( + f"{case['name']}: {selector} moved {travelled}px while the window " + f"scrolled {case['scrollY']}px") + assert not faults, "\n".join(faults) + + +def test_the_offsets_come_from_the_measurement(measured): + """ + The published heights are the bands' own, not a number that happens to + agree at one width. This is the assertion that fails if sticky.js stops + observing — a stale `--toolbar-h` still stacks perfectly at the width it + was measured at, and only at that one. + """ + faults = [] + for case in measured: + bands = case["bands"] + upper = case["after"][bands[0]] + chrome = upper["height"] + upper["gap"] + if case["chromeH"] != f"{chrome}px": + faults.append(f"{case['engine']} {case['name']}: --chrome-h is " + f"{case['chromeH']!r}, {bands[0]} is {upper['height']}px " + f"tall over a {upper['gap']}px gap") + # Only Files pins anything below its toolbar, so only Files publishes + # a toolbar height; the others leave the property withdrawn. + if ".file-table th" in bands: + mid = case["after"][bands[1]] + toolbar = mid["height"] + mid["gap"] + if case["toolbarH"] != f"{toolbar}px": + faults.append(f"{case['engine']} {case['name']}: --toolbar-h is " + f"{case['toolbarH']!r}, {bands[1]} is " + f"{mid['height']}px tall over a {mid['gap']}px gap") + elif case["toolbarH"] not in ("", "0px"): + faults.append(f"{case['engine']} {case['name']}: --toolbar-h left " + f"behind as {case['toolbarH']!r} by a view with no table") + assert not faults, "\n".join(faults) + + +def test_no_view_scrolls_sideways(measured): + """ + Nothing here may be wider than the window. + + This is the fault that was reported from a phone, and it presented as the + sticky header not working at all — including the navigation bar, which had + been `position: sticky` since long before any of this. That is the tell: on + Android a document wider than the screen leaves everything pinned attached + to a viewport the reader can no longer see, so a header that is doing + exactly what it was told looks like a header that was never pinned. + + The cause was a table column, and the reason no measurement here found it + first is worth keeping: the fixture said `note-007.txt` and `un groupe`, + which fit any screen. A fixture narrower than real data tests the fixture. + It now carries the names a music library actually has, and walks into a + folder, which is where the rows are directories — and a directory's name + cell was the one that had no wrapping rule on it. + """ + faults = [] + for case in measured: + if case["overflowX"] > 0: + faults.append( + f"{case['engine']} {case['name']}: the page is " + f"{case['overflowX']}px wider than its window" + + (f" — widest: {'; '.join(case['widest'])}" if case["widest"] else "")) + assert not faults, "\n".join(faults) + + +def test_the_group_column_is_dropped_at_phone_widths(measured): + """ + Search's group column goes at phone widths, where there is no room for it + and the file name is what the screen is short of — the same treatment the + type and date columns already get. + + Nothing is lost with it, which is why it was the column to drop: the Search + page re-roots every result under a folder named after its group, so a + reader is always inside exactly one group and the breadcrumb above the + table names it. The column repeated that on every row. + + Both halves are asserted, and the wide half is the one that matters: a + column that stopped rendering altogether would satisfy "hidden on a phone" + perfectly. + """ + present = {c["name"]: (c["width"], c["groupColumn"]) for c in measured + if c["groupColumn"] != "absent"} + assert present, "no case rendered a group column at all" + wide = {n: g for n, (w, g) in present.items() if w > 768} + narrow = {n: g for n, (w, g) in present.items() if w <= 768} + assert wide and narrow, f"need both sides of the breakpoint, got {present}" + assert all(g == "shown" for g in wide.values()), ( + f"the group column is missing on a wide screen: {wide}") + assert all(g == "hidden" for g in narrow.values()), ( + f"the group column still takes room on a phone: {narrow}") + + +def test_the_toolbar_wraps_at_a_phone_width(measured): + """ + The reason the heights are measured rather than written down. If the + toolbar were the same height at 420 as at 1100, the whole mechanism would + be arithmetic nobody needs — and this test would be the one to say so + before the next reader replaces it with a constant. + """ + tall = {c["view"]: c["after"][".file-toolbar"]["height"] + for c in measured if c["width"] == 420 and ".file-toolbar" in c["bands"]} + wide = {c["view"]: c["after"][".file-toolbar"]["height"] + for c in measured if c["width"] == 1100 and ".file-toolbar" in c["bands"]} + assert tall and tall.keys() == wide.keys() + for view in tall: + assert tall[view] > wide[view], ( + f"{view}: the file toolbar is {tall[view]}px at 420 and " + f"{wide[view]}px at 1100 — it no longer wraps, and the column heads " + f"could pin against a constant") |