WK
bb9c4b5582
* fix(tabs): clamp ListContainer chevron scrolling to the scrollable range (#6749) * chore(deps): bump react-aria dependencies (#6752) * chore(deps): bump tailwind-variants to v3.3.1 (#6760) * chore(docs): release note for 3.2.4 * test(react): behavioral testing infra (#6754) * fix(link): expose data-slot on link root * fix(react): put style export condition before default * test(react): behavioral testing infra and suites * chore(testing): own vitest-browser-react and clarify coverage gates * chore: remove pinned version * fix(autocomplete): prevent popover from clipping the last options (#6766) * chore(docs): update release note * fix(styles): prevent subpixel border overflow on badge (#6768) * chore(docs): update release note * fix(styles): allow backdrop click to dismiss modal with scroll outside (#6770) * chore(docs): update release note * fix(tooltip): restore exit animation when swapping between tooltips (#6772) * chore(docs): update release note --------- Co-authored-by: Tyler <56234978+runnerboy22@users.noreply.github.com> Co-authored-by: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import {User, cleanup, render, runAllTimers, screen, setupUser} from "@heroui/testing/helpers";
|
|
|
|
import {ModalFixture} from "./fixtures";
|
|
|
|
const renderModal = (props: {defaultOpen?: boolean; onOpenChange?: (open: boolean) => void} = {}) =>
|
|
render(<ModalFixture {...props} />);
|
|
|
|
describe("Modal", () => {
|
|
let user: ReturnType<typeof setupUser>;
|
|
let testUtilUser: User;
|
|
|
|
beforeEach(() => {
|
|
vi.useFakeTimers({shouldAdvanceTime: true});
|
|
user = setupUser({advanceTimers: vi.advanceTimersByTime});
|
|
testUtilUser = new User({
|
|
interactionType: "mouse",
|
|
advanceTimer: vi.advanceTimersByTime,
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
runAllTimers();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
it("exposes compound slots via Dialog tester", async () => {
|
|
renderModal();
|
|
|
|
const tester = testUtilUser.createTester("Dialog", {
|
|
root: screen.getByRole("button", {name: "Open modal"}),
|
|
overlayType: "modal",
|
|
});
|
|
|
|
expect(tester.getDialog()).toBeNull();
|
|
|
|
await tester.open();
|
|
runAllTimers();
|
|
|
|
const dialog = tester.getDialog();
|
|
|
|
expect(dialog).not.toBeNull();
|
|
expect(dialog).toHaveAttribute("data-slot", "modal-dialog");
|
|
expect(dialog?.className).toEqual(expect.stringContaining("modal__dialog"));
|
|
expect(document.querySelector('[data-slot="modal-backdrop"]')).not.toBeNull();
|
|
expect(document.querySelector('[data-slot="modal-container"]')).not.toBeNull();
|
|
expect(document.querySelector('[data-slot="modal-header"]')).not.toBeNull();
|
|
expect(document.querySelector('[data-slot="modal-body"]')).not.toBeNull();
|
|
expect(document.querySelector('[data-slot="modal-footer"]')).not.toBeNull();
|
|
expect(screen.getByRole("heading", {name: "Welcome"})).toBeInTheDocument();
|
|
|
|
await tester.close();
|
|
runAllTimers();
|
|
|
|
expect(tester.getDialog()).toBeNull();
|
|
});
|
|
|
|
it("supports Escape dismiss", async () => {
|
|
const onOpenChange = vi.fn();
|
|
|
|
renderModal({defaultOpen: true, onOpenChange});
|
|
runAllTimers();
|
|
|
|
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
|
|
|
await user.keyboard("{Escape}");
|
|
runAllTimers();
|
|
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
expect(screen.queryByRole("dialog")).toBeNull();
|
|
});
|
|
|
|
it("supports closing via CloseTrigger", async () => {
|
|
const onOpenChange = vi.fn();
|
|
|
|
renderModal({defaultOpen: true, onOpenChange});
|
|
runAllTimers();
|
|
|
|
await user.click(document.querySelector('[data-slot="modal-close-trigger"]')!);
|
|
runAllTimers();
|
|
|
|
expect(onOpenChange).toHaveBeenCalledWith(false);
|
|
});
|
|
});
|