Updated vitest setup to take our templates into account

open-formulieren · Jan 28, 2025 · 4875a1c · 4875a1c
1 parent 82df116
commit 4875a1c
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 130 deletions.
diff --git a/src/formio/components/Checkbox.spec.js b/src/formio/components/Checkbox.spec.js
@@ -1,7 +1,6 @@
 import {screen} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 const selectboxesForm = {
   type: 'form',
@@ -17,22 +16,14 @@ const selectboxesForm = {
   ],
 };
 
-const renderForm = async () => {
-  let formJSON = _.cloneDeep(selectboxesForm);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 describe('The checkbox component', () => {
   afterEach(() => {
     document.body.innerHTML = '';
   });
 
   test('Checkbox component required and checked', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(selectboxesForm);
 
     const checkbox = screen.getByLabelText('Checkbox');
 
@@ -45,7 +36,7 @@ describe('The checkbox component', () => {
 
   test('Checkbox component required without being checked', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(selectboxesForm);
 
     const checkbox = screen.getByLabelText('Checkbox');
 

diff --git a/src/formio/components/Currency.spec.js b/src/formio/components/Currency.spec.js
@@ -1,7 +1,6 @@
 import {screen} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 const currencyForm = {
   type: 'form',
@@ -17,22 +16,14 @@ const currencyForm = {
   ],
 };
 
-const renderForm = async () => {
-  let formJSON = _.cloneDeep(currencyForm);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 describe('The currency component', () => {
   afterEach(() => {
     document.body.innerHTML = '';
   });
 
   test('Single currency component with valid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(currencyForm);
 
     const input = screen.getByLabelText('Currency');
 
@@ -45,7 +36,7 @@ describe('The currency component', () => {
 
   test('Single currency component with invalid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(currencyForm);
 
     const input = screen.getByLabelText('Currency');
 

diff --git a/src/formio/components/DateField.spec.js b/src/formio/components/DateField.spec.js
@@ -2,8 +2,7 @@ import {waitFor} from '@storybook/test';
 import {screen} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import 'flatpickr';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 import {getComponentNode} from 'formio/components/jest-util';
 import {sleep} from 'utils';
@@ -39,14 +38,6 @@ const multipleDateForm = {
   ],
 };
 
-const renderForm = async formConfig => {
-  let formJSON = _.cloneDeep(formConfig);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 const waitForFlatpickr = async node => {
   let calendarNode;
   for (let i = 0; i < 20; i++) {

diff --git a/src/formio/components/DateTimeField.spec.js b/src/formio/components/DateTimeField.spec.js
@@ -2,8 +2,7 @@ import {waitFor} from '@storybook/test';
 import {screen} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import 'flatpickr';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 import {getComponentNode} from 'formio/components/jest-util';
 import {sleep} from 'utils';
@@ -39,14 +38,6 @@ const multipleDateTimeForm = {
   ],
 };
 
-const renderForm = async formConfig => {
-  let formJSON = _.cloneDeep(formConfig);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 const waitForFlatpickr = async node => {
   let calendarNode;
   for (let i = 0; i < 20; i++) {

diff --git a/src/formio/components/Number.spec.js b/src/formio/components/Number.spec.js
@@ -1,7 +1,6 @@
 import {screen} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 import {getComponentNode} from 'formio/components/jest-util';
 
@@ -34,22 +33,18 @@ const multipleNumberForm = {
   ],
 };
 
-const renderForm = async formConfig => {
-  let formJSON = _.cloneDeep(formConfig);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 describe('The number component', () => {
   afterEach(() => {
     document.body.innerHTML = '';
   });
 
   test('Single number component with valid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(numberForm);
+    const {form} = await renderForm(numberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Number');
 
@@ -62,7 +57,11 @@ describe('The number component', () => {
 
   test('Single number component with invalid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(numberForm);
+    const {form} = await renderForm(numberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Number');
 
@@ -95,7 +94,11 @@ describe('The multiple number component', () => {
 
   test('Multiple number component with valid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(multipleNumberForm);
+    const {form} = await renderForm(multipleNumberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Multiple number');
 
@@ -108,7 +111,11 @@ describe('The multiple number component', () => {
 
   test('Multiple number component with invalid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(multipleNumberForm);
+    const {form} = await renderForm(multipleNumberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Multiple number');
 
@@ -133,7 +140,11 @@ describe('The multiple number component', () => {
 
   test('Multiple number without inputs', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(multipleNumberForm);
+    const {form} = await renderForm(multipleNumberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Multiple number');
     const component = getComponentNode(input);
@@ -153,7 +164,11 @@ describe('The multiple number component', () => {
 
   test('Multiple number with one valid and one invalid input', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm(multipleNumberForm);
+    const {form} = await renderForm(multipleNumberForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     await user.click(screen.getByRole('button', {name: 'Add Another'}));
 

diff --git a/src/formio/components/PhoneNumberField.spec.js b/src/formio/components/PhoneNumberField.spec.js
@@ -1,7 +1,6 @@
 import {screen, waitFor} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 const phoneForm = {
   type: 'form',
@@ -16,14 +15,6 @@ const phoneForm = {
   ],
 };
 
-const renderForm = async () => {
-  let formJSON = _.cloneDeep(phoneForm);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 describe('The phone number component', () => {
   afterEach(() => {
     document.body.innerHTML = '';
@@ -33,7 +24,11 @@ describe('The phone number component', () => {
     'accepts numbers and + as first character (value: %i)',
     async value => {
       const user = userEvent.setup({delay: 50});
-      const {form} = await renderForm();
+      const {form} = await renderForm(phoneForm, {
+        evalContext: {
+          requiredFieldsWithAsterisk: true,
+        },
+      });
 
       const input = screen.getByLabelText('Phone number');
       expect(input).toBeVisible();
@@ -50,7 +45,11 @@ describe('The phone number component', () => {
     'only allows numbers and + as first character (value: %i)',
     async value => {
       const user = userEvent.setup({delay: 50});
-      const {form} = await renderForm();
+      const {form} = await renderForm(phoneForm, {
+        evalContext: {
+          requiredFieldsWithAsterisk: true,
+        },
+      });
 
       const input = screen.getByLabelText('Phone number');
       expect(input).toBeVisible();
@@ -72,7 +71,11 @@ describe('The phone number component', () => {
     ['06-12-34-56 78'], // weird but ok
   ])('allows dashes and spaces for formatting (value: %i)', async value => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(phoneForm, {
+      evalContext: {
+        requiredFieldsWithAsterisk: true,
+      },
+    });
 
     const input = screen.getByLabelText('Phone number');
     expect(input).toBeVisible();

diff --git a/src/formio/components/Selectboxes.spec.js b/src/formio/components/Selectboxes.spec.js
@@ -1,7 +1,6 @@
 import {screen, waitFor} from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import _ from 'lodash';
-import {Formio} from 'react-formio';
+import {renderForm} from 'jstests/formio/utils';
 
 const selectboxesForm = {
   type: 'form',
@@ -27,22 +26,14 @@ const selectboxesForm = {
   ],
 };
 
-const renderForm = async () => {
-  let formJSON = _.cloneDeep(selectboxesForm);
-  const container = document.createElement('div');
-  document.body.appendChild(container);
-  const form = await Formio.createForm(container, formJSON);
-  return {form, container};
-};
-
 describe('The selectboxes component', () => {
   afterEach(() => {
     document.body.innerHTML = '';
   });
 
   test('Selectboxes component checked', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(selectboxesForm);
 
     const selectboxA = screen.getByLabelText('Optie A');
     const selectboxB = screen.getByLabelText('Optie B');
@@ -57,7 +48,7 @@ describe('The selectboxes component', () => {
 
   test('Selectboxes component without checked selectbox', async () => {
     const user = userEvent.setup({delay: 50});
-    const {form} = await renderForm();
+    const {form} = await renderForm(selectboxesForm);
 
     const selectboxA = screen.getByLabelText('Optie A');
     const selectboxB = screen.getByLabelText('Optie B');