@worksafevictoria/wcl7.5 1.1.0-beta.5 → 1.1.0-beta.51

package/src/components/SubComponents/FormInstance/tests/flexbox.test.js

@@ -0,0 +1,71 @@
+import json from '../stories/mocks/flexbox.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'flexbox'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          columns: [
+            {
+              components: [
+                {
+                  attributes: { counter: 3 },
+                  clearOnHide: false,
+                  customClass: 'custom-formio-3',
+                  disabled: false,
+                  hideLabel: false,
+                  id: 'kitchen_sink_formio_v1--textbox1',
+                  input: true,
+                  key: 'textbox1',
+                  label: 'textbox1',
+                  labelPosition: 'top',
+                  mask: false,
+                  placeholder: "type 'show' to show textbox3",
+                  type: 'textfield',
+                  validate: { maxLength: 255, required: false }
+                }
+              ],
+              width: 6
+            },
+            {
+              components: [
+                {
+                  attributes: { counter: 4 },
+                  clearOnHide: true,
+                  customClass: 'custom-formio-4',
+                  disabled: false,
+                  hideLabel: false,
+                  id: 'kitchen_sink_formio_v1--textfield_regex_abc',
+                  input: true,
+                  key: 'textfield_regex_abc',
+                  label: 'textfield regex abc',
+                  labelPosition: 'top',
+                  mask: false,
+                  type: 'textfield',
+                  validate: { maxLength: 255, pattern: 'ab+c', required: false }
+                }
+              ],
+              width: 6
+            }
+          ],
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--url1',
+          input: false,
+          key: 'url1',
+          label: 'flexbox1',
+          labelPosition: 'top',
+          mask: false,
+          type: 'columns',
+          validate: {}
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/form-test-utils.js

@@ -0,0 +1,120 @@
+import * as formUtils from '../models/form-utils'
+import { FormRenderParser } from '../services/form-render-parser'
+import { FormSubmitParser } from '../services/form-submit-parser'
+
+export class FormTestUtils {
+  static initialiseParser = () => {
+    const parser = new FormRenderParser()
+    parser.initialise('', false)
+    let counter = 0
+    jest.spyOn(formUtils, 'generateUniqueId').mockImplementation(() => {
+      counter += 0
+      return counter
+    })
+    return parser
+  }
+
+  static getParsedComponentsFromJSON = (json) => {
+    const formIOform = FormTestUtils.getParsedFormFromJSON(json)
+    const components = JSON.parse(
+      JSON.stringify(formIOform.definition.components)
+    )
+    components.splice(-1)
+    return components
+  }
+
+  static getParsedFormFromJSON = (json) => {
+    const parser = FormTestUtils.initialiseParser()
+    return parser.parse(json, {})
+  }
+
+  static getSubmissionValue = (submissionMap, formioform) => {
+    const submitParser = new FormSubmitParser()
+    const submissionValue = submitParser.parse(
+      { data: submissionMap },
+      formioform,
+      {
+        components: formioform.definition.components.map((cmp) => ({
+          originalComponent: cmp
+        }))
+      }
+    )
+    delete submissionValue['webform_id']
+    return submissionValue
+  }
+
+  static handleSubmission = (json, componentValue) => {
+    const formioform = FormTestUtils.getParsedFormFromJSON(json)
+    const submissionMap = Object.keys(formioform.tree).reduce((prev, key) => {
+      prev[formioform.tree[key].getKey()] = componentValue
+      return prev
+    }, {})
+    return FormTestUtils.getSubmissionValue(submissionMap, formioform)
+  }
+
+  static getComparisonJSON = (json) => {
+    return json
+  }
+
+  static cleanUpWebformJSON = (json) => {
+    const cleanup = function(obj) {
+      if (obj === null || obj === undefined || typeof obj !== 'object') {
+        return obj
+      }
+      Object.keys(obj).forEach(function(key) {
+        if (
+          [
+            '#after_build',
+            '#allowed_tags',
+            '#element_validate',
+            '#groups',
+            '#webform_children',
+            '#process',
+            '#pre_render',
+            '#array_parents',
+            '#theme_wrappers',
+            '#value_callback',
+            '#webform_parent_flexbox',
+            '#webform_parent',
+            '#webform_parents',
+            '#parents',
+            '#ajax_processed',
+            '#sorted',
+            '#after_build_done',
+            '#errors',
+            '#webform_submission',
+            '#autocomplete_route_name',
+            '#theme',
+            '#webform_composite',
+            '#webform_parent_key',
+            '#webform_depth',
+            '#webform_multiple',
+            '#webform_composite',
+            '#processed',
+            '#defaults_loaded',
+            'headers',
+            '#_webform_access',
+            '#access',
+            '#attributes',
+            '#admin_title',
+            '#tree',
+            '#weigh',
+            '#size',
+            '#_webform_states',
+            '#weight',
+            '#cache',
+            '#attached',
+            '#_element_validate',
+            '#summary_attributes'
+          ].includes(key)
+        ) {
+          obj[key] = undefined
+        } else if (typeof obj[key] === 'object') {
+          return cleanup(obj[key])
+        }
+        return obj
+      })
+    }
+    return cleanup(json)
+  }
+}

