Files
isra el 3e4597294c refactor: turn on strict TypeScript and fix the 63 errors it found
My earlier estimate of 34 errors was wrong, and the reason is worth
recording: tsconfig carried "strictNullChecks": false as a duplicate key
AFTER the strict flag, and an explicit option beats the strict umbrella
even when --strict is passed on the CLI. So the measurement that produced
34 had silently excluded every null-safety error. The real number was 63.
Both duplicate keys are gone; strict: true now stands alone.

Most were implicit-any, but strict caught several genuine type lies:

- SendSmsPayload.deviceId and WebhookData._id were optional while both
  are interpolated into request paths, so an absent value would have hit
  /gateway/devices/undefined/send-sms or PATCH /webhooks/undefined.
- webhook-table's deviceName was typed string while buildDeviceLabel
  returns string | string[] and the Device cell already renders the
  array case. The type never described what the code produced.
- webhooks-section read `webhooks?.data?.length > 0`, comparing
  undefined against 0 while the query was still in flight.
- app-header declared a non-null Session while its own body guarded with
  session?.user throughout. Making the type honest surfaced four
  genuinely unguarded accesses.
- api-keys kept a local ApiKeyRow duplicating the shared ApiKey type, so
  the list callback annotated rows as one type while the hook returned
  the other. ApiKeyRow is now an alias and the two extra fields moved
  onto ApiKey.
- The notifications envelope typed its rows as unknown[], so the
  deliveries table's row type went entirely unchecked. Now a real
  WebhookNotification type.

The react-hook-form cluster (20 of the 63) was one root cause: zod's
.default() makes the input and output types differ, so z.infer (the
output) is not what the resolver takes. Fixed by typing the forms with
z.input and z.output separately, which changes nothing at runtime.

Also bumped target es5 to ES2017, which fixes the Set-iteration error
that made tsc --noEmit fail before any of this. Next compiles browser
output via SWC and its own browserslist, so bundle targeting is
unaffected. Added @types/papaparse and @types/react-syntax-highlighter,
and a typecheck script, since next build does not check test files.

No @ts-expect-error and no new any were used.

Verified: typecheck clean, build clean, 0 lint errors (21 warnings,
unchanged), 155 unit tests, 78 e2e.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-19 04:19:35 +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.