File size: 3,899 Bytes
fd2c364 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
describe("ModalBackdrop", () => {
it("portals out of a transformed ancestor so position: fixed resolves against the viewport", () => {
// Arrange: a transformed ancestor would otherwise become the
// containing block for `position: fixed` descendants and trap the
// modal inside it (the OnboardingModal / InstallServerModal bug).
render(
<div data-testid="transformed-ancestor" style={{ transform: "translateX(0)" }}>
<ModalBackdrop onClose={vi.fn()}>
<p>modal content</p>
</ModalBackdrop>
</div>,
);
// Act
const dialog = screen.getByRole("dialog");
const transformedAncestor = screen.getByTestId("transformed-ancestor");
// Assert
expect(transformedAncestor.contains(dialog)).toBe(false);
expect(document.body.contains(dialog)).toBe(true);
});
it("calls onClose when the user presses Escape", async () => {
// Arrange
const user = userEvent.setup();
const onClose = vi.fn();
render(
<ModalBackdrop onClose={onClose}>
<p>modal content</p>
</ModalBackdrop>,
);
// Act
await user.keyboard("{Escape}");
// Assert
expect(onClose).toHaveBeenCalledTimes(1);
});
it("calls onClose when the backdrop is clicked but not when the content is clicked", async () => {
// Arrange
const user = userEvent.setup();
const onClose = vi.fn();
render(
<ModalBackdrop onClose={onClose}>
<button type="button">inside content</button>
</ModalBackdrop>,
);
// Act: click the content first — this must NOT close.
await user.click(screen.getByRole("button", { name: "inside content" }));
const callsAfterContentClick = onClose.mock.calls.length;
// Act: now click the backdrop overlay (the dialog root's backdrop child).
const dialog = screen.getByRole("dialog");
const backdrop = dialog.firstElementChild as HTMLElement;
await user.click(backdrop);
// Assert
expect(callsAfterContentClick).toBe(0);
expect(onClose).toHaveBeenCalledTimes(1);
});
it("does not call onClose when the backdrop is clicked and closeOnBackdropClick is false", async () => {
const user = userEvent.setup();
const onClose = vi.fn();
render(
<ModalBackdrop onClose={onClose} closeOnBackdropClick={false}>
<button type="button">inside content</button>
</ModalBackdrop>,
);
const dialog = screen.getByRole("dialog");
const backdrop = dialog.firstElementChild as HTMLElement;
await user.click(backdrop);
expect(onClose).not.toHaveBeenCalled();
});
it("stacks above the default modal layer when elevated", () => {
// Arrange: a default backdrop (the layer the onboarding modal uses) and an
// elevated backdrop (the layer the telemetry consent banner opts into).
render(
<>
<ModalBackdrop aria-label="default-modal">
<p>default modal</p>
</ModalBackdrop>
<ModalBackdrop elevated aria-label="elevated-modal">
<p>elevated modal</p>
</ModalBackdrop>
</>,
);
// Act: read the numeric stacking layer each modal renders on. jsdom cannot
// compute paint order, so compare the z-index the overlay carries.
const layerOf = (name: string) =>
Number(
screen
.getByRole("dialog", { name })
.className.match(/z-\[?(\d+)\]?/)?.[1] ?? 0,
);
// Assert: the elevated modal paints above the default one regardless of
// mount order, so the consent banner is never covered by the onboarding modal.
expect(layerOf("elevated-modal")).toBeGreaterThan(layerOf("default-modal"));
});
});
|