ci: install Playwright chromium for the storybook vitest project; deterministic in-flight test
CI / web (push) Failing after 4m5s

- CI runs the @vitest/browser-playwright (storybook) project, which needs the
  chromium browser downloaded — add 'playwright install --with-deps chromium'.
- object-new-page in-flight test held the create mutation open with a 50ms
  delay and raced the pending-state assertion (failed under CI timing); gate it
  on a promise released only after asserting 'saving…', so it's deterministic.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 11:37:20 +02:00
parent 3ae9d87e6e
commit fc170ccf10
2 changed files with 12 additions and 3 deletions
+1
View File
@@ -26,6 +26,7 @@ jobs:
- run: pnpm install --frozen-lockfile - run: pnpm install --frozen-lockfile
- run: pnpm typecheck - run: pnpm typecheck
- run: pnpm lint - run: pnpm lint
- run: pnpm exec playwright install --with-deps chromium
- run: pnpm test - run: pnpm test
- run: pnpm build - run: pnpm build
- run: pnpm check:size - run: pnpm check:size
+11 -3
View File
@@ -1,7 +1,7 @@
import { expect, test } from "vitest"; import { expect, test } from "vitest";
import { screen, waitFor } from "@testing-library/react"; import { screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; import userEvent from "@testing-library/user-event";
import { delay, http, HttpResponse } from "msw"; import { http, HttpResponse } from "msw";
import { Routes, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import { server } from "../test/server"; import { server } from "../test/server";
import { renderApp } from "../test/render"; import { renderApp } from "../test/render";
@@ -72,11 +72,15 @@ test("partial create: fields PUT fails -> edit page shows the 'created' banner a
test("in-flight submit: button disabled + shows Saving…, create fires exactly once on double-click", async () => { test("in-flight submit: button disabled + shows Saving…, create fires exactly once on double-click", async () => {
let postCount = 0; let postCount = 0;
let release!: () => void;
const gate = new Promise<void>((resolve) => {
release = resolve;
});
server.use( server.use(
http.post("/api/admin/objects", async () => { http.post("/api/admin/objects", async () => {
postCount += 1; postCount += 1;
await delay(50); await gate;
return HttpResponse.json({ id: "new-id-3" }, { status: 201 }); return HttpResponse.json({ id: "new-id-3" }, { status: 201 });
}), }),
); );
@@ -91,9 +95,13 @@ test("in-flight submit: button disabled + shows Saving…, create fires exactly
await userEvent.click(button); await userEvent.click(button);
await userEvent.click(button); await userEvent.click(button);
await waitFor(() => expect(screen.getByText(/saving…/i)).toBeInTheDocument()); // The mutation is held open by `gate`, so the pending state is observed
// deterministically (no reliance on a timing window).
expect(await screen.findByText(/saving…/i)).toBeInTheDocument();
expect(screen.getByRole("button", { name: /saving…/i })).toBeDisabled(); expect(screen.getByRole("button", { name: /saving…/i })).toBeDisabled();
release();
await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument()); await waitFor(() => expect(screen.getByText("detail view")).toBeInTheDocument());
expect(postCount).toBe(1); expect(postCount).toBe(1);
}); });