60 lines
4.0 KiB
Markdown
60 lines
4.0 KiB
Markdown
# QA: Log-in card sizing, alert placement and focus behavior match the Auth board
|
|
|
|
## Automated (Vitest + Vue Test Utils, `task test:web`)
|
|
|
|
Mount AuthShell/LoginView directly; mock `useApi` (`GET /v1/auth/registration`,
|
|
`POST /v1/auth/login`) only as scaffolding, per features/login_screen.qa.md's setup.
|
|
|
|
1. **Card padding and control heights at sm+** — mount at a `>= 640px` viewport; assert the
|
|
card's own padding is 40px on every side (not Nuxt UI's untouched default); assert Username,
|
|
Password and the submit button each render at a computed height of 40px; assert input font-size
|
|
is 14px.
|
|
2. **Card padding and control heights below sm** — mount at a `< 640px` viewport; assert the
|
|
card's padding is 8px top / 20px sides / 0 bottom; assert the footer's own padding is 0 top /
|
|
20px sides / 24px bottom; assert Username, Password and the submit button are each 44px tall;
|
|
assert input font-size is 16px.
|
|
3. **"Forgot password?" styling** — assert the link's computed color equals `--ui-text-toned`,
|
|
`text-decoration-line: underline`, `text-underline-offset: 3px`, and that it carries no bold
|
|
weight or primary-color class.
|
|
4. **Field error icon and no stacked halo** — trigger the Validation errors state; assert each
|
|
field's error text is preceded by an `i-lucide-circle-alert` icon in the error color; then
|
|
focus the still-errored Username input and assert only one ring class (the error ring) is
|
|
present — the neutral/primary focus ring class is absent, not merely visually covered.
|
|
5. **Theme select has no chevron, is footer-last** — assert `UColorModeSelect` is the last child
|
|
of the footer's flex row; assert no chevron-down icon element renders inside it.
|
|
6. **Alert renders inside the card** — mount at `/login?reason=expired` and separately at
|
|
`/login?reason=password-changed`; assert the alert element's closest UPageCard/card ancestor is
|
|
the same element that contains the h1 (i.e., the alert is NOT a sibling before the card);
|
|
assert its DOM position is after the title/description block and before the Username field.
|
|
7. **h1 not focused on first load** — mount LoginView fresh (simulating first paint); assert
|
|
`document.activeElement` is not the h1.
|
|
8. **h1 focus on in-app navigation only** — mount AuthShell at /login, then update the `title`
|
|
prop the way an in-app route change to /register/reset/request would (per the existing `watch`
|
|
on `props.title`); assert the h1 now has focus.
|
|
|
|
## Visual (manual verification — `task visual:check -- log-in`, desktop and mobile, light and dark)
|
|
|
|
Reference: `docs/design/source/AuthCard.dc.html` via `RenewCMS Screens Auth.dc.html`, group
|
|
"Log in", all 9 states.
|
|
|
|
- [ ] Card padding is 40px on every side at desktop, and 8px/20px/0 (card) + 0/20px/24px
|
|
(footer) below sm, across all 9 states.
|
|
- [ ] Username, Password and the submit button are 40px tall at desktop and 44px below sm.
|
|
- [ ] "Forgot password?" is muted and underlined in every state that shows it.
|
|
- [ ] In the Validation errors state, both fields show the circle-alert icon and exactly one
|
|
ring around the field (no double ring), light and dark.
|
|
- [ ] The theme select shows icon + label only, no chevron, right-aligned in the footer.
|
|
- [ ] In Session expired and Password changed, the alert sits inside the card, under the
|
|
description, above the Username field, and is visibly dark-tinted (not a light-mode
|
|
background) in dark mode.
|
|
- [ ] Keyboard/focus: on a fresh /login load, nothing is auto-focused to the h1 (initial focus
|
|
stays with the browser/body); following "Forgot password?" to the reset-request screen moves
|
|
focus to that screen's h1, with no visible outline ring at any point.
|
|
|
|
## Manual verification
|
|
|
|
- **AppLogo edge in dark mode** — resolved by the amended
|
|
features/auth_shell_login_conformance.feature: AppLogo shows no edge stroke in either light or
|
|
dark mode, per AuthCard.dc.html's literal `edge: 'transparent'`. No check needed here; see that
|
|
feature's own QA file for the AppLogo assertions.
|