test(mobile): automated mobile-UI audit system (layout / contrast / dialogs) in CI - #86
Merged
Merged
Conversation
…ialogs) in CI Build repeatable detectors for the bug classes we kept finding by hand, and run them on every screen in CI so they're caught automatically. New auditors — tests/helpers/mobileAudit.ts: - auditLayout: horizontal page overflow, swipe-sideways scroll containers (with a greppable `data-audit-scroll-ok` opt-out for intentional cases), squeezed labels. - auditContrast: WCAG contrast of every visible text vs its effective background; catches invisible / black-on-dark text (the dark:-variant-not-applying class). Skips gradient (bg-clip-text) headings. - auditDialog: a modal fits the viewport AND sits on top (not clipped by/under the bottom nav) — catches the stacking-context trap. New suites (@Audit, run via `npm run test:mobile` + a new CI step): - mobile-audit.spec.ts: sweeps every screen at 390px — 7 workspace views, 6 pages, sign-in (14 tests). - mobile-dialogs.spec.ts: the edit modal (tap a card) + create modal (FAB). Real issues the system found & fixed to reach a green baseline: - Backend status colors used light-mode -600 shades on the dark page (e.g. red-600 "down", ratio 2.13) → -400 shades; the yellow "Check Data" button was white-on- yellow (2.94) → dark text. - CreateWorkItemModal wasn't portaled → painted under the nav (same trap as the edit modal); now createPortal(document.body). - Admin user table is a dense data grid that scrolls horizontally by design → marked data-audit-scroll-ok. 26/26 mobile+audit green; smoke 5/5. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🧪 Comprehensive Test Suite
Full-stack smoke gate runs in the CI workflow. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds repeatable detectors for the mobile bug classes we kept finding by hand, and runs them across every screen in CI so they're caught automatically.
Auditors —
tests/helpers/mobileAudit.tsdata-audit-scroll-okopt-out for intentional cases like data tables), labels squeezed unreadable.dark:-not-applying class). Skips gradient (bg-clip-text) headings.Suites (
@audit, vianpm run test:mobile+ a new CI step next to the smoke gate)mobile-audit.spec.ts: sweeps every screen at 390px — 7 workspace views, 6 pages, sign-in (14 tests).mobile-dialogs.spec.ts: edit modal (tap card) + create modal (FAB).Real issues it found & I fixed (to reach a green baseline)
-600status colors on the dark page (red-600"down", contrast 2.13) →-400; white-on-yellow "Check Data" button (2.94) → dark text.createPortal(document.body).data-audit-scroll-ok.26/26 mobile+audit green; smoke 5/5; typecheck clean. From now on these regressions fail CI instead of needing a human to spot them.