Added Vitest to web/, ready for tests

web/CODE_CONVENTIONS.md

@@ -9,11 +9,13 @@ TypeScript, ESLint and Prettier check what they can (see
 ## Tooling
 
 ```bash
-npm run check          # typecheck, lint and format:check; run before committing
+npm run check          # typecheck, lint, format:check and test; run before committing
 npm run typecheck      # tsc -b: both tsconfigs (plain tsc would check neither)
 npm run lint           # eslint .
 npm run format:check   # prettier --check .
 npm run format         # prettier --write .: formats every file
+npm run test           # vitest run: every test, once
+npm run test:watch     # vitest: reruns the tests affected by each change
 npm run generate:api   # regenerate src/types/api.ts from the backend's OpenAPI description
 npm run build          # typecheck, then vite build into dist/
 npm run sync           # copy dist/ to ../internal/frontend/dist/, which the backend embeds
@@ -367,13 +369,17 @@ external keep its spelling (`Authorization`, CSS `color`).
 
 ## Tests
 
-There are no tests yet. When they're added:
-
-- They use Vitest, which shares Vite's configuration, and sit next to the
-  file they test as `name.test.ts`.
+- Tests use Vitest, which shares Vite's configuration (the `test` block
+  of `vite.config.ts`), and sit next to the file they test as
+  `name.test.ts`. `npm run check` runs them.
+- They run in Node, not a browser: Solid's reactivity works there, but
+  there is no DOM. Browser APIs the code uses (`fetch`, `WebSocket`,
+  `window.location`) are replaced with fakes for the test, with
+  `vi.stubGlobal`, and restored after it.
 - They start with the code in `src/lib/` and `src/api/`, which has no UI
-  to render.
-- Components are tested with `@solidjs/testing-library`, through what
-  the user sees and does (text, roles, clicks), not their internals.
+  to render, then the primitives.
+- When components are tested, it's with `@solidjs/testing-library` (and
+  a DOM such as jsdom), through what the user sees and does (text,
+  roles, clicks), not their internals.
 - No ESLint plugin checks accessibility in Solid well, so component tests
   run an accessibility check (`axe`) on what they render.