60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { describe, expect, test, vi } from "vitest";
|
|
import { render, screen } from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { I18nProvider } from "@lingui/react";
|
|
import { i18n } from "@lingui/core";
|
|
import { Modal } from "../../../components/ui/Modal.tsx";
|
|
|
|
const wrap = (ui: React.ReactNode) =>
|
|
render(<I18nProvider i18n={i18n}>{ui}</I18nProvider>);
|
|
|
|
describe("Modal", () => {
|
|
test("is a labelled dialog that locks the page's scroll", () => {
|
|
wrap(<Modal title="Settings" onClose={() => {}}>body</Modal>);
|
|
expect(screen.getByRole("dialog", { name: "Settings" })).toHaveTextContent(
|
|
"body",
|
|
);
|
|
expect(document.documentElement.style.overflowY).toBe("hidden");
|
|
});
|
|
|
|
test("closes on Escape, the backdrop and the ✕ — not a click inside", async () => {
|
|
const onClose = vi.fn();
|
|
const user = userEvent.setup();
|
|
wrap(
|
|
<Modal title="T" onClose={onClose}>
|
|
<button type="button">inside</button>
|
|
</Modal>,
|
|
);
|
|
await user.click(screen.getByText("inside"));
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
await user.keyboard("{Escape}");
|
|
await user.click(screen.getByRole("button", { name: "Close" }));
|
|
await user.click(document.querySelector(".modal-backdrop")!);
|
|
expect(onClose).toHaveBeenCalledTimes(3);
|
|
});
|
|
|
|
test("onBeforeClose can refuse", async () => {
|
|
const onClose = vi.fn();
|
|
const user = userEvent.setup();
|
|
wrap(
|
|
<Modal title="T" onClose={onClose} onBeforeClose={() => false}>x</Modal>,
|
|
);
|
|
await user.keyboard("{Escape}");
|
|
await user.click(screen.getByRole("button", { name: "Close" }));
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
});
|
|
|
|
test("an Escape something inside already handled is left alone", async () => {
|
|
const onClose = vi.fn();
|
|
const user = userEvent.setup();
|
|
wrap(
|
|
<Modal title="T" onClose={onClose}>
|
|
<input onKeyDown={(e) => e.key === "Escape" && e.preventDefault()} />
|
|
</Modal>,
|
|
);
|
|
await user.click(screen.getByRole("textbox"));
|
|
await user.keyboard("{Escape}");
|
|
expect(onClose).not.toHaveBeenCalled();
|
|
});
|
|
});
|