sjg
90ab7781ad
CI / lint (pull_request) Successful in 2m16s
CI / test (pull_request) Successful in 8m11s
CI / frontend (pull_request) Successful in 3m48s
CI / reuse (pull_request) Successful in 2s
CI / lint (push) Successful in 2m24s
CI / test (push) Successful in 7m23s
CI / frontend (push) Successful in 2m54s
CI / reuse (push) Successful in 3s
The tuned and centre frequency readouts are text inputs, so the browser keeps what has been typed into them and offers it back in a dropdown -- Edge does this out of the box, dropping stale frequencies from other sessions over the reading. Turn autofill off on both, along with autocorrect and spellcheck, which have no business near a number either. Fixes #39 Signed-off-by: Stan Grams <sjg@haxx.space>
395 lines
21 KiB
JavaScript
395 lines
21 KiB
JavaScript
// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
|
|
//
|
|
// SPDX-License-Identifier: GPL-2.0-or-later
|
|
|
|
import assert from "node:assert/strict";
|
|
import { chromium } from "playwright-core";
|
|
import { startBrowser, startWebFixture } from "./web-fixture.mjs";
|
|
|
|
// page.evaluate callbacks run in the browser, not in this Node process.
|
|
/* global document, getComputedStyle, window, location */
|
|
|
|
const fixture = await startWebFixture();
|
|
const { selectedRigs } = fixture;
|
|
const { browser, page, runtimeErrors } = await startBrowser(chromium);
|
|
|
|
try {
|
|
await page.goto(`${fixture.origin}/`, { waitUntil: "domcontentloaded" });
|
|
await page.waitForTimeout(500);
|
|
assert.deepEqual(runtimeErrors, []);
|
|
await page.locator("#content").waitFor({ state: "visible" });
|
|
assert.equal(await page.locator("#auth-gate").isVisible(), false);
|
|
assert.equal(await page.locator("#tab-main").isVisible(), true);
|
|
await page.locator("summary", { hasText: "Audio controls" }).click();
|
|
assert.equal(await page.locator("#rx-audio-btn").count(), 1);
|
|
|
|
// Digital modes: the decoders are a list down the side, and the panel for the
|
|
// selected one sits beside it. A horizontal strip put thirteen decoders in a
|
|
// scroller and marked the open one with a single underline among them.
|
|
await page.locator('.tab[data-tab="digital-modes"]').click();
|
|
await page.locator("#tab-digital-modes").waitFor({ state: "visible" });
|
|
await page.locator('.sub-tab[data-subtab="ft8"]').click();
|
|
await page.waitForTimeout(250);
|
|
const digital = await page.evaluate(() => {
|
|
const bar = document.querySelector("#tab-digital-modes > .sub-tab-bar").getBoundingClientRect();
|
|
const panel = document.getElementById("subtab-ft8").getBoundingClientRect();
|
|
const shown = [...document.querySelectorAll("#tab-digital-modes > .sub-tab-panel")]
|
|
.filter((element) => getComputedStyle(element).display !== "none")
|
|
.map((element) => element.id);
|
|
return {
|
|
sidebarIsColumn: bar.height > bar.width,
|
|
panelBesideSidebar: Math.round(panel.left) >= Math.round(bar.right),
|
|
panelsShown: shown,
|
|
decoders: document.querySelectorAll("#tab-digital-modes > .sub-tab-bar .sub-tab").length,
|
|
};
|
|
});
|
|
assert.ok(digital.sidebarIsColumn, "the decoder list is not a sidebar");
|
|
assert.ok(digital.panelBesideSidebar, "the decoder panel does not sit beside the sidebar");
|
|
assert.deepEqual(digital.panelsShown, ["subtab-ft8"], `panels shown: ${JSON.stringify(digital.panelsShown)}`);
|
|
assert.ok(digital.decoders >= 10, `only ${digital.decoders} decoders in the sidebar`);
|
|
|
|
// Each decoder's list fills its panel. FT8, FT4, FT2 and WSPR size against
|
|
// the panel with flex, so a panel sized to its own content collapsed them to
|
|
// their 120px minimum with the rest of the page left empty; the marine lists
|
|
// were sized by a viewport formula that stopped matching when the panel
|
|
// changed shape.
|
|
for (const [subtab, list] of [["ft8", "ft8-messages"], ["wspr", "wspr-messages"],
|
|
["ais", "ais-messages"], ["aprs", "aprs-packets"], ["hf-aprs", "hf-aprs-packets"]]) {
|
|
await page.locator(`.sub-tab[data-subtab="${subtab}"]`).click();
|
|
await page.waitForTimeout(150);
|
|
const filled = await page.evaluate((id) => {
|
|
const element = document.getElementById(id);
|
|
const panel = element.closest(".sub-tab-panel");
|
|
return {
|
|
list: Math.round(element.getBoundingClientRect().height),
|
|
panel: Math.round(panel.getBoundingClientRect().height),
|
|
scrolls: getComputedStyle(element).overflowY,
|
|
};
|
|
}, list);
|
|
assert.ok(filled.list > filled.panel * 0.6,
|
|
`${subtab}: the list is ${filled.list}px in a ${filled.panel}px panel`);
|
|
assert.equal(filled.scrolls, "auto", `${subtab}: the list does not scroll on its own`);
|
|
}
|
|
await page.locator('.tab[data-tab="main"]').click();
|
|
await page.waitForTimeout(200);
|
|
|
|
// Map links from decode rows, before anything has opened the Map tab. The
|
|
// lazy map module used to install these globals itself, so an AIS pin threw
|
|
// "not a function" and an APRS link silently did nothing until the tab had
|
|
// been visited once.
|
|
const mapLinkReady = await page.evaluate(() => ({
|
|
position: typeof window.navigateToAprsMap,
|
|
locator: typeof window.navigateToMapLocator,
|
|
mapModuleLoaded: !!window.trx.modules.map,
|
|
}));
|
|
assert.equal(mapLinkReady.position, "function", "navigateToAprsMap is missing before the map loads");
|
|
assert.equal(mapLinkReady.locator, "function", "navigateToMapLocator is missing before the map loads");
|
|
assert.equal(mapLinkReady.mapModuleLoaded, false, "the map module was already loaded, so this proves nothing");
|
|
|
|
await page.evaluate(() => { window.navigateToAprsMap(52.2, 21.0); });
|
|
await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
|
|
await page.waitForTimeout(500);
|
|
const followed = await page.evaluate(() => ({
|
|
path: location.pathname,
|
|
active: [...document.querySelectorAll(".tab-bar .tab.active")].map((tab) => tab.dataset.tab || tab.id),
|
|
mapHeight: Math.round(document.getElementById("aprs-map").getBoundingClientRect().height),
|
|
}));
|
|
assert.equal(followed.path, "/map", `the map link left the page on ${followed.path}`);
|
|
assert.ok(followed.active.includes("map"), `the strip marks ${JSON.stringify(followed.active)}`);
|
|
assert.ok(followed.mapHeight > 100, `the map came up ${followed.mapHeight}px tall`);
|
|
await page.locator('.tab[data-tab="main"]').click();
|
|
await page.waitForTimeout(200);
|
|
|
|
// Section order in the tray. "Advanced radio controls" is built at runtime,
|
|
// so it lands wherever ui-core puts it rather than where the markup says —
|
|
// appending, as it once did, always left it last.
|
|
const sections = await page.evaluate(() =>
|
|
[...document.querySelectorAll(".controls-tray > details")].map((section) =>
|
|
section.querySelector("summary").textContent.trim()));
|
|
assert.deepEqual(sections, ["Advanced radio controls", "Audio controls", "Scheduler controls"],
|
|
`tray sections are ${JSON.stringify(sections)}`);
|
|
|
|
// Mode is a button group over a hidden <select>, which stays the value a
|
|
// dozen call sites and several plugins read. The click has to reach it, and
|
|
// the select must not take part in layout while it does.
|
|
const modeBefore = await page.evaluate(() => ({
|
|
buttons: document.querySelectorAll("#mode-picker button").length,
|
|
value: document.getElementById("mode").value,
|
|
active: document.querySelector("#mode-picker button.active")?.dataset.mode,
|
|
}));
|
|
assert.ok(modeBefore.buttons > 1, `mode picker rendered ${modeBefore.buttons} buttons`);
|
|
assert.equal(modeBefore.active, modeBefore.value, "mode picker disagrees with the select");
|
|
const target = await page.evaluate(() => {
|
|
const other = [...document.querySelectorAll("#mode-picker button")]
|
|
.find((btn) => btn.dataset.mode !== document.getElementById("mode").value);
|
|
return other?.dataset.mode;
|
|
});
|
|
await page.locator(`#mode-picker button[data-mode="${target}"]`).click();
|
|
await page.waitForTimeout(200);
|
|
const modeAfter = await page.evaluate(() => ({
|
|
value: document.getElementById("mode").value,
|
|
active: document.querySelector("#mode-picker button.active")?.dataset.mode,
|
|
selectWidth: Math.round(document.getElementById("mode").getBoundingClientRect().width),
|
|
}));
|
|
assert.equal(modeAfter.value, target, `clicking ${target} left the select at ${modeAfter.value}`);
|
|
assert.equal(modeAfter.active, target, "the clicked mode is not the marked one");
|
|
assert.ok(modeAfter.selectWidth <= 2, `the hidden select still occupies ${modeAfter.selectWidth}px`);
|
|
|
|
// Mode-specific controls live on their own row, which has to leave with them:
|
|
// an empty one would still take a track and a gap in the tray and draw its
|
|
// divider under the controls every rig has.
|
|
const modeRowState = async () => page.evaluate(() => {
|
|
const row = document.getElementById("mode-controls-row");
|
|
return { display: getComputedStyle(row).display, height: Math.round(row.getBoundingClientRect().height) };
|
|
});
|
|
await page.locator('#mode-picker button[data-mode="WFM"]').click();
|
|
await page.waitForTimeout(250);
|
|
const withWfm = await modeRowState();
|
|
assert.notEqual(withWfm.display, "none", "WFM controls did not bring their row up");
|
|
assert.ok(withWfm.height > 0, `WFM row has no height (${withWfm.height}px)`);
|
|
await page.locator('#mode-picker button[data-mode="FM"]').click();
|
|
await page.waitForTimeout(250);
|
|
const withoutWfm = await modeRowState();
|
|
assert.equal(withoutWfm.display, "none", "the mode row stayed behind with nothing in it");
|
|
|
|
// Scheduler controls read left to right: step, hand back, then the entry on
|
|
// air. The separator is drawn by the current-entry block, so it can only sit
|
|
// in the right place if that block is last.
|
|
const schedulerRow = await page.evaluate(() => [...document.querySelectorAll(".scheduler-action-row > *")]
|
|
.map((el) => el.id || [...el.children].map((c) => c.id).join("+")));
|
|
assert.deepEqual(schedulerRow,
|
|
["scheduler-prev-btn+scheduler-next-btn", "scheduler-release-btn", "scheduler-cycle-status"],
|
|
`scheduler control order is ${JSON.stringify(schedulerRow)}`);
|
|
|
|
// The footer status pill colours its dot from data-state, so a hint written
|
|
// straight to textContent would leave the dot stuck on the previous state.
|
|
const hint = await page.evaluate(() => {
|
|
const element = document.getElementById("power-hint");
|
|
return { state: element.dataset.state, text: element.textContent.trim() };
|
|
});
|
|
assert.ok(["ok", "busy", "error"].includes(hint.state), `status pill state is ${hint.state}`);
|
|
assert.equal(hint.state, "ok", `fixture reports "${hint.text}" but the pill is ${hint.state}`);
|
|
|
|
// Rig names, and they have to survive the state stream. The updates carry
|
|
// only rig ids — /rigs is what knows the names — and applying one used to
|
|
// clear the names, so the picker and the header fell back to the lowercase
|
|
// ids a second after load and stayed there.
|
|
await page.waitForTimeout(1500);
|
|
const rigLabels = await page.evaluate(() => ({
|
|
options: [...document.getElementById("header-rig-switch-select").options].map((o) => o.textContent),
|
|
subtitle: document.getElementById("rig-subtitle").textContent,
|
|
}));
|
|
assert.deepEqual(rigLabels.options, ["Primary fixture", "Secondary fixture"],
|
|
`the picker reads ${JSON.stringify(rigLabels.options)}`);
|
|
assert.equal(rigLabels.subtitle, "Rig: Primary fixture",
|
|
`the header reads "${rigLabels.subtitle}"`);
|
|
|
|
const rigPicker = page.locator("#header-rig-switch-select");
|
|
await rigPicker.locator("option").nth(1).waitFor({ state: "attached" });
|
|
await rigPicker.selectOption("rig-b");
|
|
await page.waitForTimeout(100);
|
|
assert.deepEqual(selectedRigs, ["rig-b"]);
|
|
|
|
await page.locator('.tab[data-tab="map"]').click();
|
|
await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
|
|
assert.equal(new URL(page.url()).pathname, "/map");
|
|
|
|
// The selected destination is marked by a box on all four sides, so a rule
|
|
// that drops one edge (the mobile nav used to lose its bottom border) is a
|
|
// regression even though the tab still reads as "active".
|
|
const activeTab = await page.evaluate(() => {
|
|
const style = getComputedStyle(document.querySelector(".tab-bar-nav .tab.active"));
|
|
return ["Top", "Right", "Bottom", "Left"].map((side) => ({
|
|
width: style.getPropertyValue(`border-${side.toLowerCase()}-width`),
|
|
color: style.getPropertyValue(`border-${side.toLowerCase()}-color`),
|
|
}));
|
|
});
|
|
for (const edge of activeTab) {
|
|
assert.notEqual(edge.width, "0px", `active tab border: ${JSON.stringify(activeTab)}`);
|
|
assert.ok(!/rgba\(0, 0, 0, 0\)|transparent/.test(edge.color), `active tab border: ${JSON.stringify(activeTab)}`);
|
|
}
|
|
|
|
// The map is full-bleed: it breaks out of the centred .card column and
|
|
// reaches both viewport edges, without pushing the page sideways.
|
|
const stage = await page.evaluate(() => {
|
|
const rect = document.getElementById("map-stage").getBoundingClientRect();
|
|
return {
|
|
left: Math.round(rect.left),
|
|
right: Math.round(rect.right),
|
|
viewport: document.documentElement.clientWidth,
|
|
sideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
|
|
gapToFooter: Math.round(document.querySelector(".footer").getBoundingClientRect().top - rect.bottom),
|
|
pageScrolls: document.documentElement.scrollHeight > document.documentElement.clientHeight + 1,
|
|
};
|
|
});
|
|
assert.equal(stage.left, 0, `map stage starts at ${stage.left}px, not the viewport edge`);
|
|
assert.equal(stage.right, stage.viewport, `map stage ends at ${stage.right}px, not ${stage.viewport}px`);
|
|
assert.equal(stage.sideways, false, "full-bleed map makes the page scroll sideways");
|
|
// ...and fills the column down to the footer. Capping the height at a
|
|
// fraction of the viewport left a dead band that grew with the window.
|
|
assert.ok(stage.gapToFooter <= 16,
|
|
`${stage.gapToFooter}px of dead space between the map and the footer`);
|
|
assert.equal(stage.pageScrolls, false, "the map grew past the viewport");
|
|
|
|
await page.locator('.tab[data-tab="main"]').click();
|
|
assert.equal(new URL(page.url()).pathname, "/");
|
|
|
|
// About is an occasional destination, so it lives behind More at every
|
|
// width rather than in the operating tab strip.
|
|
await page.locator("#mobile-more-btn").click();
|
|
await page.locator('[data-navigate-tab="about"]').click();
|
|
await page.locator("#tab-about").waitFor({ state: "visible" });
|
|
assert.equal(new URL(page.url()).pathname, "/about");
|
|
|
|
await page.goBack();
|
|
await page.locator("#tab-main").waitFor({ state: "visible" });
|
|
assert.equal(new URL(page.url()).pathname, "/");
|
|
assert.deepEqual(runtimeErrors, []);
|
|
|
|
// Refreshing or deep-linking must mark the destination, not Tools. The first
|
|
// route navigation runs while the card is still behind the loading state, so
|
|
// a test that asked whether the tab was displayed saw "none" for every tab
|
|
// and lit Tools up on every refresh of every page.
|
|
for (const [route, tab, toolsLit] of [["/map", "map", false], ["/about", "about", true]]) {
|
|
await page.goto(`${fixture.origin}${route}`, { waitUntil: "domcontentloaded" });
|
|
await page.locator(`#tab-${tab}`).waitFor({ state: "visible" });
|
|
const marked = await page.evaluate(() => ({
|
|
actives: [...document.querySelectorAll(".tab-bar .tab.active")].map((t) => t.dataset.tab || t.id),
|
|
tools: document.getElementById("mobile-more-btn").classList.contains("active"),
|
|
}));
|
|
assert.ok(marked.actives.includes(tab), `${route} marks ${JSON.stringify(marked.actives)}`);
|
|
assert.equal(marked.tools, toolsLit, `${route}: Tools active is ${marked.tools}`);
|
|
}
|
|
await page.goto(`${fixture.origin}/`, { waitUntil: "domcontentloaded" });
|
|
await page.locator("#tab-main").waitFor({ state: "visible" });
|
|
assert.deepEqual(runtimeErrors, []);
|
|
|
|
// --- Layout regressions -------------------------------------------------
|
|
// Every fault below shipped at some point while the rest of this file
|
|
// passed, because nothing here looked at geometry: a header whose height
|
|
// tracked the viewport, controls that stretched, a tab strip that ran under
|
|
// the controls, and a dropdown that opened underneath the spectrum.
|
|
for (const width of [1440, 1280, 1100, 900]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.waitForTimeout(250);
|
|
const header = await page.evaluate(() => {
|
|
const bar = document.querySelector(".tab-bar");
|
|
const nav = document.querySelector(".tab-bar-nav");
|
|
const actions = document.querySelector(".top-bar-actions");
|
|
const controls = [...actions.children]
|
|
.filter((el) => !el.hidden && el.getBoundingClientRect().height > 0)
|
|
.map((el) => Math.round(el.getBoundingClientRect().height));
|
|
return {
|
|
barHeight: Math.round(bar.getBoundingClientRect().height),
|
|
// The tabs, not the strip: with the strip allowed to overflow its box
|
|
// shrinks while its content paints across the controls, so the
|
|
// container's own rect never registers the collision.
|
|
overlap: Math.round(Math.max(...[...nav.querySelectorAll(".tab")]
|
|
.filter((tab) => tab.offsetParent !== null)
|
|
.map((tab) => tab.getBoundingClientRect().right))
|
|
- actions.getBoundingClientRect().left),
|
|
heights: [...new Set(controls)],
|
|
pageScrollsSideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
|
|
};
|
|
});
|
|
assert.ok(header.barHeight <= 96, `header is ${header.barHeight}px at ${width}px; it should stay one row`);
|
|
assert.ok(header.overlap <= 0, `tab strip overlaps the controls by ${header.overlap}px at ${width}px`);
|
|
assert.ok(header.heights.length <= 2, `controls have heights ${header.heights.join(", ")} at ${width}px`);
|
|
assert.equal(header.pageScrollsSideways, false, `page scrolls sideways at ${width}px`);
|
|
}
|
|
|
|
// A dropdown must paint over the page, not inside the header: fixed
|
|
// positioning escapes clipping but not the header's stacking context.
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.waitForTimeout(250);
|
|
const menu = await page.evaluate(() => {
|
|
document.getElementById("mobile-more-btn").click();
|
|
const element = document.getElementById("mobile-more-menu");
|
|
const rect = element.getBoundingClientRect();
|
|
const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
|
|
return { width: Math.round(rect.width), height: Math.round(rect.height), onTop: element.contains(hit) };
|
|
});
|
|
assert.ok(menu.height > 40 && menu.width > 80, `menu rendered ${menu.width}x${menu.height}`);
|
|
assert.ok(menu.onTop, "menu is painted underneath the page");
|
|
|
|
// Wider text than this machine renders. This suite passed on macOS twice
|
|
// while CI, whose system font is wider, put the tab strip into the controls —
|
|
// the second time by 9px at 1440px with no scaling at all, because the fit
|
|
// test was an arithmetic estimate whose fixed allowance for the gaps did not
|
|
// cover them at those metrics. A single scale factor cannot stand in for
|
|
// another platform's fonts, so sweep: somewhere in this range is whatever CI
|
|
// renders, and the strip has to hold at every step of it.
|
|
const applyTextScale = (scale) => page.addStyleTag({ content: `
|
|
.tab-bar .title { font-size: ${1.05 * scale}rem !important; }
|
|
.tab-bar .subtitle { font-size: ${0.78 * scale}rem !important; }
|
|
.tab-bar .tab { font-size: ${0.95 * scale}rem !important; }
|
|
.tab-bar select, .tab-bar button { font-size: ${0.95 * scale}rem !important; }
|
|
` });
|
|
const measureBar = () => page.evaluate(() => {
|
|
const nav = document.querySelector(".tab-bar-nav");
|
|
const actions = document.querySelector(".top-bar-actions");
|
|
const tabs = [...nav.querySelectorAll(".tab")].filter((tab) => tab.offsetParent !== null);
|
|
return {
|
|
overlap: Math.round(Math.max(...tabs.map((tab) => tab.getBoundingClientRect().right))
|
|
- actions.getBoundingClientRect().left),
|
|
iconsOnly: nav.classList.contains("nav-icons-only"),
|
|
};
|
|
});
|
|
|
|
for (const scale of [1.0, 1.15, 1.3, 1.5, 1.75, 2.0]) {
|
|
await applyTextScale(scale);
|
|
// 1100px is the narrowest bar in the app: the bookmark gutters take 9.5rem
|
|
// a side above that width, leaving less room than 900px has.
|
|
for (const width of [1440, 1280, 1100, 900]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.waitForTimeout(120);
|
|
const crowded = await measureBar();
|
|
assert.ok(crowded.overlap <= 0,
|
|
`at ${scale}x text the tab strip overlaps the controls by ${crowded.overlap}px at ${width}px`);
|
|
}
|
|
}
|
|
|
|
// A station name long enough that the bar cannot hold it, which is the rung
|
|
// below icons: the identity has to give, not the strip.
|
|
await page.evaluate(() => {
|
|
document.getElementById("rig-subtitle").textContent =
|
|
"Rig: Shack SDR — RTL-SDR v4 on the attic dipole, north-west";
|
|
});
|
|
await applyTextScale(1.6);
|
|
for (const width of [1440, 1100]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.waitForTimeout(200);
|
|
const crowded = await measureBar();
|
|
assert.ok(crowded.overlap <= 0,
|
|
`with a long station name the tab strip overlaps the controls by ${crowded.overlap}px at ${width}px`);
|
|
}
|
|
|
|
// ...and when the text changes under a bar that is not resized. The rig name
|
|
// arrives from the server, a web font swaps in: neither is a window resize,
|
|
// and the strip used to sit there as it was.
|
|
await page.setViewportSize({ width: 1440, height: 900 });
|
|
await page.waitForTimeout(200);
|
|
await applyTextScale(2.4);
|
|
await page.waitForTimeout(400);
|
|
const unresized = await measureBar();
|
|
assert.ok(unresized.overlap <= 0,
|
|
`text grew without a resize and the strip overlaps by ${unresized.overlap}px`);
|
|
assert.equal(unresized.iconsOnly, true, "the strip kept its labels with no room for them");
|
|
|
|
// The frequency readouts are typed into, so the browser remembers what went
|
|
// in and offers it back in a dropdown over the reading — Edge does this by
|
|
// default. Nothing here wants to be autofilled from what was tuned last week.
|
|
const autofill = await page.evaluate(() => ["freq", "center-freq"].map((id) => {
|
|
const input = document.getElementById(id);
|
|
return { id, autocomplete: input?.getAttribute("autocomplete") ?? null };
|
|
}));
|
|
for (const field of autofill) {
|
|
assert.equal(field.autocomplete, "off",
|
|
`#${field.id} offers autofill (autocomplete=${field.autocomplete})`);
|
|
}
|
|
|
|
} finally {
|
|
await browser.close();
|
|
await fixture.close();
|
|
}
|