mirror of
https://github.com/vernu/textbee.git
synced 2026-07-31 09:28:14 -04:00
8a5f12a6eb
The Get Started card is the activation funnel; this makes it exceptional: - animated progress bar + "x of 6" + momentum copy that changes with progress; per-step time-estimate chips; benefit-led step copy - focus model: completed steps collapse to compact checked rows (check-pop animation), only the active step expands with one primary CTA; staggered entrance; auto-advance when the poll detects a step completed - register_device is now self-serve inline: numbered instructions beside an in-place generate-key + QR panel (reuses the existing key mutation and react-qr-code); help dialog demoted to a "Need help?" fallback - verify_email shows the actual email and an inline resend with a 60s cooldown via the existing sendEmailVerificationEmail endpoint - completion is celebrated (one-time success state with "Send a message" CTA) instead of the card vanishing mid-glance - minimize control collapses the card to a slim resumable progress pill (localStorage), so setup never nags Fail-closed states (bug fixes): - previously a backend failure rendered the checklist from missing data, showing verified users stuck on "Verify your email"; now a status machine (loading/error/ready/hidden/celebrate) only renders the checklist when all three queries succeeded; error shows a quiet retry row - the full-height 6-row loading skeleton is replaced by a compact ~90px placeholder; background poll failures keep last-good data Tests: MSW handlers for onboarding PATCH + resend; RTL tests for the error policy, mid-funnel progress, and all-done progress; e2e asserts the progress bar on Home. Build, 28 unit tests, and 13 e2e green; verified at 375px. Co-Authored-By: Claude Opus 4.8 (1M context) <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.