diff options
Diffstat (limited to 'packages/meshbay-hub/tests/test_node_page_width_measured.py')
| -rw-r--r-- | packages/meshbay-hub/tests/test_node_page_width_measured.py | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/packages/meshbay-hub/tests/test_node_page_width_measured.py b/packages/meshbay-hub/tests/test_node_page_width_measured.py index ebf07ab..bd6a231 100644 --- a/packages/meshbay-hub/tests/test_node_page_width_measured.py +++ b/packages/meshbay-hub/tests/test_node_page_width_measured.py @@ -41,6 +41,29 @@ AUDIT_ROWS = [ ] +# A real Ed25519 public key as the node reports it: 32 bytes of base64, 44 +# characters with not one break opportunity among them. Shortening it here +# would measure the fixture instead of the page -- the exact mistake that let +# a folder name and then a translated column head push this page sideways. +NODE_KEY = "kP3vQ8mZ2rT7xN1bY6wL4hJ9cF5dS0aG8eR2uI7oK4M=" + + +def _overview_table(): + rows = [ + ("Version", "0.14.0"), + ("Node ID", "203.0.113.7:0"), + ("Node key", f'<code class="node-key">{NODE_KEY}</code>' + '<button class="btn btn-small btn-secondary">Copy</button>'), + ("QUIC port", "0"), + ("Hub", "https://example.invalid"), + ] + body = "".join(f"<tr><td>{k}</td><td>{v}</td></tr>" for k, v in rows) + return f""" + <table class="node-table node-table-overview"> + <tbody>{body}</tbody> + </table>""" + + def _audit_table(): head = "".join(f"<th>{c}</th>" for c in ("Time", "Event", "User", "IP", "Group", "Detail")) @@ -65,6 +88,10 @@ FRAGMENT = textwrap.dedent(f""" <div id="node" class="page-content node-page"> <h2>Node</h2> <div class="node-group"> + <h3 class="settings-heading">Overview</h3> + {_overview_table()} + </div> + <div class="node-group"> <h3 class="settings-heading">Audit</h3> {_audit_table()} </div> @@ -87,6 +114,7 @@ FRAGMENT = textwrap.dedent(f""" WIDTHS = [320, 360, 412, 768, 1024] SELECTORS = ["#node.node-page", "#settings", "#node .node-table-scroll", "#node .node-table-audit", "#node .node-group", + "#node .node-table-overview", "#node .node-key", "#settings .settings-section"] @@ -172,3 +200,29 @@ def test_the_audit_table_still_scrolls_itself_on_a_phone(measured, width): page = _box(measured, width, "#node.node-page") assert page["offRight"] == 0, ( f"{page['offRight']} px of the Node page is off a {width} px screen") + + +@pytest.mark.parametrize("width", [320, 360, 412]) +def test_the_node_key_does_not_widen_the_page_on_a_phone(measured, width): + """The Overview table has no scroller of its own. + + `.node-table-audit` may overflow because `.node-table-scroll` contains it. + Overview is a bare `.node-table` in a `.node-group`, so a cell that refuses + to wrap sets the column's minimum width and pushes the document itself + wider than the screen -- which detaches every `position: sticky` element on + the page from a viewport the reader can no longer see, the navigation bar + included. `.node-key` carries `word-break: break-all` for that reason; + remove it and this fails. + """ + r = measured[str(width)] + assert r["docScrollW"] <= r["viewport"]["w"], ( + f"the document scrolls to {r['docScrollW']} px on a {width} px screen " + "— the node key is pushing the page wider instead of wrapping") + table = _box(measured, width, "#node .node-table-overview") + card = _box(measured, width, "#node .node-group") + assert table["width"] <= card["width"], ( + f"at {width} px the Overview table is {table['width']} px inside a " + f"{card['width']} px card — the key is driving the column") + key = _box(measured, width, "#node .node-key") + assert key["offRight"] == 0, ( + f"{key['offRight']} px of the node key is off a {width} px screen") |