diff --git a/src/Wizard.unit.js b/src/Wizard.unit.js index 0b3df263a3..0c77c07b88 100644 --- a/src/Wizard.unit.js +++ b/src/Wizard.unit.js @@ -42,6 +42,7 @@ import formWithFormController from '../test/forms/formWithFormController'; import { fastCloneDeep } from './utils/utils'; import formsWithAllowOverride from '../test/forms/formsWithAllowOverrideComps'; import WizardWithCheckboxes from '../test/forms/wizardWithCheckboxes'; +import WizardWithRequiredFields from '../test/forms/wizardWithRequiredFields'; // eslint-disable-next-line max-statements describe('Wizard tests', () => { @@ -390,6 +391,46 @@ describe('Wizard tests', () => { .catch((err) => done(err)); }).timeout(6000); + it('Should trigger validation of nested wizard before going to the next page', function(done) { + const formElement = document.createElement('div'); + const wizard = new Wizard(formElement); + const nestedWizard = _.cloneDeep(WizardWithRequiredFields); + const clickEvent = new Event('click'); + + wizard.setForm(formWithNestedWizard).then(() => { + const nestedFormComp = wizard.getComponent('formNested'); + + nestedFormComp.loadSubForm = ()=> { + nestedFormComp.formObj = nestedWizard; + nestedFormComp.subFormLoading = false; + return new Promise((resolve) => resolve(nestedWizard)); + }; + + nestedFormComp.createSubForm(); + setTimeout(() => { + const checkPage = (pageNumber) => { + assert.equal(wizard.page, pageNumber, `Should open wizard page ${pageNumber + 1}`); + }; + checkPage(0); + const nestedWizardBreadcrumbBtn = _.get(wizard.refs, `${wizard.wizardKey}-link[2]`); + nestedWizardBreadcrumbBtn.dispatchEvent(clickEvent); + setTimeout(() => { + checkPage(2); + const nextBtn = _.get(wizard.refs, `${wizard.wizardKey}-next`); + nextBtn.dispatchEvent(clickEvent); + setTimeout(() => { + checkPage(2); + const errors = wizard.errors; + assert.equal(errors.length, 1, 'Must err before next page'); + assert.equal(errors[0].message, 'Text Field is required'); + done(); + }, 300) + }, 300) + }, 300) + }) + .catch((err) => done(err)); + }) + it('Should render values in HTML render mode', function(done) { const formElement = document.createElement('div'); const wizard = new Wizard(formElement, { diff --git a/src/components/_classes/nested/NestedComponent.js b/src/components/_classes/nested/NestedComponent.js index b8a16b7fb9..29c3bab572 100644 --- a/src/components/_classes/nested/NestedComponent.js +++ b/src/components/_classes/nested/NestedComponent.js @@ -762,8 +762,11 @@ export default class NestedComponent extends Field { ); } - validationProcessor({ scope, data, row, instance }, flags) { + validationProcessor({ scope, data, row, instance, component }, flags) { const { dirty } = flags; + if (this.root.hasExtraPages && this.page !== this.root.page) { + instance = this.getComponentById(component.id); + } if (!instance) { return; } diff --git a/test/forms/wizardWithRequiredFields.js b/test/forms/wizardWithRequiredFields.js new file mode 100644 index 0000000000..5f66463713 --- /dev/null +++ b/test/forms/wizardWithRequiredFields.js @@ -0,0 +1,42 @@ +export default { + 'type': 'form', + 'components': [ + { + 'title': 'Page With Required Field', + 'label': 'Page With Required Field', + 'type': 'panel', + 'key': 'pageWithRequiredField', + 'components': [ + { + 'label': 'Text Field', + 'applyMaskOn': 'change', + 'tableView': true, + 'validate': { + 'required': true + }, + 'validateWhenHidden': false, + 'key': 'textField', + 'type': 'textfield', + 'input': true + } + ], + 'input': false, + 'tableView': false + }, + { + 'title': 'Page 2', + 'label': 'Page 2', + 'type': 'panel', + 'key': 'page2', + 'input': false, + 'tableView': false, + 'components': [] + } + ], + 'revisions': '', + '_vid': 0, + 'title': 'nested wizard with required fields', + 'display': 'wizard', + 'name': 'nestedWizard', + 'path': 'nestedwizard' +} \ No newline at end of file