1
1
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 ' ;
4
4
5
5
import { Checkbox } from './Checkbox' ;
6
6
import { isConformant } from '../../common/isConformant' ;
7
7
import { resetIds } from '@fluentui/utilities' ;
8
- import type { ReactTestRenderer } from 'react-test-renderer' ;
9
8
import type { IRefObject } from '@fluentui/utilities' ;
10
9
import type { ICheckbox } from './Checkbox.types' ;
11
10
@@ -27,41 +26,27 @@ const IndeterminateControlledCheckbox: React.FunctionComponent = () => {
27
26
} ;
28
27
29
28
describe ( 'Checkbox' , ( ) => {
30
- let renderedComponent : ReactTestRenderer | undefined ;
31
- let component : ReactWrapper | undefined ;
32
-
33
29
beforeEach ( ( ) => {
34
30
resetIds ( ) ;
35
31
} ) ;
36
32
37
33
afterEach ( ( ) => {
38
34
checkbox = undefined ;
39
- if ( renderedComponent ) {
40
- renderedComponent . unmount ( ) ;
41
- renderedComponent = undefined ;
42
- }
43
- if ( component ) {
44
- component . unmount ( ) ;
45
- component = undefined ;
46
- }
47
35
} ) ;
48
36
49
37
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 ( ) ;
53
40
} ) ;
54
41
55
42
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 ( ) ;
59
45
} ) ;
60
46
61
47
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 ( ) ;
65
50
} ) ;
66
51
67
52
isConformant ( {
@@ -70,160 +55,150 @@ describe('Checkbox', () => {
70
55
} ) ;
71
56
72
57
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' ) ;
75
62
} ) ;
76
63
77
64
it ( 'defaults to unchecked non-indeterminate' , ( ) => {
78
- component = mount ( < Checkbox componentRef = { checkboxRef } /> ) ;
65
+ const { getByRole } = render ( < Checkbox componentRef = { checkboxRef } /> ) ;
79
66
80
- const input = component . find ( 'input' ) ;
81
- expect ( input . prop ( 'checked' ) ) . toBe ( false ) ;
67
+ expect ( getByRole ( 'checkbox' ) . getAttribute ( 'checked' ) ) . toBeNull ( ) ;
82
68
expect ( checkbox ! . checked ) . toBe ( false ) ;
83
69
expect ( checkbox ! . indeterminate ) . toBe ( false ) ;
84
70
} ) ;
85
71
86
72
it ( 'respects defaultChecked prop' , ( ) => {
87
- component = mount ( < Checkbox defaultChecked componentRef = { checkboxRef } /> ) ;
73
+ const { getByRole } = render ( < Checkbox defaultChecked componentRef = { checkboxRef } /> ) ;
88
74
89
- const input = component . find ( 'input' ) ;
90
- expect ( input . prop ( 'checked' ) ) . toBe ( true ) ;
75
+ expect ( getByRole ( 'checkbox' ) . getAttribute ( 'checked' ) ) . not . toBeNull ( ) ;
91
76
expect ( checkbox ! . checked ) . toBe ( true ) ;
92
77
} ) ;
93
78
94
79
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 ( ) ;
98
83
expect ( checkbox ! . checked ) . toBe ( true ) ;
99
- component . unmount ( ) ;
100
84
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 ( ) ;
104
88
expect ( checkbox ! . checked ) . toBe ( false ) ;
105
89
} ) ;
106
90
107
91
it ( 'respects checked prop' , ( ) => {
108
- component = mount ( < Checkbox checked componentRef = { checkboxRef } /> ) ;
92
+ const { getByRole } = render ( < Checkbox checked componentRef = { checkboxRef } /> ) ;
109
93
110
- const input = component . find ( 'input' ) ;
111
- expect ( input . prop ( 'checked' ) ) . toBe ( true ) ;
94
+ expect ( getByRole ( 'checkbox' ) . getAttribute ( 'checked' ) ) . not . toBeNull ( ) ;
112
95
expect ( checkbox ! . checked ) . toBe ( true ) ;
113
96
} ) ;
114
97
115
98
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 } /> ) ;
117
101
118
- component . setProps ( { checked : false } ) ;
119
- expect ( component . find ( 'input' ) . prop ( 'checked' ) ) . toBe ( false ) ;
102
+ expect ( container . querySelector ( '.is-checked' ) ) . toBeFalsy ( ) ;
120
103
expect ( checkbox ! . checked ) . toBe ( false ) ;
121
104
} ) ;
122
105
123
106
it ( 'automatically updates on change when uncontrolled' , ( ) => {
124
107
const onChange = jest . fn ( ) ;
125
- component = mount ( < Checkbox onChange = { onChange } componentRef = { checkboxRef } /> ) ;
108
+ const { container , getByRole } = render ( < Checkbox onChange = { onChange } componentRef = { checkboxRef } /> ) ;
126
109
127
- component . find ( 'input' ) . simulate ( 'change' ) ;
110
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
128
111
129
- expect ( component . find ( 'input' ) . prop ( ' checked') ) . toBe ( true ) ;
112
+ expect ( container . querySelector ( '.is- checked') ) . toBeTruthy ( ) ;
130
113
expect ( checkbox ! . checked ) . toBe ( true ) ;
131
114
expect ( onChange ) . toHaveBeenCalledTimes ( 1 ) ;
132
115
} ) ;
133
116
134
117
it ( 'does not automatically update on change when controlled' , ( ) => {
135
118
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
+ ) ;
137
122
138
- component . find ( 'input' ) . simulate ( 'change' ) ;
123
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
139
124
140
125
// doesn't update automatically (but calls onChange)
141
- expect ( component . find ( 'input' ) . prop ( ' checked') ) . toBe ( false ) ;
126
+ expect ( container . querySelector ( '.is- checked') ) . toBeFalsy ( ) ;
142
127
expect ( checkbox ! . checked ) . toBe ( false ) ;
143
128
expect ( onChange ) . toHaveBeenCalledTimes ( 1 ) ;
144
129
145
130
// 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 ( ) ;
148
133
expect ( checkbox ! . checked ) . toBe ( true ) ;
149
134
// doesn't call onChange for props update
150
135
expect ( onChange ) . toHaveBeenCalledTimes ( 1 ) ;
151
136
} ) ;
152
137
153
138
it ( 'respects defaultIndeterminate prop' , ( ) => {
154
- component = mount ( < Checkbox defaultIndeterminate componentRef = { checkboxRef } /> ) ;
139
+ render ( < Checkbox defaultIndeterminate componentRef = { checkboxRef } /> ) ;
155
140
156
141
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
157
142
} ) ;
158
143
159
144
it ( 'respects defaultIndeterminate prop when defaultChecked is true' , ( ) => {
160
- component = mount ( < Checkbox defaultIndeterminate defaultChecked componentRef = { checkboxRef } /> ) ;
145
+ render ( < Checkbox defaultIndeterminate defaultChecked componentRef = { checkboxRef } /> ) ;
161
146
162
147
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
163
148
} ) ;
164
149
165
150
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 } /> ) ;
168
153
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
169
- component . unmount ( ) ;
170
154
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 } /> ) ;
173
157
expect ( checkbox ! . checked ) . toBe ( false ) ;
174
158
expect ( checkbox ! . indeterminate ) . toEqual ( false ) ;
175
159
} ) ;
176
160
177
161
it ( 'removes uncontrolled indeterminate state' , ( ) => {
178
- component = mount ( < Checkbox defaultIndeterminate componentRef = { checkboxRef } /> ) ;
162
+ const { container , getByRole } = render ( < Checkbox defaultIndeterminate componentRef = { checkboxRef } /> ) ;
179
163
180
- let input = component . find ( 'input' ) ;
181
- expect ( input . prop ( 'checked' ) ) . toBe ( false ) ;
164
+ expect ( container . querySelector ( '.is-checked' ) ) . toBeFalsy ( ) ;
182
165
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
183
166
184
- input . simulate ( 'change' ) ;
167
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
185
168
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 ( ) ;
189
170
expect ( checkbox ! . indeterminate ) . toEqual ( false ) ;
190
171
} ) ;
191
172
192
173
it ( 'renders with indeterminate when controlled' , ( ) => {
193
- component = mount ( < IndeterminateControlledCheckbox /> ) ;
174
+ const { getByRole } = render ( < IndeterminateControlledCheckbox /> ) ;
194
175
195
- let input = component . find ( 'input' ) ;
196
176
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
197
177
198
- input . simulate ( 'change' , { target : { checked : true } } ) ;
178
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
199
179
200
- input = component . find ( 'input' ) ;
201
180
expect ( checkbox ! . indeterminate ) . toEqual ( false ) ;
202
181
} ) ;
203
182
204
183
it ( 'removes controlled indeterminate' , ( ) => {
205
- component = mount ( < IndeterminateControlledCheckbox /> ) ;
184
+ const { getByRole } = render ( < IndeterminateControlledCheckbox /> ) ;
206
185
207
- let input = component . find ( 'input' ) ;
208
186
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
209
187
expect ( checkbox ! . checked ) . toEqual ( false ) ;
210
188
211
- input . simulate ( 'change' ) ;
189
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
212
190
213
- input = component . find ( 'input' ) ;
214
191
expect ( checkbox ! . indeterminate ) . toEqual ( false ) ;
215
192
expect ( checkbox ! . checked ) . toEqual ( false ) ;
216
193
} ) ;
217
194
218
195
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 } /> ) ;
220
197
221
- let input = component . find ( 'input' ) ;
222
198
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
223
199
224
- input . simulate ( 'change' ) ;
200
+ userEvent . click ( getByRole ( 'checkbox' ) ) ;
225
201
226
- input = component . find ( 'input' ) ;
227
202
expect ( checkbox ! . indeterminate ) . toEqual ( true ) ;
228
203
} ) ;
229
204
} ) ;
0 commit comments