File size: 3,925 Bytes
246d201 |
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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
import { render, screen, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, it, vi, expect } from "vitest";
import { BaseModal } from "#/components/shared/modals/base-modal/base-modal";
describe("BaseModal", () => {
const onOpenChangeMock = vi.fn();
it("should render if the modal is open", () => {
const { rerender } = render(
<BaseModal
isOpen={false}
onOpenChange={onOpenChangeMock}
title="Settings"
/>,
);
expect(screen.queryByText("Settings")).not.toBeInTheDocument();
rerender(
<BaseModal title="Settings" onOpenChange={onOpenChangeMock} isOpen />,
);
expect(screen.getByText("Settings")).toBeInTheDocument();
});
it("should render an optional subtitle", () => {
render(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
subtitle="Subtitle"
/>,
);
expect(screen.getByText("Subtitle")).toBeInTheDocument();
});
it("should render actions", async () => {
const onPrimaryClickMock = vi.fn();
const onSecondaryClickMock = vi.fn();
const primaryAction = {
action: onPrimaryClickMock,
label: "Save",
};
const secondaryAction = {
action: onSecondaryClickMock,
label: "Cancel",
};
render(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
actions={[primaryAction, secondaryAction]}
/>,
);
expect(screen.getByText("Save")).toBeInTheDocument();
expect(screen.getByText("Cancel")).toBeInTheDocument();
await userEvent.click(screen.getByText("Save"));
expect(onPrimaryClickMock).toHaveBeenCalledTimes(1);
await userEvent.click(screen.getByText("Cancel"));
expect(onSecondaryClickMock).toHaveBeenCalledTimes(1);
});
it("should close the modal after an action is performed", async () => {
render(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
actions={[
{
label: "Save",
action: () => {},
closeAfterAction: true,
},
]}
/>,
);
await userEvent.click(screen.getByText("Save"));
expect(onOpenChangeMock).toHaveBeenCalledTimes(1);
});
it("should render children", () => {
render(
<BaseModal isOpen onOpenChange={onOpenChangeMock} title="Settings">
<div>Children</div>
</BaseModal>,
);
expect(screen.getByText("Children")).toBeInTheDocument();
});
it("should disable the action given the condition", () => {
const { rerender } = render(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
actions={[
{
label: "Save",
action: () => {},
isDisabled: true,
},
]}
/>,
);
expect(screen.getByText("Save")).toBeDisabled();
rerender(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
actions={[
{
label: "Save",
action: () => {},
isDisabled: false,
},
]}
/>,
);
expect(screen.getByText("Save")).not.toBeDisabled();
});
it.skip("should not close if the backdrop or escape key is pressed", () => {
render(
<BaseModal
isOpen
onOpenChange={onOpenChangeMock}
title="Settings"
isDismissable={false}
/>,
);
act(() => {
userEvent.keyboard("{esc}");
});
// fails because the nextui component wraps the modal content in an aria-hidden div
expect(screen.getByRole("dialog")).toBeVisible();
});
});
|