package/src/components/SubComponents/FormInstance/tests/form.test.js

@@ -0,0 +1,26 @@
+import singlePageForm from '../stories/mocks/textfield.json'
+import wizard from '../stories/mocks/wizard.json'
+import { FormTestUtils } from './form-test-utils'
+
+describe(`Form parser`, () => {
+  it(`should render a single page form`, () => {
+    const form = getParsedComponentsFromJSON(singlePageForm)
+    expect(form).toEqual({ display: 'form' })
+  })
+
+  it(`should render a multi page form`, () => {
+    const form = getParsedComponentsFromJSON(wizard)
+    expect(form).toEqual({
+      display: 'wizard',
+      id: 'edit-elements'
+    })
+  })
+})
+
+const getParsedComponentsFromJSON = (json) => {
+  const parser = FormTestUtils.initialiseParser()
+  const formIOform = parser.parse(json, {})
+  const form = JSON.parse(JSON.stringify(formIOform.definition))
+  delete form.components
+  return form
+}

package/src/components/SubComponents/FormInstance/tests/hidden.test.js

@@ -0,0 +1,52 @@
+import json from '../stories/mocks/hidden.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'hidden'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          calculateValue: 'value = `hey ${ data.number1} is ${ 1 + 2 }`;',
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          defaultValue: 'hey {{ data.number1}} is {{ 1 + 2 }}',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--hidden1',
+          input: true,
+          key: 'hidden1',
+          label: 'hidden1',
+          labelPosition: 'top',
+          mask: false,
+          type: 'hidden',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 2 },
+          clearOnHide: true,
+          customClass: 'custom-formio-2',
+          decimalLimit: 0,
+          defaultValue: '4',
+          delimiter: true,
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--number1',
+          input: true,
+          inputFormat: 'plain',
+          key: 'number1',
+          label:
+            'This number component is used inside of the hidden component value',
+          labelPosition: 'top',
+          mask: false,
+          requireDecimal: false,
+          truncateMultipleSpaces: true,
+          type: 'number',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/horizontalrule.test.js

@@ -0,0 +1,31 @@
+import json from '../stories/mocks/horizontalrule.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'horizontal rule'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          content: '<hr/>',
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--horizontal_rule',
+          input: false,
+          key: 'horizontal_rule',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          tag: 'div',
+          refreshOnChange: false,
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/label.test.js

@@ -0,0 +1,31 @@
+import json from '../stories/mocks/label.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'label'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          content: '<label class="col-form-label">Custom Label</label>',
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--custom_label',
+          input: false,
+          key: 'custom_label',
+          label: 'Custom Label',
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/likert.test.js

@@ -0,0 +1,38 @@
+import json from '../stories/mocks/likert.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'likert'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          defaultValue: { q1: null, q2: null },
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--likert1',
+          input: true,
+          key: 'likert1',
+          label: 'likert1',
+          labelPosition: 'top',
+          mask: false,
+          questions: [
+            { label: 'q1', value: 'q1' },
+            { label: 'q2', value: 'q2' }
+          ],
+          type: 'survey',
+          validate: { required: false },
+          values: [
+            { label: 'a1', value: 'a1' },
+            { label: 'a2', value: 'a2' },
+            { label: 'N/A', value: 'n1' }
+          ]
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/message.test.js

@@ -0,0 +1,89 @@
+import json from '../stories/mocks/message.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'message'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          content:
+            '<div id="alert1" class="alert fade show alert-dismissible alert-success" role="alert">This is a status message<button type="button" class="close" data-dismiss="alert" aria-label="Close" id="alertDismiss1"><span aria-hidden="true">&times;</span></button></div>',
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--message1',
+          input: false,
+          key: 'message1',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 2 },
+          clearOnHide: true,
+          content:
+            '<div id="alert2" class="alert fade show alert-dismissible alert-danger" role="alert">This is an error message<button type="button" class="close" data-dismiss="alert" aria-label="Close" id="alertDismiss2"><span aria-hidden="true">&times;</span></button></div>',
+          customClass: 'custom-formio-2',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--message4',
+          input: false,
+          key: 'message4',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 3 },
+          clearOnHide: true,
+          content:
+            '<div id="alert3" class="alert fade show alert-dismissible alert-warning" role="alert">This is a warning message<button type="button" class="close" data-dismiss="alert" aria-label="Close" id="alertDismiss3"><span aria-hidden="true">&times;</span></button></div>',
+          customClass: 'custom-formio-3',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--message3',
+          input: false,
+          key: 'message3',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        },
+        {
+          attributes: { counter: 4 },
+          clearOnHide: true,
+          content:
+            '<div id="alert4" class="alert fade show alert-dismissible alert-info" role="alert">This is an info message<button type="button" class="close" data-dismiss="alert" aria-label="Close" id="alertDismiss4"><span aria-hidden="true">&times;</span></button></div>',
+          customClass: 'custom-formio-4',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--message2',
+          input: false,
+          key: 'message2',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/more.test.js

@@ -0,0 +1,32 @@
+import json from '../stories/mocks/more.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'more'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 2 },
+          clearOnHide: true,
+          content:
+            '<div class="more-text" id="more2"><div id="moretext2" style="display: none;">more content</div><small class="more-text__buttons" id="morebutton2" style="text-decoration: underline;cursor: pointer;" class="disable-caret">+ More Content</small></div>',
+          customClass: 'custom-formio-2',
+          disabled: false,
+          hideLabel: true,
+          id: 'kitchen_sink_formio_v1--more1',
+          input: false,
+          key: 'more1',
+          label: null,
+          labelPosition: 'top',
+          mask: false,
+          refreshOnChange: false,
+          tag: 'div',
+          type: 'htmlelement',
+          validate: { required: false }
+        }
+      ])
+    )
+  })
+})

