Web Testing

Requirement A web frontend MUST use Vitest for pure logic, Playwright for navigation and integration, and the route contract for every address.

Rationale Vitest runs beside the module. Playwright runs against a running stack. Fast tests stay fast. Browser runs prove browser behavior. This realizes litespec/frontend/testing#match-test-level-to-risk.

Requirement A web evidence specification for a use case declaring a refusal MUST reach that refusal and assert it by its Result's code.

Rationale The refusal alert carries the code in the rendered page, so the assertion names it directly. This realizes litespec/frontend/testing#assert-each-declared-refusal-by-its-code.

Example The refusal alert carries the code, so the assertion names it.

await expect(refusalFor(page, "failure/orders.not_found")).toBeVisible({ timeout: AFTER_ACTION });

Requirement A web test MUST NOT replace a library its stack section names.

Rationale The React section names the rendering library, the router, and the query library. The Svelte section names Svelte, SvelteKit, the query library, and the form library. This realizes litespec/frontend/testing#keep-mocks-at-owned-boundaries.

Requirement A web component or logic test that needs HTTP MUST serve its answers through network mocks generated from the published contract.

Rationale A mocked client proves the mock rather than the component. The generated client stays in its production path. This realizes litespec/frontend/testing#use-network-mocks-for-component-tests.

Example The handlers are msw handlers derived from the OpenAPI document and run in the browser worker and the Node server alike. The workspace keeps one mock-generation command that regenerates them.

Requirement A web frontend calling the API MUST hold a Vitest test resolving modules to backend use cases and naming no refused folder.

Rationale The mirror keeps each specification findable from its folder path after a backend use case changes. This realizes litespec/frontend/testing#prove-the-module-mirror-in-a-structure-test.

Example The structure check resolves each folder name against the backend's Application tree.

test("every module folder names a backend use case, and no folder is named for nothing", () => {
  expect(checkModuleStructure(appRoot, applicationRoot)).toEqual([]);
});

Requirement A browser suite MUST run through the Playwright CLI, addressable per route and per file.

Rationale The command line is the interface every runner shares: the developer, the drill, and the integration job. A check that runs only inside an editor plugin or a proxy runner cannot be repeated by the next investigator. This realizes litespec/frontend/testing#run-browser-checks-through-the-command-line.

Example One route contract runs on its own line, against the stack already running.

pnpm --filter @shop/webshop exec playwright test --project=routes --grep "cart keeps the route contract"