Skip to content

Commit cc2a422

Browse files
mlaursenmlaursen
committed
test(form): Added tests for useIndeterminateChecked
1 parent 9ab67bf commit cc2a422

File tree

2 files changed

+376
-40
lines changed

2 files changed

+376
-40
lines changed

‎packages/form/src/__tests__/useIndeterminateChecked.tsx‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
import React from "react";
2+
import { fireEvent, render } from "@testing-library/react";
3+
4+
import { useIndeterminateChecked } from "../useIndeterminateChecked";
5+
import { Checkbox } from "../toggle";
6+
import { MenuItemCheckbox } from "../menu/MenuItemCheckbox";
7+
8+
const values = ["a", "b", "c", "d"] as const;
9+
const LABELS = {
10+
a: "Label 1",
11+
b: "Label 2",
12+
c: "Label 3",
13+
d: "Label 4",
14+
} as const;
15+
16+
describe("useIndeterminateChecked", () => {
17+
it("should work with normal checkboxes", () => {
18+
function Test() {
19+
const { rootProps, getProps } = useIndeterminateChecked(values);
20+
return (
21+
<>
22+
<Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
23+
{values.map((value, i) => (
24+
<Checkbox
25+
id={`valued-checkbox-${i + 1}`}
26+
{...getProps(value)}
27+
key={value}
28+
label={LABELS[value]}
29+
/>
30+
))}
31+
</>
32+
);
33+
}
34+
const { getByRole } = render(<Test />);
35+
36+
const root = getByRole("checkbox", {
37+
name: "Toggle All",
38+
}) as HTMLInputElement;
39+
const checkbox1 = getByRole("checkbox", {
40+
name: "Label 1",
41+
}) as HTMLInputElement;
42+
const checkbox2 = getByRole("checkbox", {
43+
name: "Label 2",
44+
}) as HTMLInputElement;
45+
const checkbox3 = getByRole("checkbox", {
46+
name: "Label 3",
47+
}) as HTMLInputElement;
48+
const checkbox4 = getByRole("checkbox", {
49+
name: "Label 4",
50+
}) as HTMLInputElement;
51+
52+
expect(root.checked).toBe(false);
53+
expect(checkbox1.checked).toBe(false);
54+
expect(checkbox2.checked).toBe(false);
55+
expect(checkbox3.checked).toBe(false);
56+
expect(checkbox4.checked).toBe(false);
57+
58+
fireEvent.click(root);
59+
expect(root.checked).toBe(true);
60+
expect(checkbox1.checked).toBe(true);
61+
expect(checkbox2.checked).toBe(true);
62+
expect(checkbox3.checked).toBe(true);
63+
expect(checkbox4.checked).toBe(true);
64+
65+
fireEvent.click(checkbox1);
66+
expect(root.checked).toBe(true);
67+
expect(checkbox1.checked).toBe(false);
68+
expect(checkbox2.checked).toBe(true);
69+
expect(checkbox3.checked).toBe(true);
70+
expect(checkbox4.checked).toBe(true);
71+
72+
fireEvent.click(root);
73+
expect(root.checked).toBe(true);
74+
expect(checkbox1.checked).toBe(true);
75+
expect(checkbox2.checked).toBe(true);
76+
expect(checkbox3.checked).toBe(true);
77+
expect(checkbox4.checked).toBe(true);
78+
79+
fireEvent.click(root);
80+
expect(root.checked).toBe(false);
81+
expect(checkbox1.checked).toBe(false);
82+
expect(checkbox2.checked).toBe(false);
83+
expect(checkbox3.checked).toBe(false);
84+
expect(checkbox4.checked).toBe(false);
85+
86+
fireEvent.click(checkbox2);
87+
expect(root.checked).toBe(true);
88+
expect(checkbox1.checked).toBe(false);
89+
expect(checkbox2.checked).toBe(true);
90+
expect(checkbox3.checked).toBe(false);
91+
expect(checkbox4.checked).toBe(false);
92+
});
93+
94+
it("should work for MenuItemCheckbox", () => {
95+
function Test() {
96+
const { rootProps, getProps } = useIndeterminateChecked(values, {
97+
menu: true,
98+
});
99+
return (
100+
<>
101+
<MenuItemCheckbox id="checkbox-1" {...rootProps}>
102+
Toggle All
103+
</MenuItemCheckbox>
104+
{values.map((value, i) => (
105+
<MenuItemCheckbox
106+
id={`valued-checkbox-${i + 1}`}
107+
{...getProps(value)}
108+
key={value}
109+
>
110+
{LABELS[value]}
111+
</MenuItemCheckbox>
112+
))}
113+
</>
114+
);
115+
}
116+
117+
const { getByRole } = render(<Test />);
118+
119+
const root = getByRole("menuitemcheckbox", {
120+
name: "Toggle All",
121+
}) as HTMLInputElement;
122+
const checkbox1 = getByRole("menuitemcheckbox", {
123+
name: "Label 1",
124+
}) as HTMLInputElement;
125+
const checkbox2 = getByRole("menuitemcheckbox", {
126+
name: "Label 2",
127+
}) as HTMLInputElement;
128+
const checkbox3 = getByRole("menuitemcheckbox", {
129+
name: "Label 3",
130+
}) as HTMLInputElement;
131+
const checkbox4 = getByRole("menuitemcheckbox", {
132+
name: "Label 4",
133+
}) as HTMLInputElement;
134+
135+
expect(root).toHaveAttribute("aria-checked", "false");
136+
expect(checkbox1).toHaveAttribute("aria-checked", "false");
137+
expect(checkbox2).toHaveAttribute("aria-checked", "false");
138+
expect(checkbox3).toHaveAttribute("aria-checked", "false");
139+
expect(checkbox4).toHaveAttribute("aria-checked", "false");
140+
141+
fireEvent.click(root);
142+
expect(root).toHaveAttribute("aria-checked", "true");
143+
expect(checkbox1).toHaveAttribute("aria-checked", "true");
144+
expect(checkbox2).toHaveAttribute("aria-checked", "true");
145+
expect(checkbox3).toHaveAttribute("aria-checked", "true");
146+
expect(checkbox4).toHaveAttribute("aria-checked", "true");
147+
148+
fireEvent.click(checkbox1);
149+
expect(root).toHaveAttribute("aria-checked", "true");
150+
expect(checkbox1).toHaveAttribute("aria-checked", "false");
151+
expect(checkbox2).toHaveAttribute("aria-checked", "true");
152+
expect(checkbox3).toHaveAttribute("aria-checked", "true");
153+
expect(checkbox4).toHaveAttribute("aria-checked", "true");
154+
155+
fireEvent.click(root);
156+
expect(root).toHaveAttribute("aria-checked", "true");
157+
expect(checkbox1).toHaveAttribute("aria-checked", "true");
158+
expect(checkbox2).toHaveAttribute("aria-checked", "true");
159+
expect(checkbox3).toHaveAttribute("aria-checked", "true");
160+
expect(checkbox4).toHaveAttribute("aria-checked", "true");
161+
162+
fireEvent.click(root);
163+
expect(root).toHaveAttribute("aria-checked", "false");
164+
expect(checkbox1).toHaveAttribute("aria-checked", "false");
165+
expect(checkbox2).toHaveAttribute("aria-checked", "false");
166+
expect(checkbox3).toHaveAttribute("aria-checked", "false");
167+
expect(checkbox4).toHaveAttribute("aria-checked", "false");
168+
169+
fireEvent.click(checkbox2);
170+
expect(root).toHaveAttribute("aria-checked", "true");
171+
expect(checkbox1).toHaveAttribute("aria-checked", "false");
172+
expect(checkbox2).toHaveAttribute("aria-checked", "true");
173+
expect(checkbox3).toHaveAttribute("aria-checked", "false");
174+
expect(checkbox4).toHaveAttribute("aria-checked", "false");
175+
});
176+
177+
it("should allow for default values or another onChange handler", () => {
178+
const onChange = jest.fn();
179+
const defaultCheckedValues = ["b"] as const;
180+
function Test() {
181+
const { rootProps, getProps } = useIndeterminateChecked(
182+
values,
183+
defaultCheckedValues,
184+
onChange
185+
);
186+
return (
187+
<>
188+
<Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
189+
{values.map((value, i) => (
190+
<Checkbox
191+
id={`valued-checkbox-${i + 1}`}
192+
{...getProps(value)}
193+
key={value}
194+
label={LABELS[value]}
195+
/>
196+
))}
197+
</>
198+
);
199+
}
200+
const { getByRole } = render(<Test />);
201+
const root = getByRole("checkbox", {
202+
name: "Toggle All",
203+
}) as HTMLInputElement;
204+
const checkbox1 = getByRole("checkbox", {
205+
name: "Label 1",
206+
}) as HTMLInputElement;
207+
const checkbox2 = getByRole("checkbox", {
208+
name: "Label 2",
209+
}) as HTMLInputElement;
210+
const checkbox3 = getByRole("checkbox", {
211+
name: "Label 3",
212+
}) as HTMLInputElement;
213+
const checkbox4 = getByRole("checkbox", {
214+
name: "Label 4",
215+
}) as HTMLInputElement;
216+
217+
expect(root.checked).toBe(true);
218+
expect(checkbox1.checked).toBe(false);
219+
expect(checkbox2.checked).toBe(true);
220+
expect(checkbox3.checked).toBe(false);
221+
expect(checkbox4.checked).toBe(false);
222+
223+
fireEvent.click(checkbox1);
224+
expect(onChange).toBeCalledWith(["b", "a"]);
225+
226+
expect(root.checked).toBe(true);
227+
expect(checkbox1.checked).toBe(true);
228+
expect(checkbox2.checked).toBe(true);
229+
expect(checkbox3.checked).toBe(false);
230+
expect(checkbox4.checked).toBe(false);
231+
});
232+
233+
it("should allow for default values or another onChange handler with an options object", () => {
234+
const onChange = jest.fn();
235+
const defaultCheckedValues = ["b"] as const;
236+
function Test() {
237+
const { rootProps, getProps } = useIndeterminateChecked(values, {
238+
onChange,
239+
defaultCheckedValues,
240+
});
241+
242+
return (
243+
<>
244+
<Checkbox id="checkbox-1" label="Toggle All" {...rootProps} />
245+
{values.map((value, i) => (
246+
<Checkbox
247+
id={`valued-checkbox-${i + 1}`}
248+
{...getProps(value)}
249+
key={value}
250+
label={LABELS[value]}
251+
/>
252+
))}
253+
</>
254+
);
255+
}
256+
const { getByRole } = render(<Test />);
257+
const root = getByRole("checkbox", {
258+
name: "Toggle All",
259+
}) as HTMLInputElement;
260+
const checkbox1 = getByRole("checkbox", {
261+
name: "Label 1",
262+
}) as HTMLInputElement;
263+
const checkbox2 = getByRole("checkbox", {
264+
name: "Label 2",
265+
}) as HTMLInputElement;
266+
const checkbox3 = getByRole("checkbox", {
267+
name: "Label 3",
268+
}) as HTMLInputElement;
269+
const checkbox4 = getByRole("checkbox", {
270+
name: "Label 4",
271+
}) as HTMLInputElement;
272+
273+
expect(root.checked).toBe(true);
274+
expect(checkbox1.checked).toBe(false);
275+
expect(checkbox2.checked).toBe(true);
276+
expect(checkbox3.checked).toBe(false);
277+
expect(checkbox4.checked).toBe(false);
278+
279+
fireEvent.click(checkbox1);
280+
expect(onChange).toBeCalledWith(["b", "a"]);
281+
282+
expect(root.checked).toBe(true);
283+
expect(checkbox1.checked).toBe(true);
284+
expect(checkbox2.checked).toBe(true);
285+
expect(checkbox3.checked).toBe(false);
286+
expect(checkbox4.checked).toBe(false);
287+
});
288+
});

0 commit comments

Comments
 (0)