test: automated responsive-layout harness (closes #13)
check / check (push) Failing after 1s
check / check (push) Failing after 1s
`make frontend-viewport-test` builds `dist/`, serves it from the same digest-pinned nginx image and nginx.conf the shipping container uses, and drives a digest-pinned headless Chrome over CDP. Viewport widths are derived from the app's own @media breakpoints rather than a list of phone models: each breakpoint is tested one pixel below, on, and above, plus four anchor viewports. Assertions are on computed layout — horizontal overflow, off-screen elements, clipped text, 44x44 tap targets, host-row reflow — not screenshots, and each check declares the minimum elements it must find so a stale selector fails instead of passing blind against a page it is not measuring. Kept out of `make check`: it needs Docker and takes minutes. Proven able to fail before being trusted. Model: opus-4-8
This commit was merged in pull request #44.
This commit is contained in:
@@ -44,6 +44,14 @@ files, so merging it also closes most compliance gaps.
|
||||
ignored repo-wide, not just under `backend/`. Excluding `.git` from
|
||||
`.dockerignore` stays deferred: both images read git metadata at build time
|
||||
(`COPY .git` in `Dockerfile.backend`, `git rev-parse` in `vite.config.js`)
|
||||
- 2026-08-09: automated responsive-layout harness
|
||||
(`make frontend-viewport-test`): digest-pinned headless Chrome driven over CDP
|
||||
against the built `dist/`, viewport widths derived from the breakpoints in
|
||||
`src/styles.css` ([#13](https://git.eeqj.de/sneak/netwatch/issues/13)). Every
|
||||
check carries a presence guard so none of them can pass against a page it is
|
||||
not actually measuring. Found two real layout defects, filed as
|
||||
[#42](https://git.eeqj.de/sneak/netwatch/issues/42) and
|
||||
[#43](https://git.eeqj.de/sneak/netwatch/issues/43)
|
||||
- 2026-07-07 Adopted scripts-to-rule-them-all: `script/` entrypoints, Makefile
|
||||
shims, README Entrypoints section
|
||||
- 2026-02-27: backend with buffered zstd-compressed report storage; CI workflow
|
||||
@@ -61,6 +69,9 @@ files, so merging it also closes most compliance gaps.
|
||||
|
||||
# Future Steps
|
||||
|
||||
- Wire `script/frontend-viewport-test` into CI as its own step (deliberately not
|
||||
part of `make check` today; the decision has real CI-runtime cost and is
|
||||
tracked separately)
|
||||
- Compliance top-up as one small commit: add .editorconfig and add the hooks
|
||||
target to the Makefile
|
||||
- After merge, confirm .gitea/workflows/check.yml is on main and CI is green
|
||||
|
||||
Reference in New Issue
Block a user