diff --git a/src/formio/validators/plugins.js b/src/formio/validators/plugins.js index d2fda7fc9..913106e6c 100644 --- a/src/formio/validators/plugins.js +++ b/src/formio/validators/plugins.js @@ -8,7 +8,7 @@ const errorMessageMap = { 'phonenumber-nl': 'Invalid Dutch phonenumber', }; -const pluginsAPIValidator = { +export const pluginsAPIValidator = { key: `validate.backendApi`, message(component) { return component.t(component.errorMessage('Invalid'), { @@ -47,7 +47,6 @@ const pluginsAPIValidator = { */ const enableValidationPlugins = component => { if (Array.isArray(component.component.validate.plugins)) { - debugger; component.component.validateOn = 'blur'; component.validator.validators.backendApi = pluginsAPIValidator; component.validators.push('backendApi'); diff --git a/src/jstests/formio/components/fixtures/phonenumber.js b/src/jstests/formio/components/fixtures/phonenumber.js new file mode 100644 index 000000000..fa25c7604 --- /dev/null +++ b/src/jstests/formio/components/fixtures/phonenumber.js @@ -0,0 +1,15 @@ +const phoneNumberComponent = { + label: 'Phone Number', + key: 'phonenumber', + type: 'phoneNumber', + input: true, + validate: { + backendApi: true, + plugins: ['phonenumber-international', 'phonenumber-nl'], + }, +}; + +const validSamples = ['630123456', '+31630123456']; +const inValidSamples = ['63012345', '+3163012345']; + +export {phoneNumberComponent, validSamples, inValidSamples}; diff --git a/src/jstests/formio/validators/mocks.js b/src/jstests/formio/validators/mocks.js index 9a037663f..f3af7bca6 100644 --- a/src/jstests/formio/validators/mocks.js +++ b/src/jstests/formio/validators/mocks.js @@ -2,12 +2,30 @@ import {rest} from 'msw'; import {BASE_URL} from 'api-mocks'; -const VALIDATION_ENDPOINT = `${BASE_URL}validation/plugins/phonenumber-international`; - -export const mockValidationGet = rest.get(VALIDATION_ENDPOINT, (req, res, ctx) => { - const response = { - isValid: true, - messages: [], - }; - return res(ctx.status(200), ctx.json(response)); +const INTERNATIONAL_VALIDATION_ENDPOINT = `${BASE_URL}validation/plugins/phonenumber-international`; +const DUTCH_VALIDATION_ENDPOINT = `${BASE_URL}validation/plugins/phonenumber-nl`; + +export const mockInternationalValidPost = rest.post( + INTERNATIONAL_VALIDATION_ENDPOINT, + async (req, res, ctx) => { + return res(ctx.status(200), ctx.json({isValid: true, messages: []})); + } +); + +export const mockInternationalInValidPost = rest.post( + INTERNATIONAL_VALIDATION_ENDPOINT, + async (req, res, ctx) => { + return res( + ctx.status(200), + ctx.json({isValid: false, messages: ['Invalid international phone number']}) + ); + } +); + +export const mockDutchValidPost = rest.post(DUTCH_VALIDATION_ENDPOINT, async (req, res, ctx) => { + return res(ctx.status(200), ctx.json({isValid: true, messages: []})); +}); + +export const mockDutchInValidPost = rest.post(DUTCH_VALIDATION_ENDPOINT, async (req, res, ctx) => { + return res(ctx.status(200), ctx.json({isValid: false, messages: ['Invalid dutch phone number']})); }); diff --git a/src/jstests/formio/validators/pluginApiValidator.spec.js b/src/jstests/formio/validators/pluginApiValidator.spec.js deleted file mode 100644 index 4cf489405..000000000 --- a/src/jstests/formio/validators/pluginApiValidator.spec.js +++ /dev/null @@ -1,14 +0,0 @@ -import {BASE_URL} from 'api-mocks'; -import mswServer from 'api-mocks/msw-server'; - -import { - mockValidationGet -} from './mocks'; -import pluginsAPIValidator from '..validators/pluginsAPIValidator'; - -describe('The OpenForms validation', () => { - it('tests...', async () => { - mswServer.use(mockValidationGet); - const pluginvalidator = pluginsAPIValidator; - - diff --git a/src/jstests/formio/validators/pluginapivalidator.spec.js b/src/jstests/formio/validators/pluginapivalidator.spec.js new file mode 100644 index 000000000..3d8859a36 --- /dev/null +++ b/src/jstests/formio/validators/pluginapivalidator.spec.js @@ -0,0 +1,65 @@ +import { + inValidSamples, + phoneNumberComponent, + validSamples, +} from 'jstests/formio/components/fixtures/phonenumber'; +import {invalid} from 'moment'; + +import {BASE_URL} from 'api-mocks'; +import mswServer from 'api-mocks/msw-server'; +import {pluginsAPIValidator} from 'formio/validators/plugins'; + +import { + mockDutchInValidPost, + mockDutchValidPost, + mockInternationalInValidPost, + mockInternationalValidPost, +} from './mocks'; + +describe('The OpenForms plugins validation', () => { + test('tests expected errors are returned when phone number is invalid', async () => { + mswServer.use(mockDutchInValidPost, mockInternationalInValidPost); + + const component = { + component: phoneNumberComponent, + options: { + baseUrl: BASE_URL, + }, + }; + + for (const sample of inValidSamples) { + const result = await pluginsAPIValidator.check(component, undefined, sample); + expect(result).toBe('Invalid international phone number
Invalid dutch phone number'); + } + }); + + test('tests no errors are returned when phone number is valid', async () => { + mswServer.use(mockDutchValidPost, mockInternationalValidPost); + + const component = { + component: phoneNumberComponent, + options: { + baseUrl: BASE_URL, + }, + }; + + for (const sample of validSamples) { + const result = await pluginsAPIValidator.check(component, undefined, sample); + expect(result).toBe(true); + } + }); + + test('tests no errors are returned when phone number is null', async () => { + mswServer.use(mockDutchValidPost, mockInternationalValidPost); + + const component = { + component: phoneNumberComponent, + options: { + baseUrl: BASE_URL, + }, + }; + + const result = await pluginsAPIValidator.check(component, undefined, null); + expect(result).toBe(true); + }); +});