Files
isra el 18e7d1b3d8 perf(web): make dashboard navigation fast and cut session fetches
- prefetch route-tab links so tab clicks reuse a cached payload instead
  of paying an uncached server round trip each time
- add loading.tsx boundaries (dashboard root and each section) so clicks
  paint within a frame; section-level files keep the header and tabs
  mounted while only the content area swaps
- link the sidebar Account item and the checkout page straight to
  /dashboard/account/billing. The /dashboard/account redirect stub stays
  for old links, but no internal link pays the extra hop anymore. The
  stub also dropped query params, which silently ate the plan-change
  success toast.
- set QueryClient defaults (staleTime 60s, no focus refetch, retry 1);
  mutations already invalidate their keys, so the user's own changes
  stay instant. Device messages and webhook deliveries get a 15s
  staleTime since they change from outside the tab.
- replace the axios getCachedSession TTL cache with a token seeded from
  the server session in Providers and kept in sync by a session bridge.
  Requests attach the token synchronously; /api/auth/session is only a
  deduped fallback, instead of a refetch every 2 minutes with a
  thundering herd on expiry.
- swap the billing card's 16px loading spinner for a card-shaped
  skeleton so the tab no longer looks blank while loading

Tests: interceptor seeding/dedupe/signed-out behavior, provider
defaults and token seeding, nav active-state matching, tab prefetch,
billing loading state, plus e2e coverage for direct-to-billing
navigation and an at-most-one-session-call budget guard.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-22 13:49:14 +03:00
..

Testing

The web app has two test layers. Both run against mocked API data. Tests must never point at a real backend.

Unit / component tests (Vitest + React Testing Library + MSW)

  • Runner: Vitest with jsdom.
  • API mocking: MSW node server (test/msw/server.ts) with handlers in test/msw/handlers.ts. Unhandled requests throw (onUnhandledRequest: 'error'), so a test can never silently reach a live backend.
  • Render helper: test/render.tsx exposes renderWithProviders / render, which wrap components in the app providers (react-query with retries off, a mock SessionProvider). Import render, screen, userEvent from @/test/render.
  • Fixtures: test/fixtures.ts is the single source of truth for mocked API data, shared with the e2e layer.

Commands:

pnpm test          # run once
pnpm test:watch    # watch mode
pnpm coverage      # with coverage report

Place tests next to the code as *.test.tsx or under __tests__/.

End-to-end tests (Playwright)

  • Runner: Playwright, specs in e2e/.
  • The real Next dev server boots on port 3100 with a fixed NEXTAUTH_SECRET and a backend URL (localhost:3999) that nothing listens on.
  • e2e/mock-api.ts intercepts every /api/v1/** request and serves the shared fixtures, so no request can reach a real backend.
  • e2e/session.ts mints a valid NextAuth session cookie so tests run authenticated without the real login flow.

Commands:

pnpm test:e2e      # headless
pnpm test:e2e:ui   # interactive UI

First-time setup downloads the browser: pnpm exec playwright install chromium.

The rule

If a new screen calls a new endpoint, add a handler in test/msw/handlers.ts and a branch in e2e/mock-api.ts, both backed by a fixture in test/fixtures.ts. Never let a test hit the network.