test(components): restore web and html-reporter component tests

[pavelfeldman]

Summary

• Restores the component tests deleted in chore: delete component tests for web and html-reporter #38187 (chip, headerView, testCaseView, expandable, splitView, codeMirrorWrapper, imageDiffView) using the built-in mount fixture and the story-gallery setup from the component-testing skill.
• Stories own the state and provide the callbacks, recording state into a hidden form that tests assert with toHaveValue(). Stories live next to the components; each package hosts a playwright/gallery page served by Vite. test-html-reporter / test-web npm scripts and the Web Components CI job restored.
• mount() now returns a locator for the gallery root — tests scope their queries (component.getByRole(...)). The skill (SKILL.md, references, templates) is updated to both conventions.

[github-actions]

🔴 One failure is caused by this PR — a new expect.fn() test breaks under a frozen clock

Hi, I'm the Playwright bot and I took a first look at the CI failures.

page-evaluate-callback.spec.ts:215 › should record calls to a mock function created with expect.fn() — the test this PR adds — fails on frozen-time-library-chromium-linux because it relies on setTimeout(() => cb('later'), 50) firing, and under the frozen clock that timer never runs. The other three failures are pre-existing flakes with no path to the diff.

Details

This PR adds expect.fn() mock functions and restores component tests. One of the new tests hits a frozen-clock CI project; the rest of the failures are unrelated MCP / leak flakes.

Caused by this PR

• [chromium-page] › page/page-evaluate-callback.spec.ts:215 › should record calls to a mock function created with expect.fn() — a test this PR adds. It schedules the second call with setTimeout(() => cb('later'), 50) and then asserts toHaveBeenCalledWith('later') / toHaveBeenCalledTimes(2). On the frozen-time-library-chromium-linux bot (PW_CLOCK=frozen, clock: 'clock-frozen') there's "no way to inject real setTimeout" — the same reason capabilities.spec.ts:448 skips under frozen time — so the timer never fires and the two-call assertions fail. Gate it like the other clock-sensitive tests, e.g. it.skip(process.env.PW_CLOCK === 'frozen'), or drive the second call without a real timer.

Pre-existing flake / infra

• [webkit-page] › page/page-leaks.spec.ts:164 › waitFor should not leak — flake. In the aggregated CI DB this fails 2 of 435 webkit-page runs across 126 PRs and passes 433; it's green on every other engine (firefox/chromium/electron/android 0 failures). Webkit-only, unrelated to the serializer/matcher/component changes here.

• [chromium] › mcp/http.spec.ts:104 › http transport browser lifecycle (isolated) and [firefox] › mcp/annotate.spec.ts:496 › should disengage annotate mode when --annotate client disconnects — both long-standing MCP flakes that fail across ~133 unrelated PRs on every engine. This PR touches no MCP code.

Only the first one needs a fix; the rest are safe to rerun.

_{Triaged by the Playwright bot - agent run}

[dgozman]

22 please

[dgozman]

v7 please

[github-actions]

Test results for "tests 1"

5 flaky

⚠️ [chromium-page] › page/workers.spec.ts:191 › should attribute network activity for worker inside iframe to the iframe `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/video.spec.ts:736 › screencast › should work with video+trace `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/chromium/oopif.spec.ts:282 › should click `@chromium-ubuntu-22.04-node22`
⚠️ [firefox-library] › library/inspector/cli-codegen-3.spec.ts:255 › cli codegen › should generate frame locators (4) `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-event-request.spec.ts:181 › should return response body when Cross-Origin-Opener-Policy is set `@firefox-ubuntu-22.04-node20`

50043 passed, 1190 skipped

---

Merge workflow run.

[github-actions]

Test results for "MCP"

1 failed
❌ [chrome] › mcp/devtools.spec.ts:74 › browser_hide_highlight @mcp-windows-latest-chrome

7785 passed, 1249 skipped

---

Merge workflow run.

[github-actions]

🟢 CI is clear — the one failure is a pre-existing MCP flake

Hi, I'm the Playwright bot and I took a first look at the CI failures. The latest reports have tests 1 clean (flaky only, no real failures) and MCP with one failure — mcp/devtools.spec.ts:74 › browser_hide_highlight on mcp-windows-latest-chrome. It's a flake, and this PR touches no MCP code, so nothing here reaches the diff.

Details

This PR restores html-reporter/web component tests, adds their stories, makes mount() return a locator, and adds expect.fn(). None of that reaches the MCP server or the browser_hide_highlight devtools tool / the injected x-pw-highlight element the failing assertion waits on.

Pre-existing flake / infra

• [chrome] › mcp/devtools.spec.ts:74 › browser_hide_highlight (mcp-windows-latest-chrome) — flake. In this PR's own MCP run (29860053258, sha 1c170ffa) the same test on the same bot both failed and passed in a single run — the failing shard timed out after 10.9s (expect(locator('x-pw-highlight')).toBeVisible(), element not found, 5s timeout) while a sibling shard passed in 2.3s. That within-run non-determinism is the flake signature. Across the aggregated CI DB the test is otherwise spotless: 0 failures over chrome 358, chromium 356, webkit 359, firefox 349, msedge 112 runs, spanning ~150 PRs — the only red is on this PR's own SHA, and it's a Windows-Chrome timing hiccup, not a diff path.

Safe to rerun.

_{Triaged by the Playwright bot - agent run}