Skip to content

Commit c8a653b

Browse files
Hyperkid123Hyperkid123
committed
fix tests after pf4 select downshift migration
1 parent d63fb7b commit c8a653b

File tree

3 files changed

+60
-73
lines changed

3 files changed

+60
-73
lines changed

‎packages/pf4-component-mapper/demo/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class App extends React.Component {
5656
<FormRenderer
5757
onSubmit={console.log}
5858
initialValues={{
59-
'async-drop-down': 'async-option-2'
59+
'simple-select': 'Kay'
6060
}}
6161
componentMapper={{
6262
...componentMapper,

‎packages/pf4-component-mapper/src/tests/form-fields.test.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,8 @@ describe('FormFields', () => {
417417
.first()
418418
.props().disabled
419419
).toEqual(true);
420+
} else if (component === componentTypes.SELECT) {
421+
expect(wrapper.find('div.pf-c-select__toggle').prop('disabled')).toEqual(true);
420422
} else {
421423
expect(
422424
wrapper
@@ -434,6 +436,11 @@ describe('FormFields', () => {
434436
};
435437
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
436438

439+
if (component === componentTypes.SELECT) {
440+
expect(true);
441+
return;
442+
}
443+
437444
if (component === componentTypes.TEXTAREA) {
438445
expect(
439446
wrapper

‎packages/pf4-component-mapper/src/tests/select/select.test.js

Lines changed: 52 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import { mount } from 'enzyme';
3-
import { components } from 'react-select';
4-
import ReactSelect from 'react-select';
53
import isEqual from 'lodash/isEqual';
64

75
import Select from '../../common/select/select';
@@ -13,7 +11,7 @@ describe('<Select />', () => {
1311
beforeEach(() => {
1412
initialProps = {
1513
onChange,
16-
menuIsOpen: true,
14+
name: 'test-select',
1715
id: 'select',
1816
options: [
1917
{
@@ -34,11 +32,8 @@ describe('<Select />', () => {
3432

3533
it('should return single simple value', async () => {
3634
const wrapper = mount(<Select {...initialProps} />);
37-
const option = wrapper
38-
.find('.ddorg__pf4-component-mapper__select__menu--option')
39-
.first()
40-
.find('div')
41-
.last();
35+
wrapper.find('.pf-c-select__toggle').simulate('click');
36+
const option = wrapper.find('button.pf-c-select__menu-item').first();
4237

4338
await act(async () => {
4439
option.simulate('click');
@@ -49,11 +44,8 @@ describe('<Select />', () => {
4944

5045
it('should return single object value', async () => {
5146
const wrapper = mount(<Select {...initialProps} simpleValue={false} />);
52-
const option = wrapper
53-
.find('.ddorg__pf4-component-mapper__select__menu--option')
54-
.first()
55-
.find('div')
56-
.last();
47+
wrapper.find('.pf-c-select__toggle').simulate('click');
48+
const option = wrapper.find('button.pf-c-select__menu-item').first();
5749

5850
await act(async () => {
5951
option.simulate('click');
@@ -67,26 +59,19 @@ describe('<Select />', () => {
6759
// simulate first return value in state
6860
const value = [1];
6961
const wrapper = mount(<Select {...initialProps} value={value} isMulti onChange={onChange} closeMenuOnSelect={false} />);
62+
wrapper.find('.pf-c-select__toggle').simulate('click');
7063
/**
7164
* select first option
7265
*/
73-
const option1 = wrapper
74-
.find('.ddorg__pf4-component-mapper__select__menu--option')
75-
.first()
76-
.find('div')
77-
.last();
66+
const option1 = wrapper.find('button.pf-c-select__menu-item').first();
7867

7968
await act(async () => {
8069
option1.simulate('click');
8170
});
8271
/**
8372
* select second option
8473
*/
85-
const option2 = wrapper
86-
.find('.ddorg__pf4-component-mapper__select__menu--option')
87-
.last()
88-
.find('div')
89-
.last();
74+
const option2 = wrapper.find('button.pf-c-select__menu-item').last();
9075
await act(async () => {
9176
option2.simulate('click');
9277
});
@@ -101,26 +86,19 @@ describe('<Select />', () => {
10186
// simulate first return value in state
10287
const value = [{ ...initialProps.options[0] }];
10388
const wrapper = mount(<Select {...initialProps} value={value} simpleValue={false} isMulti onChange={onChange} closeMenuOnSelect={false} />);
89+
wrapper.find('.pf-c-select__toggle').simulate('click');
10490
/**
10591
* select first option
10692
*/
107-
const option1 = wrapper
108-
.find('.ddorg__pf4-component-mapper__select__menu--option')
109-
.first()
110-
.find('div')
111-
.last();
93+
const option1 = wrapper.find('button.pf-c-select__menu-item').first();
11294

11395
await act(async () => {
11496
option1.simulate('click');
11597
});
11698
/**
11799
* select second option
118100
*/
119-
const option2 = wrapper
120-
.find('.ddorg__pf4-component-mapper__select__menu--option')
121-
.last()
122-
.find('div')
123-
.last();
101+
const option2 = wrapper.find('button.pf-c-select__menu-item').last();
124102
await act(async () => {
125103
option2.simulate('click');
126104
});
@@ -130,16 +108,28 @@ describe('<Select />', () => {
130108
});
131109

132110
it('should expand and close multi value chips', async () => {
133-
const value = [1, 2];
134-
const wrapper = mount(<Select {...initialProps} value={value} isMulti closeMenuOnSelect={false} />);
111+
const value = [1, 2, 3, 4];
112+
const options = [
113+
...initialProps.options,
114+
{
115+
label: '3',
116+
value: 3
117+
},
118+
{
119+
label: '4',
120+
value: 4
121+
}
122+
];
123+
const wrapper = mount(<Select {...initialProps} options={options} value={value} isMulti closeMenuOnSelect={false} />);
135124

136-
expect(wrapper.find('.ddorg__pf4-component-mapper__select__multivalue--container')).toHaveLength(1);
137-
const expandButton = wrapper.find('button.pf-c-button.pf-m-plain.ddorg__pf4-component-mapper__select__value--container-chipgroup');
125+
expect(wrapper.find('.pf-c-chip-group')).toHaveLength(1);
126+
expect(wrapper.find('div.pf-c-chip')).toHaveLength(3);
127+
const expandButton = wrapper.find('button.pf-c-chip.pf-m-overflow').last();
138128
await act(async () => {
139129
expandButton.simulate('click');
140130
});
141131
wrapper.update();
142-
expect(wrapper.find('.ddorg__pf4-component-mapper__select__multivalue--container')).toHaveLength(2);
132+
expect(wrapper.find('div.pf-c-chip')).toHaveLength(4);
143133
});
144134

145135
it('should call on change when removing chip', async () => {
@@ -148,7 +138,7 @@ describe('<Select />', () => {
148138

149139
await act(async () => {
150140
wrapper
151-
.find(components.MultiValueRemove)
141+
.find('button.pf-c-button.pf-m-plain')
152142
.first()
153143
.simulate('click');
154144
});
@@ -180,33 +170,31 @@ describe('<Select />', () => {
180170
{ label: 'b', value: 2 }
181171
],
182172
placeholder: 'Choose...',
183-
selectVariant: 'default',
184173
showLessLabel: 'Show less',
185174
showMoreLabel: 'more',
186175
simpleValue: true,
187176
updatingMessage: 'Loading data...',
188177
menuIsPortal: false,
189178
value: [1, 2],
190-
loadingMessage: 'Loading...'
179+
loadingMessage: 'Loading...',
180+
noOptionsMessage: 'No options',
181+
noResultsMessage: 'No results found'
191182
});
192183
});
193184

194185
it('should load single select Async options correctly', async () => {
195-
const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label' }]));
186+
const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label', value: '3' }]));
196187

197188
let wrapper;
198189

199190
await act(async () => {
200191
wrapper = mount(<Select {...initialProps} options={undefined} loadOptions={asyncLoading} />);
201192
});
202193
wrapper.update();
194+
wrapper.find('.pf-c-select__toggle').simulate('click');
203195

204-
expect(
205-
wrapper
206-
.find(ReactSelect)
207-
.first()
208-
.instance().props.options
209-
).toEqual([{ label: 'label' }]);
196+
expect(wrapper.find('button.pf-c-select__menu-item')).toHaveLength(1);
197+
expect(wrapper.find('button.pf-c-select__menu-item').text()).toEqual('label');
210198
});
211199

212200
it('should load multi select Async options correctly and set initial value to undefined', async () => {
@@ -229,12 +217,9 @@ describe('<Select />', () => {
229217
});
230218

231219
wrapper.update();
232-
expect(
233-
wrapper
234-
.find(ReactSelect)
235-
.first()
236-
.instance().props.options
237-
).toEqual([{ label: 'label', value: '123' }]);
220+
wrapper.find('.pf-c-select__toggle').simulate('click');
221+
expect(wrapper.find('button.pf-c-select__menu-item')).toHaveLength(1);
222+
expect(wrapper.find('button.pf-c-select__menu-item').text()).toEqual('label');
238223
expect(onChange).toHaveBeenCalledWith(undefined);
239224
});
240225

@@ -258,12 +243,9 @@ describe('<Select />', () => {
258243
});
259244

260245
wrapper.update();
261-
expect(
262-
wrapper
263-
.find(ReactSelect)
264-
.first()
265-
.instance().props.options
266-
).toEqual([{ label: 'label', value: '123' }]);
246+
wrapper.find('.pf-c-select__toggle').simulate('click');
247+
expect(wrapper.find('button.pf-c-select__menu-item')).toHaveLength(1);
248+
expect(wrapper.find('button.pf-c-select__menu-item').text()).toEqual('label');
267249
expect(onChange).toHaveBeenCalledWith(['123']);
268250
});
269251

@@ -286,26 +268,24 @@ describe('<Select />', () => {
286268
});
287269

288270
wrapper.update();
289-
expect(
290-
wrapper
291-
.find(ReactSelect)
292-
.first()
293-
.instance().props.options
294-
).toEqual([{ label: 'label', value: '123' }]);
271+
wrapper.find('.pf-c-select__toggle').simulate('click');
272+
expect(wrapper.find('button.pf-c-select__menu-item')).toHaveLength(1);
273+
expect(wrapper.find('button.pf-c-select__menu-item').text()).toEqual('label');
295274
expect(onChange).toHaveBeenCalledWith([{ label: 'label', value: '123' }]);
296275
});
297276

298277
it('should load Async options after filtering', async () => {
299-
const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label' }]));
278+
const asyncLoading = jest.fn().mockReturnValue(Promise.resolve([{ label: 'label', value: 1 }]));
300279
let wrapper;
301280
await act(async () => {
302281
wrapper = mount(<Select {...initialProps} isSearchable={true} options={undefined} loadOptions={asyncLoading} />);
303282
});
304283

305284
wrapper.update();
306285
expect(asyncLoading.mock.calls).toHaveLength(1);
286+
wrapper.find('.pf-c-select__toggle').simulate('click');
307287

308-
const search = wrapper.find(ReactSelect).find('input');
288+
const search = wrapper.find('input');
309289

310290
await act(async () => {
311291
search.instance().value = 'foo';
@@ -339,15 +319,15 @@ describe('<Select />', () => {
339319
wrapper = mount(<Wrapper {...initialProps} />);
340320
});
341321

342-
let innerSelectProps = wrapper.find(ReactSelect).props().options;
322+
let innerSelectProps = wrapper.find('InternalSelect').props().options;
343323

344324
expect(isEqual(innerSelectProps, initialProps.options)).toEqual(true);
345325

346326
await act(async () => {
347327
wrapper.setProps({ options: NEW_OPTIONS });
348328
});
349329
wrapper.update();
350-
innerSelectProps = wrapper.find(ReactSelect).props().options;
330+
innerSelectProps = wrapper.find('InternalSelect').props().options;
351331

352332
expect(innerSelectProps).toEqual(NEW_OPTIONS);
353333
});
@@ -359,7 +339,7 @@ describe('<Select />', () => {
359339
});
360340

361341
wrapper.update();
362-
let innerSelectProps = wrapper.find(ReactSelect).props().options;
342+
let innerSelectProps = wrapper.find('InternalSelect').props().options;
363343

364344
expect(isEqual(innerSelectProps, initialProps.options)).toEqual(true);
365345

@@ -368,7 +348,7 @@ describe('<Select />', () => {
368348
});
369349

370350
wrapper.update();
371-
innerSelectProps = wrapper.find(ReactSelect).props().options;
351+
innerSelectProps = wrapper.find('InternalSelect').props().options;
372352

373353
expect(isEqual(innerSelectProps, NEW_OPTIONS)).toEqual(true);
374354
});

0 commit comments

Comments
 (0)