Files
Live_RC/tests/browser_settings_tabs.js
larssand 05f0291ee9 Add permanent browser tests for the Settings tabs, Event Manager tabs, and Schedule panel
These three UIs (all shipped earlier this session) had only been verified with throwaway
scratch scripts during development. Adds tests/browser_settings_tabs.js,
browser_event_manager_tabs.js and browser_event_schedule.js, wired into the existing
test:browser suite.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-11 16:45:24 +02:00

47 lines
2.8 KiB
JavaScript

import assert from "node:assert/strict";
// Regression coverage for the Settings page's tab restructuring (previously one long
// scrolling page: Connection, Audio, Appearance & overlay, System & backup all at once).
// Tabs must show exactly one group of panels at a time, default to Connection on first
// load, and - the actual bug class this guards against - keep the selection when the page
// re-renders in place (e.g. after saving the form), not silently reset back to Connection.
// activeSettingsTab is a module-level variable specifically so it survives that re-render.
export async function runSettingsTabsSmoke({ evaluate, navigate }) {
await navigate("settings", "settingsForm");
const activeTab = () => evaluate(`document.querySelector(".settings-tab.active")?.dataset.settingsTab`);
const panelVisibility = () => evaluate(`
Object.fromEntries(Array.from(document.querySelectorAll("[data-settings-panel]"))
.map((panel) => [panel.dataset.settingsPanel, !panel.hidden]))
`);
assert.equal(await activeTab(), "connection", "Connection is the default tab on first load");
let visible = await panelVisibility();
assert.equal(visible.connection, true, "connection panel visible by default");
assert.equal(visible.audio, false, "audio panel hidden by default");
assert.equal(visible.appearance, false, "appearance panel hidden by default");
assert.equal(visible.system, false, "system panel hidden by default");
console.log("PASS settings defaults to the Connection tab with only that panel visible");
for (const tab of ["audio", "appearance", "system", "connection"]) {
await evaluate(`document.querySelector('[data-settings-tab="${tab}"]').click()`);
assert.equal(await activeTab(), tab, `clicking the ${tab} tab activates it`);
visible = await panelVisibility();
for (const [panelId, isVisible] of Object.entries(visible)) {
assert.equal(isVisible, panelId === tab, `after switching to ${tab}, panel ${panelId} should be ${panelId === tab ? "visible" : "hidden"}`);
}
}
console.log("PASS clicking each settings tab shows only its own panel and hides the rest");
await evaluate(`document.querySelector('[data-settings-tab="system"]').click()`);
assert.equal(await activeTab(), "system");
// Submitting the settings form re-renders the whole page in place (no navigation), which
// is exactly the path that used to drop the user back onto the Connection tab.
await evaluate(`document.getElementById("settingsForm").requestSubmit()`);
assert.equal(await activeTab(), "system", "the selected tab survives an in-place re-render after saving, instead of resetting to Connection");
visible = await panelVisibility();
assert.equal(visible.system, true);
assert.equal(visible.connection, false);
console.log("PASS the active settings tab is preserved across a save-triggered re-render");
}