package/src/components/SubComponents/FormInstance/tests/multiple.test.js

@@ -0,0 +1,71 @@
+import json from '../stories/mocks/multiple.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'multiple'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          addAnotherPosition: 'bottom',
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          components: [
+            {
+              attributes: { counter: 3 },
+              clearOnHide: true,
+              customClass: 'custom-formio-3',
+              disabled: false,
+              hideLabel: false,
+              id: 'kitchen_sink_formio_v1--tx1',
+              input: true,
+              key: 'tx1',
+              label: 'first name',
+              labelPosition: 'top',
+              mask: false,
+              type: 'textfield',
+              validate: { maxLength: 255 }
+            }
+          ],
+          customClass: 'custom-formio-1',
+          defaultValue: {},
+          disabled: false,
+          enableRowGroups: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--tx1',
+          initEmpty: false,
+          input: false,
+          key: 'tx1',
+          label: 'Enter guest names?',
+          labelPosition: 'top',
+          layoutFixed: false,
+          mask: false,
+          reorder: true,
+          type: 'datagrid',
+          validate: { maxLength: 3, minLength: 0 }
+        }
+      ])
+    )
+  })
+
+  it(`should return a submission value`, () => {
+    const formioform = FormTestUtils.getParsedFormFromJSON(json)
+    const submission = FormTestUtils.getSubmissionValue(
+      {
+        tx1: [
+          {
+            tx1: 'as'
+          },
+          {
+            tx1: 'sdsds'
+          }
+        ]
+      },
+      formioform
+    )
+    expect(submission).toEqual({
+      tx1: ['as', 'sdsds']
+    })
+  })
+})

package/src/components/SubComponents/FormInstance/tests/number.test.js

@@ -0,0 +1,51 @@
+import json from '../stories/mocks/number.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'number'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual([
+      {
+        attributes: { counter: 1 },
+        clearOnHide: true,
+        customClass: 'custom-formio-1',
+        decimalLimit: 2,
+        delimiter: true,
+        disabled: false,
+        hideLabel: false,
+        id: 'kitchen_sink_formio_v1--number1',
+        input: true,
+        inputFormat: 'plain',
+        key: 'number1',
+        label: 'Decimal with min and max',
+        labelPosition: 'top',
+        mask: false,
+        requireDecimal: true,
+        truncateMultipleSpaces: true,
+        type: 'number',
+        validate: { max: 10, min: 2, required: false }
+      },
+      {
+        attributes: { counter: 2 },
+        clearOnHide: true,
+        customClass: 'custom-formio-2',
+        decimalLimit: 0,
+        delimiter: true,
+        disabled: false,
+        hideLabel: false,
+        id: 'kitchen_sink_formio_v1--number2',
+        input: true,
+        inputFormat: 'plain',
+        key: 'number2',
+        label: 'Integer',
+        labelPosition: 'top',
+        mask: false,
+        requireDecimal: false,
+        truncateMultipleSpaces: true,
+        type: 'number',
+        validate: { required: false }
+      }
+    ])
+  })
+})

package/src/components/SubComponents/FormInstance/tests/radios.test.js

@@ -0,0 +1,34 @@
+import json from '../stories/mocks/radios.json'
+import { FormTestUtils } from './form-test-utils'
+
+const testComponent = 'radios'
+describe(`Form ${testComponent} parser`, () => {
+  it(`should render a ${testComponent} component`, () => {
+    const components = FormTestUtils.getParsedComponentsFromJSON(json)
+    expect(components).toEqual(
+      FormTestUtils.getComparisonJSON([
+        {
+          attributes: { counter: 1 },
+          clearOnHide: true,
+          customClass: 'custom-formio-1',
+          disabled: false,
+          hideLabel: false,
+          id: 'kitchen_sink_formio_v1--radioconditional',
+          inline: false,
+          input: true,
+          key: 'radioconditional',
+          label: 'radioConditional',
+          labelPosition: 'top',
+          mask: false,
+          optionsLabelPosition: 'right',
+          type: 'radio',
+          validate: { required: false },
+          values: [
+            { label: 'Yes', value: 'Yes' },
+            { label: 'No', value: 'No' }
+          ]
+        }
+      ])
+    )
+  })
+})