Repository navigation
uiux/testing: better test coverage and visual testing integration - #133
Merged
Merged
Conversation
Cover AccountPage, AdminChannelsPage, AdminEnvironmentProvidersPage, AdminUniversesPage, BotCreatePage, GeneralSettingsPage, and HomeRedirect with jsdom component tests in the existing createRoot/act style. Make the session config editor capability test locale-independent: the editor formats token counts with toLocaleString, so the expectation does too. It failed on machines whose locale does not group digits with commas (e.g. en-CH renders 1’000’000).
Add two review commands that capture the demo build in a real browser and
compare versions with screendiff-js:
npm run screenshots:demo capture the working tree
npm run screendiff:demo compare two versions (default: the working
tree against where the branch left main)
screendiff:demo takes optional [base] [head] refs plus --theme <light|dark>,
--no-cache, and --keep-screenshots. The default base is the merge-base with
main, not main's tip, so later changes on main stay out of the report.
Capture (platform/web/e2e/, playwright.config.ts):
- 27 demo routes in light and dark at 1440x900, 2x device scale.
- Pins clock, randomness, animations, locale, and timezone from outside
the app, so it works on any commit; repeated captures of one build match
pixel for pixel.
- The harness always comes from the working tree, so both sides capture
the same screens. Specs use *.pw.ts so Vitest skips them.
Runner (platform/web/scripts/screendiff.mjs):
- Builds committed refs in a git worktree in the OS temp folder (outside
the repo, so module resolution cannot fall back to this checkout's
node_modules) and caches builds by SHA in node_modules/.cache.
- Writes a self-contained report.html and results.json per comparison to
platform/web/test-results/screendiff/<base>_vs_<head>/; captured PNGs are
removed afterwards unless --keep-screenshots is given or the run failed.
Visual tests are a review tool for UI/UX changes, deliberately not part of
npm test, npm run check, or CI. platform/README.md gains a "Testing &
Visual Tests" section.
Dependencies: @playwright/test 1.64.1, screendiff-js 0.1.2, and @types/node
as platform/web devDependencies. screendiff-js's peer dependency moves
Vitest from 5.0.3 to 5.1.0 in the lockfile; the web suite passes.
lukebuehler
enabled auto-merge
November 5, 2026 16:48
Contributor
|
super, thanks! |
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
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.
Hi luke,
To prepare for my changes on the web frontend I have added some missing test coverage, fixed failing tests on machines with different region settings, and added a lightweight visual testing system.
npm run screenshots:demois maybe also interesting for you to get latest screenshots.Only affects platform/web, but doesn't change anything on the frontend.