84 lines
5.8 KiB
Markdown
84 lines
5.8 KiB
Markdown
# QA: Password reset confirm screen
|
|
|
|
## Automated (Vitest + Vue Test Utils, `task test:web`)
|
|
|
|
Mock `useApi` (`POST /v1/auth/password-reset/confirm`) per case; no real backend, no httptest
|
|
server. Mount ResetConfirmPage inside AuthShell with a test router whose current route starts at
|
|
the query string each case needs.
|
|
|
|
1. **Default state** — mount at
|
|
"/register/reset/validate?c=abc123&email=marta%40renew.example"; assert heading "Choose a new
|
|
password", description, Email "marta@renew.example" read-only with help "From your reset
|
|
link.", New password empty with checklist "At least 8 characters" unmet, Confirm new password
|
|
empty with checklist "Passwords match" unmet, submit "Change password".
|
|
2. **Too short state** — from state 1, set New password and Confirm new password both to "lime";
|
|
submit; assert `POST /v1/auth/password-reset/confirm` was never called; assert "At least 8
|
|
characters" shows its error state and "Passwords match" shows its met state.
|
|
3. **Mismatch state** — from state 1, set New password to "limewash2026", type "limewash2025"
|
|
into Confirm new password and blur; assert the error "The passwords don't match." and the
|
|
"Passwords match" checklist error state; submit; assert the call was never made and the same
|
|
error is still shown.
|
|
4. **Submitting state** — from state 1, set both password fields to "limewash2026"; mock the call
|
|
with an unresolved promise; submit; assert both fields are disabled and the submit button
|
|
reads "Changing password…" with a loading indicator.
|
|
5. **Success state** — from state 1, set both password fields to "limewash2026"; mock the call
|
|
resolving 200; submit; assert the router's current path is "/login?reason=password-changed"
|
|
(the rendering of that page is covered by `login_screen.qa.md`, not re-asserted here beyond
|
|
the path/query).
|
|
6. **Invalid or expired state** — from state 1, set both password fields to "limewash2026"; mock
|
|
the call resolving 403 with the `apperr.PasswordResetFailedErrorMessage` body; submit; assert
|
|
the form is no longer rendered; assert a ResultPanel (error, link-2-off, "This reset link has
|
|
expired", the text above) with actions "Request a new link" (primary) and "Back to log in"
|
|
(secondary); click each in separate sub-cases and assert the router's current path is
|
|
/register/reset/request and /login respectively.
|
|
7. **Server or network error state** — two sub-cases (500 response, rejected fetch) from state 1,
|
|
with both password fields set to "limewash2026"; submit; assert an error alert with icon
|
|
"i-lucide-circle-x", title "Couldn't reach RenewCMS", description "Check your connection and
|
|
try again." (the same copy `login_screen.qa.md` and `register_screen.qa.md` already assert
|
|
for their own server/network cases); assert the form is still rendered (no ResultPanel);
|
|
assert both password fields still read "limewash2026" and are re-enabled; assert the submit
|
|
button reads "Change password" and is no longer loading.
|
|
8. **Missing parameters state** — three sub-cases, one per Examples row (missing "c", missing
|
|
"email", missing both); mount at the row's path; assert no request was made; assert a
|
|
ResultPanel (error, link-2-off, "This link is incomplete", the text above) with a single
|
|
primary action "Request a new link"; click it and assert the router's current path is
|
|
/register/reset/request.
|
|
| path |
|
|
|----------------------------------------------------------|
|
|
| /register/reset/validate?email=marta%40renew.example |
|
|
| /register/reset/validate?c=abc123 |
|
|
| /register/reset/validate |
|
|
|
|
## Visual (manual verification — desktop and mobile, light and dark)
|
|
|
|
Reference: `docs/design/source/RenewCMS Screens Auth.dc.html`, group "Reset password". Run
|
|
`task visual:check -- reset-password` for each state.
|
|
|
|
- [ ] Default state: read-only Email field styling, both checklist items in their unmet/gray
|
|
state, matches the board exactly.
|
|
- [ ] Too short state: New password's checklist item in its error/red state while Confirm new
|
|
password's stays met/green, since both fields match.
|
|
- [ ] Mismatch state: inline field error under Confirm new password plus its checklist error
|
|
state.
|
|
- [ ] Submitting state: disabled field styling and the loading spinner in the submit button.
|
|
- [ ] Invalid or expired state: ResultPanel with both actions, primary first (components.md's
|
|
safe/primary-on-top rule for stacked mobile buttons).
|
|
- [ ] Server or network error state: error alert (circle-x icon, no close button) above the
|
|
heading, matching Login's/Register's own server-error alert styling exactly, since this
|
|
screen has no board state of its own for it; fields retain their values. This state is not
|
|
covered by `task visual:check`'s per-state board comparison (no board frame exists for it);
|
|
note that gap in the run's report rather than skipping it silently.
|
|
- [ ] Missing parameters state: ResultPanel with a single primary action.
|
|
- [ ] Keyboard/focus: Tab order is New password → show/hide → Confirm new password → show/hide →
|
|
submit; the ResultPanel's title receives focus on both the Invalid-or-expired and
|
|
Missing-parameters states; the mismatch error and the server/network alert are announced
|
|
without stealing focus from the field or the heading, respectively.
|
|
|
|
## Manual verification
|
|
|
|
- **Real POST /v1/auth/password-reset/confirm against a running server** — Vitest only mocks
|
|
`useApi`; confirm the real 200/403 round-trip (including the actual bcrypt code check, 1-hour
|
|
expiry, and single-use clearing) against `task dev` with a live SQLite file. The endpoint's own
|
|
contract is already covered by `features/reset_password.qa.md`; this slice only re-verifies the
|
|
screen consumes it correctly.
|