peter
5ba5679239
Under a busy machine (the gate's lanes side by side, 12 busy cores) these went red at random: a press landed while the button was still busy, an answer was settled before it was asked for, a page grew past one wait's budget, a lazy chunk was transformed inside a 1 s wait, focus was taken a frame after the press. They now wait for the condition they depend on, preload the chunks they open, and the tests that do heavy work (whole-repo scans, the type-aware linter, module resets) carry an explicit budget naming that work. The whole suite four times under 12 busy-loop processes: red 4/4 before, 0/4 after.
77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// A form's error is announced (role="alert"), and failing the same way again must be announced again. The
|
|
// clear and the set of a validation failure commit together, so the alert node used to stay untouched on
|
|
// the second attempt and a screen reader said nothing — a press that seemed to do nothing.
|
|
//
|
|
// i18n is mocked to a key-passthrough; the API is stubbed so nothing reaches out.
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return {
|
|
...actual,
|
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
|
};
|
|
});
|
|
|
|
vi.mock("../lib/api", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("../lib/api")>();
|
|
return {
|
|
...actual,
|
|
api: {
|
|
...actual.api,
|
|
authConfig: () => Promise.resolve({ google_enabled: false }),
|
|
me: () => Promise.resolve({ authenticated: false }),
|
|
setupInfo: () => Promise.resolve({ secrets_manageable: false }),
|
|
},
|
|
};
|
|
});
|
|
|
|
import SetupWizard from "./SetupWizard";
|
|
import Welcome from "./Welcome";
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
window.history.replaceState(null, "", "/");
|
|
});
|
|
|
|
// Fails twice the same way; the second alert must be a new node carrying the same message.
|
|
async function failTwice(fail: () => void, message: string) {
|
|
fail();
|
|
const first = await screen.findByRole("alert");
|
|
expect(first.textContent).toBe(message);
|
|
// The wizard's Next is busy until its failed step returns (a tick after the message shows), and a
|
|
// busy button ignores a press: press again only once nothing on the form says it is working.
|
|
await waitFor(() => expect(document.querySelector('[aria-busy="true"]')).toBeNull());
|
|
fail();
|
|
const second = screen.getByRole("alert");
|
|
expect(second.textContent).toBe(message);
|
|
expect(second).not.toBe(first);
|
|
}
|
|
|
|
describe("a form failing the same way twice announces it twice", () => {
|
|
it("the sign-in card", async () => {
|
|
render(
|
|
<Welcome verify={{ outcome: null, email: null, resetPending: false, dismiss: () => {} }} />,
|
|
);
|
|
const email = await screen.findByPlaceholderText("welcome.auth.email");
|
|
fireEvent.change(email, { target: { value: "not-an-address" } });
|
|
await failTwice(() => fireEvent.submit(email.closest("form")!), "welcome.auth.invalidEmail");
|
|
});
|
|
|
|
it("the install wizard, with the step's own message rather than the generic one", async () => {
|
|
window.history.replaceState(null, "", "/?token=setup-token");
|
|
render(<SetupWizard />);
|
|
fireEvent.click(await screen.findByText("setup.nav.next")); // past the intro
|
|
fireEvent.change(await screen.findByPlaceholderText("setup.admin.email"), {
|
|
target: { value: "not-an-address" },
|
|
});
|
|
await failTwice(
|
|
() => fireEvent.click(screen.getByText("setup.nav.next")),
|
|
"setup.admin.invalidEmail",
|
|
);
|
|
});
|
|
});
|