ci: install Playwright chromium for the storybook vitest project; deterministic in-flight test
CI / web (push) Failing after 4m5s
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:
@@ -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
|
||||||
|
|||||||
@@ -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);
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user