MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-58

1.5.6 Story-level E2E: shell renders across breakpoints; nav + palette + theme + sign-out all flow (closes the Story)

Done
Description

Estimate: 16m · Depends on: 1.5.4, 1.5.5

The Story-closing E2E proves the shell holds together end-to-end across realistic user journeys. Same shape as Story 1.2.7 / 1.3.6 / 1.4.8 — a Playwright spec that drives the browser through the full surface. Where 1.5.5 covered keyboard + accessibility in isolation, this spec exercises the chrome AS A USER WOULD use it, with mouse + keyboard interleaved.

Spec at tests/e2e/shell-flows.spec.ts covers:

  • Signed-in landing: sign in (use the existing auth-credentials fixture user) → land on /dashboard → assert sidebar visible with project nav, top-nav visible with workspace switcher + theme toggle + "Search" button + user menu.
  • Sidebar navigation: click "Issues" → URL changes to /issues → placeholder page renders → Issues item shows aria-current="page". Repeat for Boards / Reports / Settings.
  • Collapse toggle: click the sidebar collapse button → sidebar width shrinks; reload the page → sidebar stays collapsed (localStorage persistence). Click again → expands; reload → stays expanded.
  • Cmd-k palette → switch workspace: press ⌘K → palette opens → type the alternate workspace's name → ↓ → ↵ → URL+cookie reflect the workspace switch → sidebar's project switcher refreshes to show the new workspace's projects.
  • Cmd-k palette → toggle theme: open palette → type "theme" → ↵ → DOM html[data-theme] attribute flips → reload → preserved.
  • Mobile drawer flow: page.setViewportSize({ width: 375, height: 812 }) → sidebar hides, hamburger appears → click hamburger → drawer slides in with scrim → navigate via drawer item → drawer auto-closes on route change (or click scrim → drawer closes).
  • Sign-out via palette: open palette → "Sign out" → ↵ → redirected to /sign-in → cookie cleared.
  • Sign-out via user menu (parity path): open user menu → "Sign out" → same outcome.
  • Empty-state path: sign in as a user whose workspace has zero projects → sidebar header shows the ProjectsEmptyState CTA inline (NOT in the main panel); sidebar project-scoped nav is hidden.

Story-level verification recipe (manual, ≤10 minutes): pull main, pnpm install && pnpm dev, sign in, walk the spec's scenarios interactively. Spot-check on a real iPad-sized viewport (the only test breakpoint below md the spec doesn't cover automatically).

If any scenario fails: fix the bug in this Subtask if it's a shell-level regression; log a finding if it points at a deeper service-layer issue (per mistake #27).

Acceptance criteria

  • tests/e2e/shell-flows.spec.ts covers every bullet in the scenario list above; each scenario is its own test() block named for the journey it exercises.
  • Mobile-drawer scenario uses page.setViewportSize to drop below md (768px) and asserts the drawer is the rendered variant.
  • Workspace-switch via palette scenario asserts the cookie change AND the sidebar's project list refresh.
  • Theme-toggle scenario asserts the DOM attribute change AND localStorage persistence across reload.
  • Sign-out scenarios cover BOTH the palette path and the user-menu path; both lead to /sign-in.
  • Story-level verification recipe reproduces locally in <10 min.
  • All quality gates green; CI green; existing E2E suite (auth + workspace-flows + projects-flow + work-items-isolation + shell-a11y + shell-keyboard) stays green.
  • Any cross-Subtask issue surfaced during verification logged in PRODECT_FINDINGS.md.

Context refs

  • tests/e2e/workspace-flows.spec.ts + projects-flow.spec.ts — existing browser-driven E2E patterns to mirror
  • tests/e2e/_helpers/db-reset.ts + email-capture.ts — the helpers
  • The full shell stack (AppLayout / Sidebar / SidebarDrawer / TopNav / ThemeToggle / CommandPalette / AppCommandPalette / ShortcutsCheatsheet)
  • The 1.5.5 a11y + keyboard specs — to NOT duplicate; this spec is journey-driven, not invariant-driven
Status
Done
Type
Sub-task