98 lines
7.4 KiB
Markdown
98 lines
7.4 KiB
Markdown
# QA: Verify account screen
|
|
|
|
## Automated (Vitest + Vue Test Utils, `task test:web`)
|
|
|
|
Mock `useApi` (`POST /v1/auth/verify`, `POST /v1/auth/login`, `DELETE /v1/auth/register`,
|
|
`POST /v1/auth/logout`) and `useToast` per case; no real backend, no httptest server. Mount
|
|
VerifyPage inside AuthShell with a test router whose current route starts at the "c" query the case
|
|
needs; use fake timers for the 800 ms success delay and the 429 countdown.
|
|
|
|
1. **Verifying state** — mount at "/register/validate?c=abc123"; assert the full-card spinner title
|
|
"Verifying your account…" and that `POST /v1/auth/verify` was called exactly once with
|
|
`{ code: 'abc123' }` and `{ onUnauthorized: 'passthrough', onForbidden: 'passthrough' }`.
|
|
2. **Success state** — mock `POST /v1/auth/verify` resolving 200; mock the session store's
|
|
`retry()` to resolve; mount and let it settle; assert the ResultPanel (success, shield-check,
|
|
"Your account is verified", "Taking you to your dashboard…", no actions); assert a toast was
|
|
already raised with title "Your account is verified", description "Welcome to RenewCMS." while
|
|
the path is still /register/validate; advance by 800 ms; assert `retry()` was called and the
|
|
router's current path is /home, with no second toast.
|
|
3. **Invalid or expired state** — mock `POST /v1/auth/verify` resolving 403; assert the ResultPanel
|
|
(error, link-2-off, "This verification link doesn't work", the text and note above) with actions
|
|
"Cancel registration and start over" (primary) and "Log out" (secondary).
|
|
4. **Cancel registration and start over — success** — from state 3, mock
|
|
`DELETE /v1/auth/register` resolving 200; click the action; assert it was called with
|
|
`{ onForbidden: 'passthrough' }` and that no ConfirmDialog was opened; assert the router's current
|
|
path is /register and a toast was raised with title "Registration cancelled", description "You
|
|
can create the owner account again."
|
|
5. **Cancel registration and start over — failure shows an alert, not a redirect** — three
|
|
sub-cases from state 3: (a) `DELETE /v1/auth/register` resolves 403 (already verified elsewhere),
|
|
(b) resolves 500, (c) a rejected fetch. In each, click the action and assert an alert is shown
|
|
with color "error", icon "i-lucide-circle-x", title "Couldn't cancel registration", description
|
|
"Something went wrong on the server. Try again in a moment."; assert the ResultPanel and both of
|
|
its actions ("Cancel registration and start over", "Log out") are still rendered, unchanged;
|
|
assert the router's current path did not change (in particular, sub-case (a) must NOT navigate to
|
|
/home — unlike Pending's own already-verified handling, this screen never redirects on this 403).
|
|
6. **Log out from Invalid or expired** — from state 3, mock `POST /v1/auth/logout` resolving 200;
|
|
click "Log out"; assert the session store's `clear()` was called and the router's current path is
|
|
/login.
|
|
7. **No session state** — mock `POST /v1/auth/verify` resolving 401; assert the form (title "Log in
|
|
to finish verifying", description, Username placeholder "Your username", Password with show/hide,
|
|
submit "Log in and verify") and assert no "Forgot password?" link and no registration footer are
|
|
rendered.
|
|
8. **No session — empty fields are caught on submit** — from state 7, assert the submit button is
|
|
enabled; submit with both fields empty; assert "Use at least 3 characters." and "Enter your
|
|
password." are shown and `POST /v1/auth/login` was not called.
|
|
9. **No session — successful login retries** — from state 7, fill valid credentials; mock
|
|
`POST /v1/auth/login` resolving 200; mock a second `POST /v1/auth/verify` call; submit; assert the
|
|
spinner "Verifying your account…" reappears and the second `POST /v1/auth/verify` call was made
|
|
with the same code and the same passthrough options.
|
|
10. **No session — wrong credentials** — from state 7, mock `POST /v1/auth/login` resolving 403;
|
|
submit "marta" / "wrong-password"; assert the error alert ("That username and password don't
|
|
match", "Check both and try again. Passwords are case-sensitive."), the Password field cleared
|
|
and focused, and that `POST /v1/auth/verify` was not called again.
|
|
11. **No session — too many attempts** — from state 7, mock `POST /v1/auth/login` resolving 429 with
|
|
`Retry-After: 30`; submit; assert the info alert ("Too many attempts", "For your security, wait a
|
|
moment before trying again."), the submit button reading "Try again in 0:30" and disabled;
|
|
advance fake timers 30s; assert it re-enables.
|
|
12. **No session — server/network error** — two sub-cases (500, rejected fetch) from state 7; submit
|
|
valid-looking credentials; assert the error alert ("Couldn't reach RenewCMS", "Check your
|
|
connection and try again.") and that both fields keep their values and re-enable.
|
|
13. **Missing code state** — mount at "/register/validate" (no "c"); assert no request was made
|
|
(neither `POST /v1/auth/verify` nor `POST /v1/auth/login`); assert the ResultPanel (error,
|
|
link-2-off, "This link is incomplete", the text above) with a single secondary action "Go to log
|
|
in"; click it and assert the router's current path is /login.
|
|
|
|
## Visual (manual verification — desktop and mobile, light and dark)
|
|
|
|
Reference: `docs/design/source/RenewCMS Screens Auth.dc.html`, group "Verify". Run
|
|
`task visual:check -- verify` for each state and compare against the board frame.
|
|
|
|
- [ ] Verifying state: the full-card spinner (the only one in the product) matches the board's
|
|
layout exactly, with no title header shown.
|
|
- [ ] Success state: ResultPanel with no actions and the success toast over it, captured before
|
|
the 800 ms redirect (the visual setup freezes timers with `paused: true`).
|
|
- [ ] Invalid or expired state: ResultPanel with note and both actions, button order (primary
|
|
"Cancel registration and start over" first per components.md's safe/primary-on-top rule for
|
|
stacked mobile buttons).
|
|
- [ ] Cancel-failed alert: the error alert renders above the ResultPanel via AuthShell's #notice
|
|
slot, matching Register's own server-error alert styling exactly.
|
|
- [ ] No session state: the trimmed-down log-in form (no forgot-password link, no footer) matches
|
|
the board.
|
|
- [ ] No session, retrying state: identical spinner to Verifying.
|
|
- [ ] Missing code state: ResultPanel with a single secondary action.
|
|
- [ ] Keyboard/focus: focus moves to the ResultPanel title on the Success, Invalid-or-expired, and
|
|
Missing-code states; on No session, focus order is Username → Password → show/hide → submit;
|
|
the spinner's `role="status"` text is announced once, not on every re-render; the cancel-failed
|
|
alert is `role="alert"` and does not steal focus from the ResultPanel title.
|
|
|
|
## Manual verification
|
|
|
|
- **Real POST /v1/auth/verify and POST /v1/auth/login against a running server** — Vitest only mocks
|
|
`useApi`; confirm the real 200/403/401 round-trips (including the actual bcrypt code check and
|
|
2-hour expiry) against `task dev` with a live SQLite file. The endpoint's own contract is already
|
|
covered by `features/account_verification.qa.md` and `features/login_screen.qa.md`; this slice
|
|
only re-verifies the screen consumes it correctly.
|
|
- **Real DELETE /v1/auth/register from this screen** — confirm the 200/403/500 round-trips against a
|
|
live server; the endpoint's own contract is already covered by
|
|
`features/cancel_pending_registration.qa.md`.
|