Skip to content

Commit 263df05

Browse files
sergei-maertenssergei-maertens
authored
Merge pull request #788 from open-formulieren/fix/add-our-templates-to-vitest-setup
Update vitest setup to take our templates into account
2 parents 82df116 + f2d533f commit 263df05

13 files changed

+140
-131
lines changed

‎src/components/appointments/CreateAppointment/CreateAppointment.spec.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ describe('Create appointment session expiration', () => {
9292
});
9393

9494
// select a product
95-
const dropdowns = await screen.findAllByRole('combobox');
95+
const dropdowns = await screen.findAllByRole('combobox', undefined, {timeout: 2000});
9696
expect(dropdowns).toHaveLength(1);
9797
await user.click(dropdowns[0]);
9898
await user.keyboard('[ArrowDown]');

‎src/formio/components/Checkbox.spec.js

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {screen} from '@testing-library/dom';
22
import userEvent from '@testing-library/user-event';
3-
import _ from 'lodash';
4-
import {Formio} from 'react-formio';
3+
import {renderForm} from 'jstests/formio/utils';
54

65
const selectboxesForm = {
76
type: 'form',
@@ -17,22 +16,14 @@ const selectboxesForm = {
1716
],
1817
};
1918

20-
const renderForm = async () => {
21-
let formJSON = _.cloneDeep(selectboxesForm);
22-
const container = document.createElement('div');
23-
document.body.appendChild(container);
24-
const form = await Formio.createForm(container, formJSON);
25-
return {form, container};
26-
};
27-
2819
describe('The checkbox component', () => {
2920
afterEach(() => {
3021
document.body.innerHTML = '';
3122
});
3223

3324
test('Checkbox component required and checked', async () => {
3425
const user = userEvent.setup({delay: 50});
35-
const {form} = await renderForm();
26+
const {form} = await renderForm(selectboxesForm);
3627

3728
const checkbox = screen.getByLabelText('Checkbox');
3829

@@ -45,7 +36,7 @@ describe('The checkbox component', () => {
4536

4637
test('Checkbox component required without being checked', async () => {
4738
const user = userEvent.setup({delay: 50});
48-
const {form} = await renderForm();
39+
const {form} = await renderForm(selectboxesForm);
4940

5041
const checkbox = screen.getByLabelText('Checkbox');
5142

‎src/formio/components/Currency.spec.js

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {screen} from '@testing-library/dom';
22
import userEvent from '@testing-library/user-event';
3-
import _ from 'lodash';
4-
import {Formio} from 'react-formio';
3+
import {renderForm} from 'jstests/formio/utils';
54

65
const currencyForm = {
76
type: 'form',
@@ -17,22 +16,14 @@ const currencyForm = {
1716
],
1817
};
1918

20-
const renderForm = async () => {
21-
let formJSON = _.cloneDeep(currencyForm);
22-
const container = document.createElement('div');
23-
document.body.appendChild(container);
24-
const form = await Formio.createForm(container, formJSON);
25-
return {form, container};
26-
};
27-
2819
describe('The currency component', () => {
2920
afterEach(() => {
3021
document.body.innerHTML = '';
3122
});
3223

3324
test('Single currency component with valid input', async () => {
3425
const user = userEvent.setup({delay: 50});
35-
const {form} = await renderForm();
26+
const {form} = await renderForm(currencyForm);
3627

3728
const input = screen.getByLabelText('Currency');
3829

@@ -45,7 +36,7 @@ describe('The currency component', () => {
4536

4637
test('Single currency component with invalid input', async () => {
4738
const user = userEvent.setup({delay: 50});
48-
const {form} = await renderForm();
39+
const {form} = await renderForm(currencyForm);
4940

5041
const input = screen.getByLabelText('Currency');
5142

‎src/formio/components/DateField.spec.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import {waitFor} from '@storybook/test';
22
import {screen} from '@testing-library/dom';
33
import userEvent from '@testing-library/user-event';
44
import 'flatpickr';
5-
import _ from 'lodash';
6-
import {Formio} from 'react-formio';
5+
import {renderForm} from 'jstests/formio/utils';
76

87
import {getComponentNode} from 'formio/components/jest-util';
98
import {sleep} from 'utils';
@@ -39,14 +38,6 @@ const multipleDateForm = {
3938
],
4039
};
4140

42-
const renderForm = async formConfig => {
43-
let formJSON = _.cloneDeep(formConfig);
44-
const container = document.createElement('div');
45-
document.body.appendChild(container);
46-
const form = await Formio.createForm(container, formJSON);
47-
return {form, container};
48-
};
49-
5041
const waitForFlatpickr = async node => {
5142
let calendarNode;
5243
for (let i = 0; i < 20; i++) {

‎src/formio/components/DateTimeField.spec.js

+1-10
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import {waitFor} from '@storybook/test';
22
import {screen} from '@testing-library/dom';
33
import userEvent from '@testing-library/user-event';
44
import 'flatpickr';
5-
import _ from 'lodash';
6-
import {Formio} from 'react-formio';
5+
import {renderForm} from 'jstests/formio/utils';
76

87
import {getComponentNode} from 'formio/components/jest-util';
98
import {sleep} from 'utils';
@@ -39,14 +38,6 @@ const multipleDateTimeForm = {
3938
],
4039
};
4140

42-
const renderForm = async formConfig => {
43-
let formJSON = _.cloneDeep(formConfig);
44-
const container = document.createElement('div');
45-
document.body.appendChild(container);
46-
const form = await Formio.createForm(container, formJSON);
47-
return {form, container};
48-
};
49-
5041
const waitForFlatpickr = async node => {
5142
let calendarNode;
5243
for (let i = 0; i < 20; i++) {

‎src/formio/components/Number.spec.js

+31-16
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {screen} from '@testing-library/dom';
22
import userEvent from '@testing-library/user-event';
3-
import _ from 'lodash';
4-
import {Formio} from 'react-formio';
3+
import {renderForm} from 'jstests/formio/utils';
54

65
import {getComponentNode} from 'formio/components/jest-util';
76

@@ -34,22 +33,18 @@ const multipleNumberForm = {
3433
],
3534
};
3635

37-
const renderForm = async formConfig => {
38-
let formJSON = _.cloneDeep(formConfig);
39-
const container = document.createElement('div');
40-
document.body.appendChild(container);
41-
const form = await Formio.createForm(container, formJSON);
42-
return {form, container};
43-
};
44-
4536
describe('The number component', () => {
4637
afterEach(() => {
4738
document.body.innerHTML = '';
4839
});
4940

5041
test('Single number component with valid input', async () => {
5142
const user = userEvent.setup({delay: 50});
52-
const {form} = await renderForm(numberForm);
43+
const {form} = await renderForm(numberForm, {
44+
evalContext: {
45+
requiredFieldsWithAsterisk: true,
46+
},
47+
});
5348

5449
const input = screen.getByLabelText('Number');
5550

@@ -62,7 +57,11 @@ describe('The number component', () => {
6257

6358
test('Single number component with invalid input', async () => {
6459
const user = userEvent.setup({delay: 50});
65-
const {form} = await renderForm(numberForm);
60+
const {form} = await renderForm(numberForm, {
61+
evalContext: {
62+
requiredFieldsWithAsterisk: true,
63+
},
64+
});
6665

6766
const input = screen.getByLabelText('Number');
6867

@@ -95,7 +94,11 @@ describe('The multiple number component', () => {
9594

9695
test('Multiple number component with valid input', async () => {
9796
const user = userEvent.setup({delay: 50});
98-
const {form} = await renderForm(multipleNumberForm);
97+
const {form} = await renderForm(multipleNumberForm, {
98+
evalContext: {
99+
requiredFieldsWithAsterisk: true,
100+
},
101+
});
99102

100103
const input = screen.getByLabelText('Multiple number');
101104

@@ -108,7 +111,11 @@ describe('The multiple number component', () => {
108111

109112
test('Multiple number component with invalid input', async () => {
110113
const user = userEvent.setup({delay: 50});
111-
const {form} = await renderForm(multipleNumberForm);
114+
const {form} = await renderForm(multipleNumberForm, {
115+
evalContext: {
116+
requiredFieldsWithAsterisk: true,
117+
},
118+
});
112119

113120
const input = screen.getByLabelText('Multiple number');
114121

@@ -133,7 +140,11 @@ describe('The multiple number component', () => {
133140

134141
test('Multiple number without inputs', async () => {
135142
const user = userEvent.setup({delay: 50});
136-
const {form} = await renderForm(multipleNumberForm);
143+
const {form} = await renderForm(multipleNumberForm, {
144+
evalContext: {
145+
requiredFieldsWithAsterisk: true,
146+
},
147+
});
137148

138149
const input = screen.getByLabelText('Multiple number');
139150
const component = getComponentNode(input);
@@ -153,7 +164,11 @@ describe('The multiple number component', () => {
153164

154165
test('Multiple number with one valid and one invalid input', async () => {
155166
const user = userEvent.setup({delay: 50});
156-
const {form} = await renderForm(multipleNumberForm);
167+
const {form} = await renderForm(multipleNumberForm, {
168+
evalContext: {
169+
requiredFieldsWithAsterisk: true,
170+
},
171+
});
157172

158173
await user.click(screen.getByRole('button', {name: 'Add Another'}));
159174

‎src/formio/components/PhoneNumberField.spec.js

+16-13
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {screen, waitFor} from '@testing-library/dom';
22
import userEvent from '@testing-library/user-event';
3-
import _ from 'lodash';
4-
import {Formio} from 'react-formio';
3+
import {renderForm} from 'jstests/formio/utils';
54

65
const phoneForm = {
76
type: 'form',
@@ -16,14 +15,6 @@ const phoneForm = {
1615
],
1716
};
1817

19-
const renderForm = async () => {
20-
let formJSON = _.cloneDeep(phoneForm);
21-
const container = document.createElement('div');
22-
document.body.appendChild(container);
23-
const form = await Formio.createForm(container, formJSON);
24-
return {form, container};
25-
};
26-
2718
describe('The phone number component', () => {
2819
afterEach(() => {
2920
document.body.innerHTML = '';
@@ -33,7 +24,11 @@ describe('The phone number component', () => {
3324
'accepts numbers and + as first character (value: %i)',
3425
async value => {
3526
const user = userEvent.setup({delay: 50});
36-
const {form} = await renderForm();
27+
const {form} = await renderForm(phoneForm, {
28+
evalContext: {
29+
requiredFieldsWithAsterisk: true,
30+
},
31+
});
3732

3833
const input = screen.getByLabelText('Phone number');
3934
expect(input).toBeVisible();
@@ -50,7 +45,11 @@ describe('The phone number component', () => {
5045
'only allows numbers and + as first character (value: %i)',
5146
async value => {
5247
const user = userEvent.setup({delay: 50});
53-
const {form} = await renderForm();
48+
const {form} = await renderForm(phoneForm, {
49+
evalContext: {
50+
requiredFieldsWithAsterisk: true,
51+
},
52+
});
5453

5554
const input = screen.getByLabelText('Phone number');
5655
expect(input).toBeVisible();
@@ -72,7 +71,11 @@ describe('The phone number component', () => {
7271
['06-12-34-56 78'], // weird but ok
7372
])('allows dashes and spaces for formatting (value: %i)', async value => {
7473
const user = userEvent.setup({delay: 50});
75-
const {form} = await renderForm();
74+
const {form} = await renderForm(phoneForm, {
75+
evalContext: {
76+
requiredFieldsWithAsterisk: true,
77+
},
78+
});
7679

7780
const input = screen.getByLabelText('Phone number');
7881
expect(input).toBeVisible();

‎src/formio/components/Selectboxes.spec.js

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {screen, waitFor} from '@testing-library/dom';
22
import userEvent from '@testing-library/user-event';
3-
import _ from 'lodash';
4-
import {Formio} from 'react-formio';
3+
import {renderForm} from 'jstests/formio/utils';
54

65
const selectboxesForm = {
76
type: 'form',
@@ -27,22 +26,14 @@ const selectboxesForm = {
2726
],
2827
};
2928

30-
const renderForm = async () => {
31-
let formJSON = _.cloneDeep(selectboxesForm);
32-
const container = document.createElement('div');
33-
document.body.appendChild(container);
34-
const form = await Formio.createForm(container, formJSON);
35-
return {form, container};
36-
};
37-
3829
describe('The selectboxes component', () => {
3930
afterEach(() => {
4031
document.body.innerHTML = '';
4132
});
4233

4334
test('Selectboxes component checked', async () => {
4435
const user = userEvent.setup({delay: 50});
45-
const {form} = await renderForm();
36+
const {form} = await renderForm(selectboxesForm);
4637

4738
const selectboxA = screen.getByLabelText('Optie A');
4839
const selectboxB = screen.getByLabelText('Optie B');
@@ -57,7 +48,7 @@ describe('The selectboxes component', () => {
5748

5849
test('Selectboxes component without checked selectbox', async () => {
5950
const user = userEvent.setup({delay: 50});
60-
const {form} = await renderForm();
51+
const {form} = await renderForm(selectboxesForm);
6152

6253
const selectboxA = screen.getByLabelText('Optie A');
6354
const selectboxB = screen.getByLabelText('Optie B');

0 commit comments

Comments
 (0)