mirror of
https://github.com/vernu/textbee.git
synced 2026-07-30 17:07:46 -04:00
- 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>
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 intest/msw/handlers.ts. Unhandled requests throw (onUnhandledRequest: 'error'), so a test can never silently reach a live backend. - Render helper:
test/render.tsxexposesrenderWithProviders/render, which wrap components in the app providers (react-query with retries off, a mockSessionProvider). Importrender,screen,userEventfrom@/test/render. - Fixtures:
test/fixtures.tsis 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_SECRETand a backend URL (localhost:3999) that nothing listens on. e2e/mock-api.tsintercepts every/api/v1/**request and serves the shared fixtures, so no request can reach a real backend.e2e/session.tsmints 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.