FIO-9350 Wizard: Add test for maintaining form errors after failed su…

…bmit - Show form-level errors after failed submission even when the current page has no errors
formio · Nov 25, 2024 · 34cf9a2 · 34cf9a2
1 parent 6380e84
commit 34cf9a2
Show file tree

Hide file tree

Showing 2 changed files with 174 additions and 0 deletions.
diff --git a/test/forms/simpleWizardWithRequiredFields.js b/test/forms/simpleWizardWithRequiredFields.js
@@ -0,0 +1,140 @@
+export default {
+    "_id": "6740b7686f3a02cd736b5750",
+    "title": "form123",
+    "name": "form123",
+    "path": "form123",
+    "type": "form",
+    "display": "wizard",
+    "tags": [],
+    "access": [
+        {
+            "type": "read_all",
+            "roles": [
+                "6740b7686f3a02cd736b56f3",
+                "6740b7686f3a02cd736b56f7",
+                "6740b7686f3a02cd736b56fb",
+                "6740b7686f3a02cd736b56ff",
+                "6740b7686f3a02cd736b5703",
+                "6740b7686f3a02cd736b5707",
+                "6740b7686f3a02cd736b570b",
+                "6740b7686f3a02cd736b570f",
+                "6740b7686f3a02cd736b5713",
+                "6740b7686f3a02cd736b5717",
+                "6740b7686f3a02cd736b571b",
+                "6740b7686f3a02cd736b571f",
+                "6740b7686f3a02cd736b5723",
+                "6740b7686f3a02cd736b5727",
+                "6740b7686f3a02cd736b572b",
+                "6740b7686f3a02cd736b572f",
+                "6740b7686f3a02cd736b5733",
+                "6740b7686f3a02cd736b5737",
+                "6740b7686f3a02cd736b573b",
+                "6740b7686f3a02cd736b573f",
+                "6740b7686f3a02cd736b5743",
+                "6740b7686f3a02cd736b5747",
+                "6740b7686f3a02cd736b574b"
+            ]
+        }
+    ],
+    "submissionAccess": [],
+    "owner": null,
+    "components": [
+        {
+            "title": "Page 1",
+            "breadcrumbClickable": true,
+            "buttonSettings": {
+                "previous": true,
+                "cancel": false,
+                "next": true
+            },
+            "navigateOnEnter": false,
+            "saveOnEnter": false,
+            "scrollToTop": false,
+            "collapsible": false,
+            "key": "page1",
+            "type": "panel",
+            "label": "Page 1",
+            "components": [
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "validate": {
+                        "required": true
+                    },
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                }
+            ],
+            "input": false,
+            "tableView": false
+        },
+        {
+            "title": "Page 2",
+            "breadcrumbClickable": true,
+            "buttonSettings": {
+                "previous": true,
+                "cancel": true,
+                "next": true
+            },
+            "navigateOnEnter": false,
+            "saveOnEnter": false,
+            "scrollToTop": false,
+            "collapsible": false,
+            "key": "page2",
+            "type": "panel",
+            "label": "Page 2",
+            "components": [
+                {
+                    "label": "Number",
+                    "applyMaskOn": "change",
+                    "mask": false,
+                    "tableView": false,
+                    "delimiter": false,
+                    "requireDecimal": false,
+                    "inputFormat": "plain",
+                    "truncateMultipleSpaces": false,
+                    "key": "number",
+                    "type": "number",
+                    "input": true
+                }
+            ],
+            "input": false,
+            "tableView": false
+        },
+        {
+            "title": "Page 3",
+            "label": "Page 3",
+            "type": "panel",
+            "key": "page3",
+            "components": [
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "validate": {
+                        "required": true
+                    },
+                    "validateWhenHidden": false,
+                    "key": "textField1",
+                    "type": "textfield",
+                    "input": true
+                }
+            ],
+            "input": false,
+            "tableView": false
+        }
+    ],
+    "pdfComponents": [],
+    "settings": {},
+    "properties": {},
+    "machineName": "authoring-bsajzvvuohccvoq:form123",
+    "project": "6740b7686f3a02cd736b56e9",
+    "controller": "",
+    "revisions": "",
+    "submissionRevisions": "",
+    "_vid": 0,
+    "created": "2024-11-22T16:55:04.926Z",
+    "modified": "2024-11-22T16:55:04.928Z"
+};
diff --git a/test/unit/Wizard.unit.js b/test/unit/Wizard.unit.js
@@ -42,6 +42,7 @@ import formsWithAllowOverride from '../forms/formsWithAllowOverrideComps';
 import WizardWithCheckboxes from '../forms/wizardWithCheckboxes';
 import WizardWithRequiredFields from '../forms/wizardWithRequiredFields';
 import formWithNestedWizardAndRequiredFields from '../forms/formWithNestedWizardAndRequiredFields';
+import simpleWizardWithRequiredFields from '../forms/simpleWizardWithRequiredFields';
 import { wait } from '../util';
 
 // eslint-disable-next-line max-statements
@@ -630,6 +631,39 @@ describe('Wizard tests', () => {
     .catch((err) => done(err));
   })
 
+  it('Should show form-level errors after failed submission even when the current page has no errors', async () => {
+    const formElement = document.createElement('div');
+    const wizard = new Wizard(formElement);
+    await wizard.setForm(simpleWizardWithRequiredFields);
+    // link[2] is the button for page 3
+    clickWizardBtn(wizard, 'link[2]');
+    await wait(200);
+    // need to click on page 3 and submit the form to see all the errors
+    // you can't submit the form without first navigating to page 3
+    wizard.submit();
+    await wait(400);
+    const getRequiredFieldErrors = () => 
+        wizard.errors.filter(error => error.message === 'Text Field is required' && 
+          ['Page 1', 'Page 3'].includes(error.component.parent.title));
+
+    assert.equal(getRequiredFieldErrors().length, 2);      
+    // navigate to page 2
+    clickWizardBtn(wizard, 'link[1]');
+    await wait(200);
+    // the form-level errors should still be the same
+    assert.equal(getRequiredFieldErrors().length, 2); 
+    // navigate to page 1 
+    clickWizardBtn(wizard, 'link[0]');
+    const page1Input = wizard.element.querySelector('input[name="data[textField]"]');
+    const inputEvent = new Event('input');
+    page1Input.value = '1';
+    page1Input.dispatchEvent(inputEvent);
+    await wait(200);
+    // maintain form-level error after supplying value for one required field
+    assert.equal(getRequiredFieldErrors().length, 1); 
+    assert.equal(getRequiredFieldErrors()[0].component.parent.title, 'Page 3'); 
+  });
+
   it('Should render values in HTML render mode', function(done) {
     const formElement = document.createElement('div');
     const wizard = new Wizard(formElement, {