Skip to content

Commit db52017

Browse files
Checkbox (v8): convert tests to use testing-library (#21968)
1 parent aca3983 commit db52017

File tree

2 files changed

+502
-526
lines changed

2 files changed

+502
-526
lines changed
Lines changed: 53 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as React from 'react';
2-
import { create } from '@fluentui/utilities/lib/test';
3-
import { mount, ReactWrapper } from 'enzyme';
2+
import { render } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
44

55
import { Checkbox } from './Checkbox';
66
import { isConformant } from '../../common/isConformant';
77
import { resetIds } from '@fluentui/utilities';
8-
import type { ReactTestRenderer } from 'react-test-renderer';
98
import type { IRefObject } from '@fluentui/utilities';
109
import type { ICheckbox } from './Checkbox.types';
1110

@@ -27,41 +26,27 @@ const IndeterminateControlledCheckbox: React.FunctionComponent = () => {
2726
};
2827

2928
describe('Checkbox', () => {
30-
let renderedComponent: ReactTestRenderer | undefined;
31-
let component: ReactWrapper | undefined;
32-
3329
beforeEach(() => {
3430
resetIds();
3531
});
3632

3733
afterEach(() => {
3834
checkbox = undefined;
39-
if (renderedComponent) {
40-
renderedComponent.unmount();
41-
renderedComponent = undefined;
42-
}
43-
if (component) {
44-
component.unmount();
45-
component = undefined;
46-
}
4735
});
4836

4937
it('renders unchecked correctly', () => {
50-
renderedComponent = create(<Checkbox label="Standard checkbox" />);
51-
const tree = renderedComponent.toJSON();
52-
expect(tree).toMatchSnapshot();
38+
const { container } = render(<Checkbox label="Standard checkbox" />);
39+
expect(container).toMatchSnapshot();
5340
});
5441

5542
it('renders checked correctly', () => {
56-
renderedComponent = create(<Checkbox label="Standard checkbox" checked />);
57-
const tree = renderedComponent.toJSON();
58-
expect(tree).toMatchSnapshot();
43+
const { container } = render(<Checkbox label="Standard checkbox" checked />);
44+
expect(container).toMatchSnapshot();
5945
});
6046

6147
it('renders indeterminate correctly', () => {
62-
renderedComponent = create(<Checkbox label="Standard checkbox" indeterminate />);
63-
const tree = renderedComponent.toJSON();
64-
expect(tree).toMatchSnapshot();
48+
const { container } = render(<Checkbox label="Standard checkbox" indeterminate />);
49+
expect(container).toMatchSnapshot();
6550
});
6651

6752
isConformant({
@@ -70,160 +55,150 @@ describe('Checkbox', () => {
7055
});
7156

7257
it('respects id prop', () => {
73-
component = mount(<Checkbox label="Standard checkbox" ariaDescribedBy="descriptionID" id="my-checkbox" />);
74-
expect(component.find('input').prop('id')).toEqual('my-checkbox');
58+
const { getByRole } = render(
59+
<Checkbox label="Standard checkbox" ariaDescribedBy="descriptionID" id="my-checkbox" />,
60+
);
61+
expect(getByRole('checkbox').id).toEqual('my-checkbox');
7562
});
7663

7764
it('defaults to unchecked non-indeterminate', () => {
78-
component = mount(<Checkbox componentRef={checkboxRef} />);
65+
const { getByRole } = render(<Checkbox componentRef={checkboxRef} />);
7966

80-
const input = component.find('input');
81-
expect(input.prop('checked')).toBe(false);
67+
expect(getByRole('checkbox').getAttribute('checked')).toBeNull();
8268
expect(checkbox!.checked).toBe(false);
8369
expect(checkbox!.indeterminate).toBe(false);
8470
});
8571

8672
it('respects defaultChecked prop', () => {
87-
component = mount(<Checkbox defaultChecked componentRef={checkboxRef} />);
73+
const { getByRole } = render(<Checkbox defaultChecked componentRef={checkboxRef} />);
8874

89-
const input = component.find('input');
90-
expect(input.prop('checked')).toBe(true);
75+
expect(getByRole('checkbox').getAttribute('checked')).not.toBeNull();
9176
expect(checkbox!.checked).toBe(true);
9277
});
9378

9479
it('ignores defaultChecked updates', () => {
95-
component = mount(<Checkbox defaultChecked componentRef={checkboxRef} />);
96-
component.setProps({ defaultChecked: false });
97-
expect(component.find('input').prop('checked')).toBe(true);
80+
const firstCheckbox = render(<Checkbox defaultChecked componentRef={checkboxRef} />);
81+
firstCheckbox.rerender(<Checkbox defaultChecked={false} componentRef={checkboxRef} />);
82+
expect(firstCheckbox.container.querySelector('.is-checked')).toBeTruthy();
9883
expect(checkbox!.checked).toBe(true);
99-
component.unmount();
10084

101-
component = mount(<Checkbox componentRef={checkboxRef} />);
102-
component.setProps({ defaultChecked: true });
103-
expect(component.find('input').prop('checked')).toBe(false);
85+
const secondCheckbox = render(<Checkbox componentRef={checkboxRef} />);
86+
secondCheckbox.rerender(<Checkbox defaultChecked={true} componentRef={checkboxRef} />);
87+
expect(secondCheckbox.container.querySelector('.is-checked')).toBeFalsy();
10488
expect(checkbox!.checked).toBe(false);
10589
});
10690

10791
it('respects checked prop', () => {
108-
component = mount(<Checkbox checked componentRef={checkboxRef} />);
92+
const { getByRole } = render(<Checkbox checked componentRef={checkboxRef} />);
10993

110-
const input = component.find('input');
111-
expect(input.prop('checked')).toBe(true);
94+
expect(getByRole('checkbox').getAttribute('checked')).not.toBeNull();
11295
expect(checkbox!.checked).toBe(true);
11396
});
11497

11598
it('respects checked updates', () => {
116-
component = mount(<Checkbox checked componentRef={checkboxRef} />);
99+
const { container, rerender } = render(<Checkbox checked componentRef={checkboxRef} />);
100+
rerender(<Checkbox checked={false} componentRef={checkboxRef} />);
117101

118-
component.setProps({ checked: false });
119-
expect(component.find('input').prop('checked')).toBe(false);
102+
expect(container.querySelector('.is-checked')).toBeFalsy();
120103
expect(checkbox!.checked).toBe(false);
121104
});
122105

123106
it('automatically updates on change when uncontrolled', () => {
124107
const onChange = jest.fn();
125-
component = mount(<Checkbox onChange={onChange} componentRef={checkboxRef} />);
108+
const { container, getByRole } = render(<Checkbox onChange={onChange} componentRef={checkboxRef} />);
126109

127-
component.find('input').simulate('change');
110+
userEvent.click(getByRole('checkbox'));
128111

129-
expect(component.find('input').prop('checked')).toBe(true);
112+
expect(container.querySelector('.is-checked')).toBeTruthy();
130113
expect(checkbox!.checked).toBe(true);
131114
expect(onChange).toHaveBeenCalledTimes(1);
132115
});
133116

134117
it('does not automatically update on change when controlled', () => {
135118
const onChange = jest.fn();
136-
component = mount(<Checkbox checked={false} onChange={onChange} componentRef={checkboxRef} />);
119+
const { container, getByRole, rerender } = render(
120+
<Checkbox checked={false} onChange={onChange} componentRef={checkboxRef} />,
121+
);
137122

138-
component.find('input').simulate('change');
123+
userEvent.click(getByRole('checkbox'));
139124

140125
// doesn't update automatically (but calls onChange)
141-
expect(component.find('input').prop('checked')).toBe(false);
126+
expect(container.querySelector('.is-checked')).toBeFalsy();
142127
expect(checkbox!.checked).toBe(false);
143128
expect(onChange).toHaveBeenCalledTimes(1);
144129

145130
// updates when props update
146-
component.setProps({ checked: true });
147-
expect(component.find('input').prop('checked')).toBe(true);
131+
rerender(<Checkbox checked={true} onChange={onChange} componentRef={checkboxRef} />);
132+
expect(container.querySelector('.is-checked')).toBeTruthy();
148133
expect(checkbox!.checked).toBe(true);
149134
// doesn't call onChange for props update
150135
expect(onChange).toHaveBeenCalledTimes(1);
151136
});
152137

153138
it('respects defaultIndeterminate prop', () => {
154-
component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
139+
render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
155140

156141
expect(checkbox!.indeterminate).toEqual(true);
157142
});
158143

159144
it('respects defaultIndeterminate prop when defaultChecked is true', () => {
160-
component = mount(<Checkbox defaultIndeterminate defaultChecked componentRef={checkboxRef} />);
145+
render(<Checkbox defaultIndeterminate defaultChecked componentRef={checkboxRef} />);
161146

162147
expect(checkbox!.indeterminate).toEqual(true);
163148
});
164149

165150
it('ignores defaultIndeterminate updates', () => {
166-
component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
167-
component.setProps({ defaultIndeterminate: false });
151+
const firstCheckbox = render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
152+
firstCheckbox.rerender(<Checkbox defaultIndeterminate={false} componentRef={checkboxRef} />);
168153
expect(checkbox!.indeterminate).toEqual(true);
169-
component.unmount();
170154

171-
component = mount(<Checkbox componentRef={checkboxRef} />);
172-
component.setProps({ defaultIndeterminate: true });
155+
const secondCheckbox = render(<Checkbox componentRef={checkboxRef} />);
156+
secondCheckbox.rerender(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
173157
expect(checkbox!.checked).toBe(false);
174158
expect(checkbox!.indeterminate).toEqual(false);
175159
});
176160

177161
it('removes uncontrolled indeterminate state', () => {
178-
component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
162+
const { container, getByRole } = render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
179163

180-
let input = component.find('input');
181-
expect(input.prop('checked')).toBe(false);
164+
expect(container.querySelector('.is-checked')).toBeFalsy();
182165
expect(checkbox!.indeterminate).toEqual(true);
183166

184-
input.simulate('change');
167+
userEvent.click(getByRole('checkbox'));
185168

186-
// get an updated ReactWrapper for the input (otherwise it would be out of sync)
187-
input = component.find('input');
188-
expect(input.prop('checked')).toBe(false);
169+
expect(container.querySelector('.is-checked')).toBeFalsy();
189170
expect(checkbox!.indeterminate).toEqual(false);
190171
});
191172

192173
it('renders with indeterminate when controlled', () => {
193-
component = mount(<IndeterminateControlledCheckbox />);
174+
const { getByRole } = render(<IndeterminateControlledCheckbox />);
194175

195-
let input = component.find('input');
196176
expect(checkbox!.indeterminate).toEqual(true);
197177

198-
input.simulate('change', { target: { checked: true } });
178+
userEvent.click(getByRole('checkbox'));
199179

200-
input = component.find('input');
201180
expect(checkbox!.indeterminate).toEqual(false);
202181
});
203182

204183
it('removes controlled indeterminate', () => {
205-
component = mount(<IndeterminateControlledCheckbox />);
184+
const { getByRole } = render(<IndeterminateControlledCheckbox />);
206185

207-
let input = component.find('input');
208186
expect(checkbox!.indeterminate).toEqual(true);
209187
expect(checkbox!.checked).toEqual(false);
210188

211-
input.simulate('change');
189+
userEvent.click(getByRole('checkbox'));
212190

213-
input = component.find('input');
214191
expect(checkbox!.indeterminate).toEqual(false);
215192
expect(checkbox!.checked).toEqual(false);
216193
});
217194

218195
it("doesn't remove controlled indeterminate when no onChange provided", () => {
219-
component = mount(<Checkbox indeterminate={true} checked={false} componentRef={checkboxRef} />);
196+
const { getByRole } = render(<Checkbox indeterminate={true} checked={false} componentRef={checkboxRef} />);
220197

221-
let input = component.find('input');
222198
expect(checkbox!.indeterminate).toEqual(true);
223199

224-
input.simulate('change');
200+
userEvent.click(getByRole('checkbox'));
225201

226-
input = component.find('input');
227202
expect(checkbox!.indeterminate).toEqual(true);
228203
});
229204
});

0 commit comments

Comments
 (0)