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:
@@ -41,11 +41,25 @@ provide:
|
||||
- `script/fmt` — format all files (writes)
|
||||
- `script/fmt-check` — check formatting (read-only)
|
||||
- `script/check` — run test, lint, and fmt-check
|
||||
- `script/frontend-viewport-test` — responsive-layout verification of the built
|
||||
frontend in a containerised headless Chrome (see
|
||||
[test/viewport/README.md](test/viewport/README.md)). Not part of
|
||||
`script/check`: it needs Docker and takes minutes.
|
||||
- `script/docker` — build the Docker image tagged via `script/projectname`
|
||||
- `script/cibuild` — CI entrypoint: plain `docker build .`
|
||||
- `script/precommit` — run by the git pre-commit hook; runs `script/check`
|
||||
- `script/install-precommit` — install the git pre-commit hook
|
||||
|
||||
## Responsive layout
|
||||
|
||||
The narrow-viewport layout lives in the `max-width: 768px` media block in
|
||||
`src/styles.css`. It is verified automatically by `make frontend-viewport-test`,
|
||||
which drives a digest-pinned headless Chrome against the built `dist/` and
|
||||
asserts on computed layout at widths derived from that CSS — one pixel either
|
||||
side of every breakpoint it declares, plus a 320px floor, a desktop baseline and
|
||||
two landscape sizes. See [test/viewport/README.md](test/viewport/README.md) for
|
||||
what it covers and what it genuinely cannot.
|
||||
|
||||
## Rationale
|
||||
|
||||
When debugging network issues, it's useful to have a persistent at-a-glance view
|
||||
|
||||
Reference in New Issue
Block a user