74 lines
5.3 KiB
Markdown
74 lines
5.3 KiB
Markdown
# QA: Nuxt UI shell foundation and router guards
|
|
|
|
## Automated (Vitest + Vue Test Utils, `task test:web`)
|
|
|
|
Mock `useApi` / the `/v1/auth/me` call per case; no real backend, no httptest server.
|
|
|
|
1. **Public route skips session check** — mount the router at /login; assert the mocked
|
|
GET /v1/auth/me function is never invoked, and AuthShell is rendered with no AppBoot skeleton.
|
|
2. **AppBoot shown while GET /v1/auth/me is pending** — mount the router at /home with an
|
|
unresolved GET /v1/auth/me promise; assert the AppBoot skeleton (USkeleton) is present and the
|
|
route's own content is absent; resolve the promise with 200 is_verified true; assert the skeleton
|
|
is gone and the route's content is present.
|
|
3. **Session cached across navigations** — resolve GET /v1/auth/me once (200 is_verified true),
|
|
navigate /home → /article; assert the mock was called exactly once.
|
|
4. **Verified route + verified session** — mock 200 is_verified true, navigate to /article; assert
|
|
the router's current route is /article (no redirect).
|
|
5. **Verified route + unverified session** — mock 200 is_verified false, navigate to /article; assert
|
|
the router redirects to /register/pending.
|
|
6. **Session route + unverified session** — mock 200 is_verified false, navigate to
|
|
/register/pending; assert no redirect.
|
|
7. **No session** — mock a 401, navigate to /article/12/edit; assert redirect to
|
|
/login?redirect=/article/12/edit&reason=expired.
|
|
8. **Root path outcomes** — one test per Examples row: 200 is_verified true → /home, 401 → /login,
|
|
200 is_verified false → /register/pending.
|
|
9. **Boot failure at root renders the Generic error view** — mock GET /v1/auth/me rejecting with a
|
|
500, navigate to /; assert no redirect happens, and the Generic error view renders with title
|
|
"Something went wrong" and text "This page couldn't load. Your saved work is safe. Try again, and
|
|
if it keeps happening, restart the RenewCMS server."; click "Try again"; assert
|
|
GET /v1/auth/me is called a second time.
|
|
10. **Boot failure at a non-root verified route renders the Generic error view** — mock
|
|
GET /v1/auth/me rejecting with a network error, navigate to /article; assert no redirect to
|
|
/login or /register/pending happens, DashboardShell shows the Generic error view instead of
|
|
AppBoot or page content; click "Try again"; assert GET /v1/auth/me is called a second time.
|
|
11. **Placeholder verified routes wire up shell, heading, breadcrumb and active nav** — one test per
|
|
Examples row (/home → "Home", /article → "Articles", /integration → "Integration"): mock 200
|
|
is_verified true, navigate to the path; assert the route renders inside DashboardShell, the page
|
|
heading and breadcrumb both equal the expected title, and the corresponding nav item has
|
|
aria-current="page" while the other two do not.
|
|
12. **AuthShell renders title as h1 and sets document.title** — mount AuthShell with
|
|
title="Log in"; assert an h1 with text "Log in" and document.title === "Log in · RenewCMS".
|
|
13. **AuthShell notice/footer slots** — mount AuthShell with notice and footer slot content; assert
|
|
both render outside/above the card content as specified.
|
|
14. **DashboardShell nav + aria-current** — mount DashboardShell with current route /article; assert
|
|
5 links in order (Home→/home, Articles→/article, Users→/users, Integration→/integration, Settings→/settings), and only the Articles link
|
|
has aria-current="page".
|
|
15. **DashboardShell offline banner** — mock navigator.onLine false, mount DashboardShell; assert
|
|
the offline banner is visible; set navigator.onLine true and dispatch the 'online' event; assert
|
|
it hides.
|
|
|
|
## Visual (manual verification — desktop and mobile, light and dark)
|
|
|
|
Reference: `docs/design/source/RenewCMS Screens Back-office.dc.html`, groups "Boot" and "Global",
|
|
plus the components.md AuthShell/DashboardShell sections.
|
|
|
|
- [ ] AuthShell at desktop (sm+): 400px UPageCard variant="outline", centered, top offset 12vh,
|
|
light and dark.
|
|
- [ ] AuthShell below sm: card loses border, 20px padding fills screen, fields/buttons use xl size,
|
|
light and dark.
|
|
- [ ] AuthShell footer: UColorModeSelect size="sm" plus footer links render outside the card.
|
|
- [ ] DashboardShell desktop: sidebar with RenewCMS logo header, 5 nav items, UserMenu footer;
|
|
collapsing the sidebar leaves a 56px icon rail with tooltips on hover/focus.
|
|
- [ ] DashboardShell mobile (below lg): UDashboardSidebarToggle appears, sidebar becomes a
|
|
slideover, closes after navigating.
|
|
- [ ] DashboardShell active nav item uses the sand-fill/ink-text bend, not Nuxt UI's default
|
|
primary-tinted background.
|
|
- [ ] AppBoot skeleton visual match to the boot board, light and dark.
|
|
- [ ] Generic error view visual match to the Global board's "Generic error" state, desktop and
|
|
mobile, light and dark (breadcrumb "Home", title "Something went wrong", primary "Try again",
|
|
secondary "Go to Home").
|
|
- [ ] Keyboard: first Tab stop on a DashboardShell route is the "Skip to content" link; sidebar is
|
|
a `nav` labeled "Main"; collapse button exposes `aria-expanded`; AuthShell moves focus to its
|
|
h1 on route change; the Generic error view's title gets focus on render.
|
|
- [ ] Favicon renders as the copied favicon.svg mark in the browser tab, dark-aware.
|