diff --git a/src/formio/components/Checkbox.spec.js b/src/formio/components/Checkbox.spec.js index fb543fa06..114159219 100644 --- 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,14 +16,6 @@ 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 = ''; @@ -32,7 +23,7 @@ describe('The checkbox component', () => { 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 index c39111cc8..c081fdb8e 100644 --- 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,14 +16,6 @@ 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 = ''; @@ -32,7 +23,7 @@ describe('The currency component', () => { 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 index e38c7b2e4..38b52850a 100644 --- 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 index ef8028d97..0bb4630a1 100644 --- 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 index 1a223408f..1adf1547c 100644 --- 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,14 +33,6 @@ 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 = ''; @@ -49,7 +40,11 @@ describe('The number component', () => { 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 index 353d2b9bf..507e81a72 100644 --- 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 index 7dcd5bc46..e07a07b83 100644 --- 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,14 +26,6 @@ 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 = ''; @@ -42,7 +33,7 @@ describe('The selectboxes component', () => { 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'); diff --git a/src/formio/components/TextField.spec.js b/src/formio/components/TextField.spec.js index a164c2c80..f8ec735c4 100644 --- a/src/formio/components/TextField.spec.js +++ b/src/formio/components/TextField.spec.js @@ -1,8 +1,7 @@ import {expect} from '@storybook/test'; 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'; @@ -35,14 +34,6 @@ const multipleTextfieldForm = { ], }; -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 text component', () => { afterEach(() => { document.body.innerHTML = ''; @@ -63,7 +54,11 @@ describe('The text component', () => { test('Single textfield component with invalid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(textfieldForm); + const {form} = await renderForm(textfieldForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Text'); @@ -97,7 +92,11 @@ describe('The mutiple text component', () => { test('Multiple textfield component with valid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTextfieldForm); + const {form} = await renderForm(multipleTextfieldForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const multipleInput = screen.getByLabelText('Text list'); @@ -110,7 +109,11 @@ describe('The mutiple text component', () => { test('Multiple textfield component with invalid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTextfieldForm); + const {form} = await renderForm(multipleTextfieldForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const multipleInput = screen.getByLabelText('Text list'); @@ -128,7 +131,11 @@ describe('The mutiple text component', () => { test('Multiple textfield without inputs', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTextfieldForm); + const {form} = await renderForm(multipleTextfieldForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const multipleInput = screen.getByLabelText('Text list'); const multipleTextComponent = getComponentNode(multipleInput); @@ -148,7 +155,11 @@ describe('The mutiple text component', () => { test('Multiple textfield with one valid and one invalid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTextfieldForm); + const {form} = await renderForm(multipleTextfieldForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); await user.click(screen.getByRole('button', {name: 'Add Another'})); @@ -209,7 +220,11 @@ describe('Textfield with soft required validation', () => { }, ], }; - const {form} = await renderForm(FORM); + const {form} = await renderForm(FORM, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Text'); diff --git a/src/formio/components/Textarea.spec.js b/src/formio/components/Textarea.spec.js index d81430446..8e7b1602f 100644 --- a/src/formio/components/Textarea.spec.js +++ b/src/formio/components/Textarea.spec.js @@ -1,8 +1,7 @@ import {expect} from '@storybook/test'; 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'; @@ -35,14 +34,6 @@ const multipleTextareaForm = { ], }; -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 textarea component', () => { afterEach(() => { document.body.innerHTML = ''; diff --git a/src/formio/components/TimeField.spec.js b/src/formio/components/TimeField.spec.js index 85cb64de1..dec3112e8 100644 --- a/src/formio/components/TimeField.spec.js +++ b/src/formio/components/TimeField.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'; import {getComponentNode} from 'formio/components/jest-util'; @@ -35,14 +34,6 @@ const multipleTimeForm = { ], }; -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 time component', () => { afterEach(() => { document.body.innerHTML = ''; @@ -50,7 +41,11 @@ describe('The time component', () => { test('Time component with invalid time', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(timeForm); + const {form} = await renderForm(timeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Time'); expect(input).toBeVisible(); @@ -62,7 +57,11 @@ describe('The time component', () => { test('Time component with invalid time has descriptive aria tags', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(timeForm); + const {form} = await renderForm(timeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Time'); expect(input).toBeVisible(); @@ -104,7 +103,11 @@ describe('The time component multiple', () => { test('Multiple time component with valid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTimeForm); + const {form} = await renderForm(multipleTimeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const multipleInput = screen.getByLabelText('Time'); @@ -117,7 +120,11 @@ describe('The time component multiple', () => { test('Multiple time component with invalid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTimeForm); + const {form} = await renderForm(multipleTimeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Time'); @@ -137,7 +144,11 @@ describe('The time component multiple', () => { test('Required multiple time without inputs', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTimeForm); + const {form} = await renderForm(multipleTimeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); const input = screen.getByLabelText('Time'); const component = getComponentNode(input); @@ -158,7 +169,11 @@ describe('The time component multiple', () => { test('Multiple time with one valid and one invalid input', async () => { const user = userEvent.setup({delay: 50}); - const {form} = await renderForm(multipleTimeForm); + const {form} = await renderForm(multipleTimeForm, { + evalContext: { + requiredFieldsWithAsterisk: true, + }, + }); await user.click(screen.getByRole('button', {name: 'Add Another'})); diff --git a/src/jstests/formio/utils.js b/src/jstests/formio/utils.js new file mode 100644 index 000000000..922f9106b --- /dev/null +++ b/src/jstests/formio/utils.js @@ -0,0 +1,16 @@ +import _ from 'lodash'; +import {Formio} from 'react-formio'; + +/** + * Render the form according to the provided form configuration and extra options. + * @param {Object} formConfig The form configuration. + * @param {Object} options Extra configuration options for the form. + * @return {Object} An object containing the form configuration and the container. + */ +export const renderForm = async (formConfig, options = {}) => { + let formJSON = _.cloneDeep(formConfig); + const container = document.createElement('div'); + document.body.appendChild(container); + const form = await Formio.createForm(container, formJSON, options); + return {form, container}; +}; diff --git a/src/vitest.setup.mjs b/src/vitest.setup.mjs index 13e9c2111..dceb2f0e3 100644 --- a/src/vitest.setup.mjs +++ b/src/vitest.setup.mjs @@ -3,7 +3,6 @@ // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; -import {Formio} from 'react-formio'; import mswServer from 'api-mocks/msw-server'; @@ -15,8 +14,8 @@ beforeAll(async () => { // Use our custom components by registering the custom Formio module. // The import must be dynamic, otherwise vi.mock fails in tests... - const OpenFormsModule = await import('formio/module'); - Formio.use(OpenFormsModule.default); + const formioInit = await import('formio-init'); + formioInit.initializeFormio(); }); afterEach(() => mswServer.resetHandlers()); afterAll(() => mswServer.close());