mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-04 14:25:08 +00:00
* fix(web): harden, polish and optimize the web UI per the September 2026 audit Works through docs/archive/WEB_UI_AUDIT_2026-09.md (health 8/20). Implementation integrity (P0) - app.css now defines every utility class the templates and JS use, including .hidden, so the ~145 JS show/hide toggles work. Button reset, and base component rules (.btn, .form-control) wrapped in :where() so utility classes on the same element win. New static-audit test fails when a used utility class has no rule. Accessibility - Focus rings render (the old ring rule referenced undefined variables); one :focus-visible outline everywhere; skip link; labelled nav landmarks. - Shared dialog helper (js/utils/dialog.js): role/aria-modal, focus trap, Escape, focus return, applied to every modal. - Named icon-only buttons and labelled ~70 form fields. - Toasts announced once; errors persist >= 10s; one showNotification. - Captive WiFi page: live region, timeouts, dark mode, 16px inputs. Performance (Pi Zero 2 W) - SSE streams and tab timers pause when hidden or off-tab; the display stream only runs while a preview is visible. app-shell.js deferred. - Widget scripts served as one versioned bundle (/assets/widgets.js): 52 -> 21 script tags, 66 -> 35 requests on first load. - Stdlib gzip fallback when flask-compress is missing: first-load JS/CSS 1358 KB -> 291 KB on the wire. SSE untouched. Theming and responsive - File managers, form fields and Fonts upload on theme tokens; bare inputs themed in dark mode; no more white surfaces. - No horizontal overflow at 375px on any tab; 44px touch targets on coarse pointers; reduced-motion respected; header title truncates. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): clear Codacy findings on #568 - json-file-manager: focus-trap releases kept in a Map (no dynamic property access or delete; no value-returning forEach callback) - notification / schedule-picker: style and day-label lookups via Map - app.js: move the pending-queue assignment out of the expression - diff_viewer / error_handler: named function declarations instead of arrow consts No behavior change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * test: check the OAuth widget ships in the widget bundle base.html no longer tags widget scripts one by one; they load through /assets/widgets.js. Assert the page requests the bundle and the bundle contains google-oauth.js, which is what the test was protecting. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): address review feedback on #568 - widget bundle version fingerprints every file (name, mtime_ns, size) - gzip fallback appends Accept-Encoding to an existing Vary header - dialog helper: releasing a non-top dialog no longer moves focus out of the dialog the user is in - labels: file-upload targets its file input; fallback config fields get label for/id pairs; native color input has a fallback name - utility audit also reads class names inside bound :class expressions Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): give the native color-picker input an accessible name CodeRabbit flagged this on PR #568 as an outside-diff finding (never posted inline, so it was missed in the round of fixes that addressed the other 6 review comments). The <input type="color"> only carried a title attribute; screen readers don't reliably announce title, and there's no other label naming the control when showHexInput is false. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): clear Codacy findings in app-shell.js - drop the unused catch binding on the SSE JSON parse - move the pending-notification queue assignment out of the expression No behavior change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(web): contain plugin widgets/ dir and bound style-editor retries From CodeRabbit review on #568 (code that arrived with the main merge): - serve_plugin_widget resolves widgets/ with resolve_under before resolving the manifest script under it, so a symlinked widgets directory can't become the containment base (CWE-22). New test. - style-editor init stops polling after ~10s when the widget never registers and leaves the plain fallback fields in place. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
197 lines
7.5 KiB
Python
197 lines
7.5 KiB
Python
"""
|
|
Web-UI smoke tests: every page, partial, and critical static asset must render.
|
|
|
|
These boot the pages blueprint with the same dual registration app.py uses
|
|
(un-prefixed primary + /v3 legacy alias) and assert each surface returns 200
|
|
with its load-bearing markers present. They exist to catch, in CI, the class
|
|
of regression that only shows up when a real request renders a real template:
|
|
a broken partial, a missing tab wiring, a renamed element id that JS depends
|
|
on, or a static asset that stopped being served.
|
|
"""
|
|
|
|
import sys
|
|
from pathlib import Path
|
|
from unittest.mock import MagicMock
|
|
|
|
import pytest
|
|
from flask import Flask
|
|
|
|
PROJECT_ROOT = Path(__file__).parent.parent
|
|
sys.path.insert(0, str(PROJECT_ROOT))
|
|
|
|
|
|
SMOKE_CONFIG = {
|
|
"web_display_autostart": True,
|
|
"timezone": "America/Chicago",
|
|
"location": {"city": "Dallas", "state": "Texas", "country": "US"},
|
|
"plugin_system": {
|
|
"auto_discover": True,
|
|
"auto_load_enabled": True,
|
|
"development_mode": False,
|
|
"plugins_directory": "plugin-repos",
|
|
},
|
|
"schedule": {},
|
|
"dim_schedule": {"dim_brightness": 30},
|
|
"sync": {"role": "standalone", "port": 5765, "follower_position": "left"},
|
|
"clock": {"enabled": True},
|
|
"ledmatrix-weather": {"enabled": True},
|
|
"display": {
|
|
"hardware": {
|
|
"rows": 32, "cols": 64, "chain_length": 2, "parallel": 1,
|
|
"brightness": 95, "hardware_mapping": "adafruit-hat-pwm",
|
|
"led_rgb_sequence": "RGB", "multiplexing": 0, "panel_type": "",
|
|
"row_address_type": 0, "scan_mode": 0, "pwm_bits": 9,
|
|
"pwm_dither_bits": 1, "pwm_lsb_nanoseconds": 130,
|
|
"limit_refresh_rate_hz": 120, "disable_hardware_pulsing": False,
|
|
"inverse_colors": False, "show_refresh_rate": False,
|
|
},
|
|
"runtime": {"gpio_slowdown": 3, "rp1_rio": 0},
|
|
"double_sided": {"enabled": False, "copies": 2, "axis": "horizontal"},
|
|
"use_short_date_format": False,
|
|
"dynamic_duration": {"max_duration_seconds": 180},
|
|
"vegas_scroll": {
|
|
"enabled": False, "scroll_speed": 50, "separator_width": 32,
|
|
"target_fps": 125, "buffer_ahead": 2,
|
|
"plugin_order": [], "excluded_plugins": [],
|
|
},
|
|
"display_durations": {"stale_saved_mode": 45},
|
|
"plugin_rotation_order": ["ledmatrix-weather", "clock"],
|
|
},
|
|
}
|
|
|
|
PLUGIN_MODES = {
|
|
"clock": ["clock"],
|
|
"ledmatrix-weather": ["weather_current", "weather_daily"],
|
|
}
|
|
|
|
|
|
@pytest.fixture
|
|
def client():
|
|
base = PROJECT_ROOT / "web_interface"
|
|
app = Flask(
|
|
__name__,
|
|
template_folder=str(base / "templates"),
|
|
static_folder=str(base / "static"),
|
|
)
|
|
app.config["TESTING"] = True
|
|
|
|
from web_interface.blueprints import pages_v3 as pv
|
|
|
|
# pages_v3 is a module-level Blueprint singleton shared by the whole test
|
|
# process (test_web_settings_ui.py mutates the same attributes) - save
|
|
# the originals and restore them on teardown so this fixture can't leak
|
|
# its mocks into tests that run afterward.
|
|
original_config_manager = getattr(pv.pages_v3, "config_manager", None)
|
|
original_plugin_manager = getattr(pv.pages_v3, "plugin_manager", None)
|
|
|
|
mock_cm = MagicMock()
|
|
mock_cm.load_config.return_value = SMOKE_CONFIG
|
|
mock_cm.get_raw_file_content.return_value = SMOKE_CONFIG
|
|
mock_cm.get_config_path.return_value = "config/config.json"
|
|
mock_cm.get_secrets_path.return_value = "config/config_secrets.json"
|
|
pv.pages_v3.config_manager = mock_cm
|
|
|
|
mock_pm = MagicMock()
|
|
mock_pm.plugins = {}
|
|
mock_pm.get_all_plugin_info.return_value = [
|
|
{"id": "clock", "name": "Clock"},
|
|
{"id": "ledmatrix-weather", "name": "Weather"},
|
|
]
|
|
mock_pm.get_plugin_display_modes.side_effect = (
|
|
lambda pid: PLUGIN_MODES.get(pid, [])
|
|
)
|
|
pv.pages_v3.plugin_manager = mock_pm
|
|
|
|
# Same dual registration as web_interface/app.py: un-prefixed primary,
|
|
# /v3 kept as a working legacy alias.
|
|
app.register_blueprint(pv.pages_v3, url_prefix="")
|
|
app.register_blueprint(pv.pages_v3, url_prefix="/v3", name="pages_v3_legacy")
|
|
try:
|
|
yield app.test_client()
|
|
finally:
|
|
pv.pages_v3.config_manager = original_config_manager
|
|
pv.pages_v3.plugin_manager = original_plugin_manager
|
|
|
|
|
|
# (path, [markers that must appear in the body])
|
|
PAGES = [
|
|
("/", ["site-nav", "mobileNavOpen", 'rel="manifest"',
|
|
"restart-pending-banner", "activeTab = 'durations'"]),
|
|
("/partials/overview", ["getting-started-card", "displayImage"]),
|
|
("/partials/general", ["timezone"]),
|
|
("/partials/display", ["display-section-advanced-hardware",
|
|
"display-resolution-value", "vegas_scroll_label"]),
|
|
("/partials/durations", ["rotation_plugin_order", "duration__clock",
|
|
"duration__weather_current",
|
|
"duration__stale_saved_mode"]),
|
|
("/partials/schedule", ["schedule"]),
|
|
]
|
|
|
|
|
|
@pytest.mark.parametrize("path,markers", PAGES, ids=[p for p, _ in PAGES])
|
|
def test_page_renders_with_markers(client, path, markers):
|
|
resp = client.get(path)
|
|
assert resp.status_code == 200, f"{path} -> {resp.status_code}"
|
|
body = resp.get_data(as_text=True)
|
|
for marker in markers:
|
|
assert marker in body, f"{path}: missing marker {marker!r}"
|
|
|
|
|
|
@pytest.mark.parametrize("path", [p for p, _ in PAGES if p != "/"])
|
|
def test_legacy_v3_alias_serves_the_same_partials(client, path):
|
|
assert client.get("/v3" + path).status_code == 200
|
|
|
|
|
|
STATIC_ASSETS = [
|
|
"/static/v3/app.css",
|
|
"/static/v3/app.js",
|
|
"/static/v3/manifest.json",
|
|
"/static/v3/icons/icon-192.png",
|
|
"/static/v3/js/app-shell.js",
|
|
"/static/v3/js/app-early.js",
|
|
"/static/v3/js/htmx-config.js",
|
|
"/static/v3/js/widgets/plugin-order-list.js",
|
|
"/static/v3/js/widgets/notification.js",
|
|
"/static/v3/vendor/fontawesome/css/all.min.css",
|
|
"/static/v3/vendor/codemirror/codemirror.min.js",
|
|
]
|
|
|
|
|
|
@pytest.mark.parametrize("asset", STATIC_ASSETS)
|
|
def test_static_asset_served(client, asset):
|
|
resp = client.get(asset)
|
|
assert resp.status_code == 200, f"{asset} -> {resp.status_code}"
|
|
assert len(resp.data) > 0
|
|
|
|
|
|
def test_widget_bundle_is_served_and_requested(client):
|
|
"""base.html loads every widget through one versioned bundle request."""
|
|
page = client.get("/").get_data(as_text=True)
|
|
assert "/assets/widgets.js?v=" in page
|
|
resp = client.get("/assets/widgets.js")
|
|
assert resp.status_code == 200
|
|
assert resp.mimetype == "application/javascript"
|
|
body = resp.get_data(as_text=True)
|
|
assert body.index("/* registry.js */") < body.index("/* notification.js */")
|
|
assert "/* json-file-manager.js */" in body
|
|
|
|
|
|
def test_durations_page_groups_by_plugin(client):
|
|
"""One duration input per display mode of each enabled plugin, plus the
|
|
leftover group for saved keys no enabled plugin owns."""
|
|
body = client.get("/partials/durations").get_data(as_text=True)
|
|
assert body.count("duration__") >= 2 * len(
|
|
[m for modes in PLUGIN_MODES.values() for m in modes]
|
|
) # each mode: id= and name=
|
|
assert "Other saved entries" in body
|
|
|
|
|
|
def test_display_advanced_section_contains_tuning_fields(client):
|
|
body = client.get("/partials/display").get_data(as_text=True)
|
|
adv = body.find('id="display-section-advanced-hardware"')
|
|
adv_close = body.find("/#display-section-advanced-hardware")
|
|
assert 0 < adv < adv_close
|
|
for field in ["multiplexing", "pwm_bits", "inverse_colors"]:
|
|
pos = body.find(f'name="{field}"')
|
|
assert adv < pos < adv_close, f"{field} not inside the advanced section"
|