Skip to content

Commit 29b4ff9

Browse files
committed
test(Modal): add tests for component
1 parent 8cfe5c9 commit 29b4ff9

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
import { render, fireEvent } from "@testing-library/react";
3+
import Modal from "../Modal";
4+
5+
describe("Modal", () => {
6+
const closeButtonAriaLabel = "Close modal";
7+
const childrenContent = <span>My content</span>;
8+
9+
it("renders the modal with the correct role", () => {
10+
const { getByTestId } = render(
11+
<Modal show data-testid="modal">
12+
{childrenContent}
13+
</Modal>
14+
);
15+
16+
expect(getByTestId("modal")).toHaveAttribute("role", "dialog");
17+
});
18+
19+
it("renders the modal with the correct aria-modal", () => {
20+
const { getByTestId } = render(
21+
<Modal show data-testid="modal">
22+
{childrenContent}
23+
</Modal>
24+
);
25+
26+
expect(getByTestId("modal")).toHaveAttribute("aria-modal", "true");
27+
});
28+
29+
it("renders the children content correctly", () => {
30+
const { getByText } = render(
31+
<Modal show closeButtonAriaLabel={closeButtonAriaLabel}>
32+
{childrenContent}
33+
</Modal>
34+
);
35+
36+
expect(getByText("My content")).toBeInTheDocument();
37+
});
38+
39+
it("calls onClose when the close button is clicked", () => {
40+
const mockOnClose = jest.fn();
41+
const { getByLabelText } = render(
42+
<Modal show onClose={mockOnClose} closeButtonAriaLabel={closeButtonAriaLabel}>
43+
{childrenContent}
44+
</Modal>
45+
);
46+
47+
fireEvent.click(getByLabelText(closeButtonAriaLabel));
48+
expect(mockOnClose).toHaveBeenCalled();
49+
});
50+
51+
it.todo("does not render when 'show' is false");
52+
53+
it.todo("renders the correct aria-labelledby");
54+
55+
it.todo("renders the correct aria-describedby");
56+
});

0 commit comments

Comments
 (0)