[#3383] Added tests for plugin validator

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

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};

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

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<br>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);
+  });
+});