@@ -2,7 +2,7 @@ import { fireEvent, render } from '@testing-library/react';
22import React from 'react' ;
33import Cascader from '../src' ;
44import { addressOptions } from './demoOptions' ;
5- import { mount } from './enzyme ' ;
5+ import { clickOption } from './util ' ;
66
77describe ( 'Cascader.Checkable' , ( ) => {
88 const options = [
@@ -34,15 +34,16 @@ describe('Cascader.Checkable', () => {
3434
3535 it ( 'customize' , ( ) => {
3636 const onChange = jest . fn ( ) ;
37- const wrapper = mount ( < Cascader options = { options } onChange = { onChange } open checkable /> ) ;
37+ const { container } = render ( < Cascader options = { options } onChange = { onChange } open checkable /> ) ;
3838
39- expect ( wrapper . exists ( '.rc-cascader-checkbox' ) ) . toBeTruthy ( ) ;
40- expect ( wrapper . exists ( '.rc-cascader-checkbox-checked' ) ) . toBeFalsy ( ) ;
41- expect ( wrapper . exists ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeFalsy ( ) ;
39+ expect ( container . querySelector ( '.rc-cascader-checkbox' ) ) . toBeTruthy ( ) ;
40+ expect ( container . querySelector ( '.rc-cascader-checkbox-checked' ) ) . toBeFalsy ( ) ;
41+ expect ( container . querySelector ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeFalsy ( ) ;
4242
4343 // Check light
44- wrapper . find ( '.rc-cascader-checkbox' ) . first ( ) . simulate ( 'click' ) ;
45- expect ( wrapper . exists ( '.rc-cascader-checkbox-checked' ) ) . toBeTruthy ( ) ;
44+ const checkboxes = container . querySelectorAll ( '.rc-cascader-checkbox' ) ;
45+ fireEvent . click ( checkboxes [ 0 ] ) ;
46+ expect ( container . querySelector ( '.rc-cascader-checkbox-checked' ) ) . toBeTruthy ( ) ;
4647 expect ( onChange ) . toHaveBeenCalledWith (
4748 [ [ 'light' ] ] ,
4849 [ [ expect . objectContaining ( { value : 'light' } ) ] ] ,
@@ -51,13 +52,17 @@ describe('Cascader.Checkable', () => {
5152 onChange . mockReset ( ) ;
5253
5354 // Open bamboo > little
54- wrapper . clickOption ( 0 , 1 ) ;
55- wrapper . clickOption ( 1 , 0 ) ;
55+ clickOption ( container , 0 , 1 ) ; // Click bamboo
56+ clickOption ( container , 1 , 0 ) ; // Click little
5657
57- // Check cards
58- wrapper . clickOption ( 2 , 1 ) ;
59- expect ( wrapper . find ( '.rc-cascader-checkbox-indeterminate' ) ) . toHaveLength ( 2 ) ;
60- expect ( wrapper . exists ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeTruthy ( ) ;
58+ // Check cards (index 1 in third menu)
59+ clickOption ( container , 2 , 1 ) ; // Click cards
60+
61+ const indeterminateCheckboxes = container . querySelectorAll (
62+ '.rc-cascader-checkbox-indeterminate' ,
63+ ) ;
64+ expect ( indeterminateCheckboxes ) . toHaveLength ( 2 ) ;
65+ expect ( container . querySelector ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeTruthy ( ) ;
6166 expect ( onChange ) . toHaveBeenCalledWith (
6267 [
6368 // Light
@@ -77,10 +82,15 @@ describe('Cascader.Checkable', () => {
7782 ] ,
7883 ) ;
7984
80- // Check fish
81- wrapper . clickOption ( 2 , 0 ) ;
82- expect ( wrapper . find ( '.rc-cascader-checkbox-indeterminate' ) ) . toHaveLength ( 0 ) ;
83- expect ( wrapper . find ( '.rc-cascader-checkbox-checked' ) ) . toHaveLength ( 5 ) ;
85+ // Check fish (index 0 in third menu)
86+ clickOption ( container , 2 , 0 ) ; // Click fish
87+
88+ const finalIndeterminateCheckboxes = container . querySelectorAll (
89+ '.rc-cascader-checkbox-indeterminate' ,
90+ ) ;
91+ expect ( finalIndeterminateCheckboxes ) . toHaveLength ( 0 ) ;
92+ const checkedCheckboxes = container . querySelectorAll ( '.rc-cascader-checkbox-checked' ) ;
93+ expect ( checkedCheckboxes ) . toHaveLength ( 5 ) ;
8494 expect ( onChange ) . toHaveBeenCalledWith (
8595 [
8696 // Light
@@ -98,22 +108,23 @@ describe('Cascader.Checkable', () => {
98108 } ) ;
99109 it ( 'click checkbox invoke one onChange' , ( ) => {
100110 const onChange = jest . fn ( ) ;
101- const wrapper = mount ( < Cascader options = { options } onChange = { onChange } open checkable /> ) ;
111+ const { container } = render ( < Cascader options = { options } onChange = { onChange } open checkable /> ) ;
102112
103- expect ( wrapper . exists ( '.rc-cascader-checkbox' ) ) . toBeTruthy ( ) ;
104- expect ( wrapper . exists ( '.rc-cascader-checkbox-checked' ) ) . toBeFalsy ( ) ;
105- expect ( wrapper . exists ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeFalsy ( ) ;
113+ expect ( container . querySelector ( '.rc-cascader-checkbox' ) ) . toBeTruthy ( ) ;
114+ expect ( container . querySelector ( '.rc-cascader-checkbox-checked' ) ) . toBeFalsy ( ) ;
115+ expect ( container . querySelector ( '.rc-cascader-checkbox-indeterminate' ) ) . toBeFalsy ( ) ;
106116
107117 // Check checkbox
108- wrapper . find ( '.rc-cascader-checkbox' ) . first ( ) . simulate ( 'click' ) ;
109- expect ( wrapper . exists ( '.rc-cascader-checkbox-checked' ) ) . toBeTruthy ( ) ;
118+ const checkboxes = container . querySelectorAll ( '.rc-cascader-checkbox' ) ;
119+ fireEvent . click ( checkboxes [ 0 ] ) ;
120+ expect ( container . querySelector ( '.rc-cascader-checkbox-checked' ) ) . toBeTruthy ( ) ;
110121 expect ( onChange ) . toHaveBeenCalledTimes ( 1 ) ;
111122 } ) ;
112123
113124 it ( 'merge checked options' , ( ) => {
114125 const onChange = jest . fn ( ) ;
115126
116- const wrapper = mount (
127+ const { container } = render (
117128 < Cascader
118129 checkable
119130 open
@@ -138,48 +149,51 @@ describe('Cascader.Checkable', () => {
138149 ) ;
139150
140151 // Open parent
141- wrapper . find ( '.rc-cascader-menu-item-content' ) . first ( ) . simulate ( 'click' ) ;
152+ clickOption ( container , 0 , 0 ) ;
142153
143154 // Check child1
144- wrapper . find ( 'span.rc-cascader-checkbox' ) . at ( 1 ) . simulate ( 'click' ) ;
155+ const checkboxes = container . querySelectorAll ( 'span.rc-cascader-checkbox' ) ;
156+ fireEvent . click ( checkboxes [ 1 ] ) ;
145157 expect ( onChange ) . toHaveBeenCalledWith ( [ [ 'parent' , 'child1' ] ] , expect . anything ( ) ) ;
146158
147159 // Check child2
148160 onChange . mockReset ( ) ;
149- wrapper . find ( 'span.rc-cascader-checkbox' ) . at ( 2 ) . simulate ( 'click' ) ;
161+ fireEvent . click ( checkboxes [ 2 ] ) ;
150162 expect ( onChange ) . toHaveBeenCalledWith ( [ [ 'parent' ] ] , expect . anything ( ) ) ;
151163
152164 // Uncheck child1
153165 onChange . mockReset ( ) ;
154- wrapper . find ( 'span.rc-cascader-checkbox' ) . at ( 1 ) . simulate ( 'click' ) ;
166+ fireEvent . click ( checkboxes [ 1 ] ) ;
155167 expect ( onChange ) . toHaveBeenCalledWith ( [ [ 'parent' , 'child2' ] ] , expect . anything ( ) ) ;
156168 } ) ;
157169
158170 // https://github.com/ant-design/ant-design/issues/33302
159171 it ( 'should not display checkbox when children is empty' , ( ) => {
160- const wrapper = mount (
172+ const { container } = render (
161173 < Cascader checkable options = { [ ] } >
162174 < input readOnly />
163175 </ Cascader > ,
164176 ) ;
165- wrapper . find ( 'input' ) . simulate ( 'click' ) ;
166- const menus = wrapper . find ( '.rc-cascader-menu' ) ;
167- expect ( menus . find ( '.rc-cascader-checkbox' ) . length ) . toBe ( 0 ) ;
177+ const input = container . querySelector ( 'input' ) ;
178+ fireEvent . click ( input ! ) ;
179+ const checkboxes = container . querySelectorAll ( '.rc-cascader-checkbox' ) ;
180+ expect ( checkboxes . length ) . toBe ( 0 ) ;
168181 } ) ;
169182
170183 it ( 'should work with custom checkable' , ( ) => {
171- const wrapper = mount (
184+ const { container } = render (
172185 < Cascader
173186 checkable = { < span className = "my-custom-checkbox" > 0</ span > }
174187 open
175188 options = { addressOptions }
176189 /> ,
177190 ) ;
178- expect ( wrapper . find ( '.my-custom-checkbox' ) ) . toHaveLength ( 3 ) ;
191+ const customCheckboxes = container . querySelectorAll ( '.my-custom-checkbox' ) ;
192+ expect ( customCheckboxes ) . toHaveLength ( 3 ) ;
179193 } ) ;
180194
181195 it ( 'should be correct expression with disableCheckbox' , ( ) => {
182- const wrapper = mount (
196+ const { container } = render (
183197 < Cascader
184198 checkable = { true }
185199 open
@@ -206,22 +220,30 @@ describe('Cascader.Checkable', () => {
206220 ) ;
207221
208222 // disabled className
209- wrapper . find ( '.rc-cascader-menu-item' ) . simulate ( 'click' ) ;
210- expect ( wrapper . find ( '.rc-cascader-menu-item' ) ) . toHaveLength ( 4 ) ;
211- expect ( wrapper . find ( '.rc-cascader-checkbox-disabled' ) ) . toHaveLength ( 1 ) ;
223+ const menuItems = container . querySelectorAll ( '.rc-cascader-menu-item' ) ;
224+ fireEvent . click ( menuItems [ 0 ] ) ;
225+
226+ // After clicking, we should have the parent item and its children
227+ const updatedMenuItems = container . querySelectorAll ( '.rc-cascader-menu-item' ) ;
228+ expect ( updatedMenuItems ) . toHaveLength ( 4 ) ;
229+ const disabledCheckboxes = container . querySelectorAll ( '.rc-cascader-checkbox-disabled' ) ;
230+ expect ( disabledCheckboxes ) . toHaveLength ( 1 ) ;
212231
213232 // click disableCkeckbox
214- wrapper . find ( '.rc-cascader-menu-item' ) . at ( 1 ) . simulate ( 'click' ) ;
215- expect ( wrapper . find ( '.rc-cascader-checkbox-checked' ) ) . toHaveLength ( 0 ) ;
233+ fireEvent . click ( updatedMenuItems [ 1 ] ) ;
234+ const checkedCheckboxes = container . querySelectorAll ( '.rc-cascader-checkbox-checked' ) ;
235+ expect ( checkedCheckboxes ) . toHaveLength ( 0 ) ;
216236
217237 // click disableMenuItem
218- wrapper . find ( '.rc-cascader-checkbox-disabled' ) . simulate ( ' click' ) ;
219- expect ( wrapper . find ( '.rc-cascader-checkbox-checked' ) ) . toHaveLength ( 0 ) ;
238+ fireEvent . click ( disabledCheckboxes [ 0 ] ) ;
239+ expect ( checkedCheckboxes ) . toHaveLength ( 0 ) ;
220240
221241 // Check all children except disableCheckbox When the parent checkbox is checked
222- expect ( wrapper . find ( '.rc-cascader-checkbox' ) ) . toHaveLength ( 4 ) ;
223- wrapper . find ( '.rc-cascader-checkbox' ) . first ( ) . simulate ( 'click' ) ;
224- expect ( wrapper . find ( '.rc-cascader-checkbox-checked' ) ) . toHaveLength ( 3 ) ;
242+ const allCheckboxes = container . querySelectorAll ( '.rc-cascader-checkbox' ) ;
243+ expect ( allCheckboxes ) . toHaveLength ( 4 ) ;
244+ fireEvent . click ( allCheckboxes [ 0 ] ) ;
245+ const finalCheckedCheckboxes = container . querySelectorAll ( '.rc-cascader-checkbox-checked' ) ;
246+ expect ( finalCheckedCheckboxes ) . toHaveLength ( 3 ) ;
225247 } ) ;
226248
227249 it ( 'should not merge disabled options' , ( ) => {
0 commit comments