RenewCMS/features/nuxt_ui_shell_foundation.qa.md

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.