Skip to content

Commit

Permalink
🧪 [#607] Add regression tests for phone numbers that should not validate
Browse files Browse the repository at this point in the history
  • Loading branch information
sergei-maertens committed Dec 7, 2023
1 parent b405923 commit f9cedbf
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 1 deletion.
73 changes: 73 additions & 0 deletions src/formio/components/PhoneNumberField.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import {screen, waitFor} from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import _ from 'lodash';
import {Formio} from 'react-formio';

import OpenFormsModule from 'formio/module';

// Use our custom components
Formio.use(OpenFormsModule);

const phoneForm = {
type: 'form',
components: [
{
key: 'phoneNumber',
type: 'phoneNumber',
input: true,
label: 'Phone number',
inputMask: null,
},
],
};

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 = '';
});

it.each([['+31612345678'], ['0031612345678'], ['01612345678'], ['1234']])(
'accepts numbers and + as first character (value: %i)',
async value => {
const user = userEvent.setup({delay: 50});
const {form} = await renderForm();

const input = screen.getByLabelText('Phone number');
expect(input).toBeVisible();
await user.type(input, value);
expect(input).toHaveDisplayValue(value);

const component = form.getComponent('phoneNumber');
expect(component.getValue()).toBe(value);
expect(form.isValid()).toBe(true);
}
);

it.each([['-31612345678'], ['(06)12345678'], [' 01612345678'], ['$1234']])(
'only allows numbers and + as first character (value: %i)',
async value => {
const user = userEvent.setup({delay: 50});
const {form} = await renderForm();

const input = screen.getByLabelText('Phone number');
expect(input).toBeVisible();
await user.type(input, value);
expect(input).toHaveDisplayValue(value);

const component = form.getComponent('phoneNumber');
expect(component.getValue()).toBe(value);
await waitFor(() => {
expect(form.isValid()).toBe(false);
});
expect(await screen.findByText('Invalid Phone Number')).toBeVisible();
}
);
});
4 changes: 3 additions & 1 deletion src/formio/components/PhoneNumberField.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default {
decorators: [withUtrechtDocument],
args: {
type: 'phoneNumber',
extraComponentProperties: {},
extraComponentProperties: {
inputMask: null,
},
evalContext: {},
},
argTypes: {
Expand Down

0 comments on commit f9cedbf

Please sign in to comment.