/
Toggle.spec.tsx
105 lines (82 loc) · 3.31 KB
/
Toggle.spec.tsx
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
import React from 'react';
import { render, fireEvent, cleanup } from '@testing-library/react';
import { typeIs } from '@leafygreen-ui/lib';
import Toggle from '.';
afterAll(cleanup);
describe('packages/Toggle', () => {
const className = 'test-checkbox-class';
const { container } = render(
<Toggle className={className} checked={false} />,
);
const controlledContainer = container.firstChild;
if (!typeIs.element(controlledContainer)) {
throw new Error('Could not find controlled container element');
}
const controlledCheckbox = controlledContainer.children[0];
if (!typeIs.input(controlledCheckbox)) {
throw new Error('Could not find controlled checkbox input element');
}
test(`renders "${className}" in the container label's classList`, () => {
expect(controlledContainer.classList.contains(className)).toBe(true);
});
test('checkbox is checked when checked prop is set', () => {
expect(controlledCheckbox.checked).toBe(false);
expect(controlledCheckbox.getAttribute('aria-checked')).toBe('false');
render(<Toggle checked={true} />, { container });
expect(controlledCheckbox.checked).toBe(true);
expect(controlledCheckbox.getAttribute('aria-checked')).toBe('true');
});
test('checkbox is disabled when disabled prop is set', () => {
render(<Toggle disabled={true} checked={false} />, { container });
expect(controlledCheckbox.disabled).toBe(true);
expect(controlledCheckbox.getAttribute('aria-disabled')).toBe('true');
});
// Test controlled checkbox events and checked state
describe('when controlled', () => {
const controlledOnClick = jest.fn();
const controlledOnChange = jest.fn();
render(
<Toggle
className={className}
onClick={controlledOnClick}
onChange={controlledOnChange}
checked={false}
/>,
{ container },
);
fireEvent.click(controlledContainer);
test('onClick fires once when the label is clicked', () => {
expect(controlledOnClick.mock.calls.length).toBe(1);
});
test('onChange fires once when the label is clicked', () => {
expect(controlledOnChange.mock.calls.length).toBe(1);
});
test('checkbox does not become checked when clicked', () => {
expect(controlledCheckbox.checked).toBe(false);
});
});
describe('when uncontrolled', () => {
const uncontrolledOnClick = jest.fn();
const uncontrolledOnChange = jest.fn();
const uncontrolledContainer = render(
<Toggle onClick={uncontrolledOnClick} onChange={uncontrolledOnChange} />,
).container.firstChild;
if (!typeIs.element(uncontrolledContainer)) {
throw new Error('Could not find uncontrolled container element');
}
const uncontrolledCheckbox = uncontrolledContainer.children[0];
if (!typeIs.input(uncontrolledCheckbox)) {
throw new Error('Could not find uncontrolled checkbox input element');
}
fireEvent.click(uncontrolledContainer);
test('onClick fires once when the label is clicked', () => {
expect(uncontrolledOnClick.mock.calls.length).toBe(1);
});
test('onChange fires once when the label is clicked', () => {
expect(uncontrolledOnChange.mock.calls.length).toBe(1);
});
test('checkbox becomes checked when clicked', () => {
expect(uncontrolledCheckbox.checked).toBe(true);
});
});
});