test: add RTL smoke test for dashboard shell - #1138
Open
Emelie-Dev wants to merge 1 commit into
Open
Conversation
Forces dir="rtl" on <html> via addInitScript and exercises /dashboard
at four Tailwind breakpoints (sm/md/lg/xl). Catches the two regression
classes that historically sink RTL rollouts:
- horizontal overflow: every element whose scrollWidth exceeds its
clientWidth (minus a 1 px tolerance for sub-pixel rounding),
excluding intentionally-scrollable containers.
- clipped text: any overflow:hidden ancestor with textual content
that does not fit the content box, unless text-overflow:ellipsis
was explicitly opted in.
On failure each check attaches a full-page PNG as a Playwright
artifact so the exact RTL render is available for triage without
reproducing the viewport locally. On success a viewport PNG is still
attached to give PR reviewers a side-by-side RTL render.
axe-core runs against the same settled DOM (WCAG 2.1 A/AA +
best-practice) with the dashboard's existing triaged color-contrast
issue allowlisted, so RTL-specific a11y regressions surface here
instead of in a later manual pass.
Fixes Stellopay#821.
Contributor
|
@Emelie-Dev is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel. A member of the Team first needs to authorize it. |
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.
test: add RTL smoke test for dashboard shell
Adds a Playwright spec that renders the dashboard with
dir="rtl"forcedon
<html>and asserts the two failure modes that historically sink RTLrollouts — horizontal overflow and silently clipped text — plus an
axe-core WCAG 2.1 AA pass and screenshot artifacts for PR review.
Why
No automated test currently renders any route with
dir="rtl", soregressions in RTL readiness (unintended horizontal scrollbars,
right-edge badges clipped into the sidebar, card labels truncated by
hard-coded widths tuned for English) would only be caught manually, if
at all, ahead of eventual Arabic / Hebrew / Persian locale support.
What
tests/rtl-dashboard-smoke.spec.ts— onetest.describeperTailwind breakpoint (sm/md/lg/xl) running the same 4 checks:
dir="rtl"attribute survives hydration (sanity guard on theaddInitScriptinjection)scrollWidth > clientWidth + 1pxfails the test. Containers withoverflow-x: auto | scrollare exempt (overflow is desired there).overflow: hiddenancestor withnon-trivial text content that outgrows its box is flagged, unless
the author explicitly opted in with
text-overflow: ellipsis.color-contrastallowlist asdashboard.spec.ts.Screenshot artefacts per breakpoint:
exact offending render is in CI artefacts, no local repro needed.
RTL render side-by-side with the existing LTR dashboard snapshots.
Design decisions
not call
toHaveScreenshotwith a committed PNG baseline. Thatbelongs in a dedicated RTL visual-regression pass once RTL copy is
actually plugged in. Instead we codify the two structural failure
modes that are language-agnostic and catch 80 % of the damage with
zero ongoing baseline maintenance.
addInitScript, not aroute.fulfillrewrite. Mirrors thepattern used by
dark-mode-screenshots.spec.tsforlocalStoragetheme injection — guaranteed to run before Next.js hydrates, so no
LTR→RTL first-paint flash.
produce fractional
clientWidthvalues that round to a pixel-widescroll overflow. Tolerance absorbs that without hiding real
regressions (anything ≥ 2 px is always flagged).
position: fixedaware visibilitycheck. Naïve
offsetParent === nullguards incorrectly excludefixed-position elements (which do paint and do cause overflow). We
combine
getBoundingClientRect()zero-box check with the offsetParentguard so fixed elements are scanned while truly-hidden nodes are
skipped.
text-overflow: ellipsisexemption. If a container usesellipsis, clipping is the intended behaviour — failing the test for
it would force authors to either widen every box or drop ellipsis,
neither of which is desirable.
Running
Artifacts
Failure screenshots land under the standard Playwright
test-results/directory and are retained by the CI workflow asartefacts on any red build.
closes #821