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
|
/**
* @vitest-environment jsdom
*/
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, test } from "vitest";
import FoldableBorderedContainerWithCaption from "./FoldableBorderedContainerWithCaption";
afterEach(() => {
cleanup();
});
describe("FoldableBorderedContainerWithCaption", () => {
test("renders caption", () => {
render(
<FoldableBorderedContainerWithCaption caption="Foldable Title">
Content
</FoldableBorderedContainerWithCaption>,
);
expect(screen.getByText("Foldable Title")).toBeDefined();
});
test("shows children by default (open state)", () => {
render(
<FoldableBorderedContainerWithCaption caption="Title">
<div data-testid="child">Visible</div>
</FoldableBorderedContainerWithCaption>,
);
const child = screen.getByTestId("child");
expect(child.parentElement?.className).not.toContain("hidden");
});
test("hides children when toggle button is clicked", () => {
render(
<FoldableBorderedContainerWithCaption caption="Title">
<div data-testid="child">Content</div>
</FoldableBorderedContainerWithCaption>,
);
const toggleButton = screen.getByRole("button");
fireEvent.click(toggleButton);
const child = screen.getByTestId("child");
expect(child.parentElement?.className).toContain("hidden");
});
test("shows children again when toggle button is clicked twice", () => {
render(
<FoldableBorderedContainerWithCaption caption="Title">
<div data-testid="child">Content</div>
</FoldableBorderedContainerWithCaption>,
);
const toggleButton = screen.getByRole("button");
fireEvent.click(toggleButton);
fireEvent.click(toggleButton);
const child = screen.getByTestId("child");
expect(child.parentElement?.className).not.toContain("hidden");
});
});
|
