# Testing

| Command                  | What                                                                                                                                                         |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `pnpm test`              | unit tests (`src/**/*.test.ts`, co-located with the code)                                                                                                    |
| `pnpm test:e2e`          | end-to-end: clones `tests/fixtures/hard` (2 pages) and requires ≥ 99% at 1440 and 390 px, plus every recorded animation. Skipped when Chromium can't launch. |
| `pnpm test:all`          | both                                                                                                                                                         |
| `pnpm test:coverage`     | unit tests with v8 coverage                                                                                                                                  |
| `pnpm check`             | typecheck + oxlint + oxfmt check + knip + unit tests (what CI's first job runs)                                                                              |
| `pnpm benchmark [urls…]` | clone real sites and print a score table                                                                                                                     |

## The hard-cases fixture

`tests/fixtures/hard/` is a two-page site with every edge case the pipeline
has to survive:

- rules inserted with `insertRule` (CSS-in-JS)
- `@import` + relative `url()` + a custom `@font-face`
- 2D canvas and WebGL canvas
- `<div>` inside `<p>` and a `<table>` without `<tbody>`, both created by DOM APIs
- live form state (input value, checkbox, textarea)
- class-toggle reveal, WAAPI reveal, timer-driven carousel
- braces and entities in text, `<pre>` whitespace, inline-block whitespace
- `srcset`/`sizes`, lazy images, SVG `<use xlink:href>`, inline event handlers

Images are generated by `pnpm fixtures:images`.

## When changing the pipeline

1. `pnpm check`
2. `pnpm test:e2e`
3. Clone at least one real Next.js site with `--build` and compare with the
   benchmark table in [fidelity.md](https://dittu.example.com/docs/fidelity.md). Scores must not drop.