Skip to content

Commit c927f3a

Browse files
adids1221adids1221
authored
Infra/picker testing coverage (#3107)
* Modal testing coverage refcator * Dialog testing * getInput added to PickerDriver * refcator some of the tests * style testing for picker field type * wheel picker testing comment about the issues * removed getInput, fixed fieldType testing * removed useDialog from isOpen in picker driver * fix field type test, review notes * removed getStyle from text field driver * fixed review notes * skip th eonShow test
1 parent 9aff70d commit c927f3a

File tree

4 files changed

+163
-89
lines changed

4 files changed

+163
-89
lines changed

‎src/components/picker/Picker.driver.new.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ export const PickerDriver = (props: ComponentProps) => {
4242
doneButtonDriver.press();
4343
};
4444

45-
const isOpen = (useDialog?: boolean): boolean => {
46-
if (useDialog) {
45+
const isOpen = (): boolean => {
46+
if (dialogDriver.getModal().exists()) {
4747
return dialogDriver.getModal().isVisible();
4848
}
4949
return modalDriver.exists() && modalDriver.isVisible();
5050
};
5151

52-
const dismissDialog = (useDialog?: boolean): void => {
53-
if (useDialog) {
52+
const dismissDialog = (): void => {
53+
if (dialogDriver.getModal().isVisible()) {
5454
dialogDriver.getModal().pressOnBackground();
5555
}
5656
};

‎src/components/picker/__tests__/index.spec.tsx

Lines changed: 151 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useState} from 'react';
2-
import {act, render, waitFor} from '@testing-library/react-native';
2+
import {act, render, waitFor, screen} from '@testing-library/react-native';
33
import Picker from '../index';
44
import {PickerDriver} from '../Picker.driver.new';
55
const countries = [
@@ -27,38 +27,26 @@ const getDriver = (props?: any) => {
2727
return PickerDriver({renderTree: render(<TestCase {...props}/>), testID});
2828
};
2929

30+
const onPress = jest.fn();
3031
const onDismiss = jest.fn();
32+
const onShow = jest.fn();
3133

3234
describe('Picker', () => {
3335
beforeEach(() => {
3436
jest.clearAllMocks();
3537
});
3638

3739
describe('Modal', () => {
38-
describe('Test value', () => {
39-
it('Get correct value of a single item', () => {
40-
const driver = getDriver({value: countries[2].value});
41-
expect(driver.getValue()).toEqual(countries[2].label);
42-
});
43-
44-
it('Get correct value of multiple selected items', () => {
45-
const driver = getDriver({value: [countries[2].value, countries[4].value]});
46-
expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
47-
});
48-
});
49-
5040
describe('Test open', () => {
5141
it('Should open when enabled', () => {
5242
const driver = getDriver();
53-
5443
expect(driver.isOpen()).toBeFalsy();
5544
driver.open();
5645
expect(driver.isOpen()).toBeTruthy();
5746
});
5847

5948
it('Should not open when disabled', () => {
6049
const driver = getDriver({editable: false});
61-
6250
expect(driver.isOpen()).toBeFalsy();
6351
driver.open();
6452
expect(driver.isOpen()).toBeFalsy();
@@ -67,19 +55,28 @@ describe('Picker', () => {
6755

6856
it('Test close', () => {
6957
const driver = getDriver();
70-
71-
expect(driver.isOpen()).toBeFalsy();
7258
driver.open();
7359
expect(driver.isOpen()).toBeTruthy();
7460
driver.cancel();
7561
expect(driver.isOpen()).toBeFalsy();
7662
});
7763

64+
describe('Test value', () => {
65+
it('Get correct value of a single item', () => {
66+
const driver = getDriver({value: countries[2].value});
67+
expect(driver.getValue()).toEqual(countries[2].label);
68+
});
69+
70+
it('Get correct value of multiple selected items', () => {
71+
const driver = getDriver({value: [countries[2].value, countries[4].value]});
72+
expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
73+
});
74+
});
75+
7876
describe('Test selection', () => {
7977
it('Should select a single item', () => {
8078
const driver = getDriver();
8179
expect(driver.getValue()).toEqual('');
82-
expect(driver.isOpen()).toBeFalsy();
8380
driver.open();
8481
expect(driver.isOpen()).toBeTruthy();
8582
driver.selectItem(countries[2].label);
@@ -90,7 +87,6 @@ describe('Picker', () => {
9087
it('Should select multiple items', () => {
9188
const driver = getDriver({mode: 'MULTI'});
9289
expect(driver.getValue()).toEqual('');
93-
expect(driver.isOpen()).toBeFalsy();
9490
driver.open();
9591
expect(driver.isOpen()).toBeTruthy();
9692
driver.selectItem(countries[2].label);
@@ -100,122 +96,199 @@ describe('Picker', () => {
10096
});
10197
});
10298

103-
it('Test onDismiss', () => {
104-
const driver = getDriver({
105-
pickerModalProps: {
106-
onDismiss
107-
}
99+
it('Test onPress', () => {
100+
const driver = getDriver({onPress});
101+
driver.open();
102+
expect(onPress).toHaveBeenCalled();
103+
});
104+
105+
describe('Test pickerModalProps', () => {
106+
it('Test onDismiss', () => {
107+
const driver = getDriver({
108+
pickerModalProps: {
109+
onDismiss
110+
}
111+
});
112+
driver.open();
113+
expect(driver.isOpen()).toBeTruthy();
114+
driver.cancel();
115+
expect(driver.isOpen()).toBeFalsy();
116+
expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
108117
});
109118

110-
expect(driver.isOpen()).toBeFalsy();
111-
driver.open();
112-
expect(driver.isOpen()).toBeTruthy();
113-
driver.cancel();
114-
expect(driver.isOpen()).toBeFalsy();
115-
expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
119+
// TODO: this test is not passing yet
120+
// The onShow function get's called when the Modal is fully opened, tried to use act and waitFor to wait for fully open but it didn't work
121+
it.skip('Test onShow passed via pickerModalProps', async () => {
122+
const driver = getDriver({
123+
pickerModalProps: {
124+
onShow
125+
}
126+
});
127+
expect(driver.isOpen()).toBeFalsy();
128+
jest.useFakeTimers();
129+
expect(driver.isOpen()).toBeTruthy();
130+
expect(onShow).toHaveBeenCalled();
131+
});
132+
133+
describe('Test Modal TopBar', () => {
134+
const modalProps = {mode: 'MULTI', topBarProps: {cancelLabel: 'Cancel'}};
135+
it('should close and select items when pressing on done button', () => {
136+
const driver = getDriver(modalProps);
137+
driver.open();
138+
expect(driver.isOpen()).toBeTruthy();
139+
driver.selectItem(countries[2].label);
140+
driver.selectItem(countries[4].label);
141+
driver.done();
142+
expect(driver.isOpen()).toBeFalsy();
143+
expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
144+
});
145+
146+
it('should close without selecting items when pressing on cancel button', () => {
147+
const driver = getDriver(modalProps);
148+
driver.open();
149+
expect(driver.isOpen()).toBeTruthy();
150+
driver.selectItem(countries[2].label);
151+
driver.selectItem(countries[4].label);
152+
driver.cancel();
153+
expect(driver.getValue()).toEqual(``);
154+
expect(driver.isOpen()).toBeFalsy();
155+
});
156+
});
116157
});
117158
});
118159

119-
// TODO: this is a work in progress, the tests are not passing yet
120-
describe.skip('Dialog', () => {
160+
describe('Dialog', () => {
161+
const dialogProps = {useDialog: true, customPickerProps: {migrateDialog: true}};
121162
describe('Test value', () => {
122163
it('Get correct value of a single item', () => {
123164
const driver = getDriver({
124-
useDialog: true,
125-
customPickerProps: {migrateDialog: true},
165+
...dialogProps,
126166
value: countries[2].value
127167
});
128168
expect(driver.getValue()).toEqual(countries[2].label);
129169
});
130170

131171
it('Get correct value of multiple selected items', () => {
132172
const driver = getDriver({
133-
useDialog: true,
134-
customPickerProps: {migrateDialog: true},
173+
...dialogProps,
135174
value: [countries[2].value, countries[4].value]
136175
});
137176
expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
138177
});
139178
});
140179

141-
describe('Test open', () => {
180+
describe('Test open/close', () => {
142181
it('Should open when enabled', async () => {
143-
const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
144-
182+
const driver = getDriver(dialogProps);
145183
expect(driver.isOpen()).toBeFalsy();
146-
// driver.open();
147-
// expect(driver.isOpen()).toBeTruthy();
148184
jest.useFakeTimers();
149185
act(() => driver.open());
150186
jest.runAllTimers();
151-
// advanceAnimationByTime(10000);
152-
// await new Promise(r => setTimeout(r, 1000));
153187
await waitFor(() => expect(driver.isOpen()).toBeTruthy());
154188
});
155189

156190
it('Should not open when disabled', () => {
157-
const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}, editable: false});
158-
191+
const driver = getDriver({...dialogProps, editable: false});
159192
expect(driver.isOpen()).toBeFalsy();
160193
driver.open();
161194
expect(driver.isOpen()).toBeFalsy();
162195
});
163-
});
164-
165-
it('Test close', () => {
166-
const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
167196

168-
expect(driver.isOpen()).toBeFalsy();
169-
driver.open();
170-
expect(driver.isOpen()).toBeTruthy();
171-
driver.cancel();
172-
expect(driver.isOpen()).toBeFalsy();
197+
it('Test close', async () => {
198+
const driver = getDriver(dialogProps);
199+
expect(driver.isOpen()).toBeFalsy();
200+
act(() => driver.open());
201+
await waitFor(() => expect(driver.isOpen()).toBeTruthy());
202+
act(() => driver.dismissDialog());
203+
await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
204+
});
173205
});
174206

175207
describe('Test selection', () => {
176-
it('Should select a single item', () => {
177-
const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}});
178-
expect(driver.getValue()).toEqual(undefined);
179-
expect(driver.isOpen()).toBeFalsy();
180-
driver.open();
181-
expect(driver.isOpen()).toBeTruthy();
208+
it('Should select a single item', async () => {
209+
const driver = getDriver(dialogProps);
210+
expect(driver.getValue()).toEqual('');
211+
act(() => driver.open());
212+
await waitFor(() => expect(driver.isOpen()).toBeTruthy());
182213
driver.selectItem(countries[2].label);
183-
expect(driver.isOpen()).toBeFalsy();
214+
act(() => driver.dismissDialog());
215+
await waitFor(() => expect(driver.isOpen()).toBeFalsy());
184216
expect(driver.getValue()).toEqual(countries[2].label);
185217
});
186218

187-
it('Should select multiple items', () => {
188-
const driver = getDriver({useDialog: true, customPickerProps: {migrateDialog: true}, mode: 'MULTI'});
189-
expect(driver.getValue()).toEqual(undefined);
219+
it('Should select multiple items', async () => {
220+
const driver = getDriver({...dialogProps, mode: 'MULTI'});
221+
expect(driver.getValue()).toEqual('');
190222
expect(driver.isOpen()).toBeFalsy();
191-
driver.open();
192-
expect(driver.isOpen()).toBeTruthy();
223+
act(() => driver.open());
224+
await waitFor(() => expect(driver.isOpen()).toBeTruthy());
193225
driver.selectItem(countries[2].label);
194226
driver.selectItem(countries[4].label);
195227
driver.done();
228+
await waitFor(() => expect(driver.isOpen()).toBeFalsy());
196229
expect(driver.getValue()).toEqual(`${countries[2].label}, ${countries[4].label}`);
197230
});
198231
});
199232

200-
it('Test onDismiss', () => {
233+
it('Test onDismiss', async () => {
201234
const driver = getDriver({
202-
useDialog: true,
203-
customPickerProps: {migrateDialog: true},
204-
pickerModalProps: {
205-
onDismiss
235+
...dialogProps,
236+
customPickerProps: {
237+
dialogProps: {
238+
onDismiss
239+
}
206240
}
207241
});
208-
209242
expect(driver.isOpen()).toBeFalsy();
210-
driver.open();
211-
expect(driver.isOpen()).toBeTruthy();
212-
driver.cancel();
213-
expect(driver.isOpen()).toBeFalsy();
214-
expect(onDismiss).toHaveBeenCalledTimes(2); // TODO: this should be 1
243+
act(() => driver.open());
244+
await waitFor(() => expect(driver.isOpen()).toBeTruthy());
245+
act(() => driver.dismissDialog());
246+
await waitFor(() => expect(driver.dismissDialog()).toBeFalsy());
247+
expect(onDismiss).toHaveBeenCalledTimes(1);
215248
});
216249
});
217250

218-
// TODO: add tests for WheelPicker as well
251+
// TODO: add tests for WheelPicker
252+
// Note: the picker dialog should be opened and then the wheel picker should be rendered, this is the main issue with testing it for now
219253
// describe.skip('WheelPicker', () => {
220254
// });
255+
256+
//TODO: add more tests for different props
257+
describe('Picker field types', () => {
258+
describe('Test filter field type', () => {
259+
const placeholderText = 'Select a Filter';
260+
it('should render a filter picker', () => {
261+
const driver = getDriver({fieldType: 'filter', placeholder: placeholderText});
262+
expect(driver.isOpen()).toBeFalsy();
263+
const label = screen.getByTestId(`${testID}.filter.type.label`);
264+
expect(label).toBeTruthy();
265+
expect(label.props.children).toEqual(placeholderText);
266+
});
267+
});
268+
describe('Test settings field type', () => {
269+
const labelText = 'Settings';
270+
const placeholderText = 'Select a setting';
271+
it('should render a settings picker with label', async () => {
272+
const driver = getDriver({fieldType: 'settings', label: labelText, placeholder: placeholderText});
273+
expect(driver.isOpen()).toBeFalsy();
274+
const label = screen.getByTestId(`${testID}.settings.type.label`);
275+
const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
276+
expect(label).toBeTruthy();
277+
expect(placeholder).toBeTruthy();
278+
expect(label.props.children).toEqual(labelText);
279+
expect(placeholder.props.children).toEqual(labelText);
280+
});
281+
282+
it('should render a settings picker with placeholder', async () => {
283+
const driver = getDriver({fieldType: 'settings', placeholder: placeholderText});
284+
expect(driver.isOpen()).toBeFalsy();
285+
const label = screen.getByTestId(`${testID}.settings.type.label`);
286+
const placeholder = screen.getByTestId(`${testID}.settings.type.placeholder`);
287+
expect(label).toBeTruthy();
288+
expect(placeholder).toBeTruthy();
289+
expect(label.props.children).toEqual(undefined);
290+
expect(placeholder.props.children).toEqual(placeholderText);
291+
});
292+
});
293+
});
221294
});

0 commit comments

Comments
 (0)