diff --git a/packages/validate/__tests__/jest/api/api.js b/packages/validate/__tests__/jest/api/api.js index c3e46957..5f601499 100644 --- a/packages/validate/__tests__/jest/api/api.js +++ b/packages/validate/__tests__/jest/api/api.js @@ -28,6 +28,28 @@ describe("Validate > Integration > API > addGroup", () => { }); }); + it("should find errors in an added validation group", async () => { + document.body.innerHTML = `
+ + You must enter a value + +
`; + const input = document.querySelector("#group1-1"); + const validator = validate("form")[0]; + + expect(validator.getState().groups).toEqual({}); + input.setAttribute("required", "required"); + validator.addGroup([input]); + console.log(validator.getState().errors); + expect(validator.getState().errors).toEqual({ + group1: "You must enter a value", + }); +}); + it("should return leave state unchanged if it cannot add the validation group", async () => { document.body.innerHTML = `
diff --git a/packages/validate/__tests__/jest/reducers.js b/packages/validate/__tests__/jest/reducers.js index 22020a0e..6b4f2999 100644 --- a/packages/validate/__tests__/jest/reducers.js +++ b/packages/validate/__tests__/jest/reducers.js @@ -350,7 +350,8 @@ describe('Validate > Unit > Reducers > Add group', () => { validators: [], valid: false } - } + }, + errors: {} }; const newGroup = { group3: { @@ -359,7 +360,7 @@ describe('Validate > Unit > Reducers > Add group', () => { valid: false } }; - const output = Reducers[ACTIONS.ADD_GROUP](state, newGroup); + const output = Reducers[ACTIONS.ADD_GROUP](state, newGroup, {}); expect(output).toEqual({ groups: { group1: { @@ -378,7 +379,8 @@ describe('Validate > Unit > Reducers > Add group', () => { validators: [], valid: false } - } + }, + errors: {} }); }); }); @@ -413,4 +415,41 @@ describe('Validate > Unit > Reducers > Remove group', () => { } }); }); + + it('should remove errors associated with a validation group', async () => { + expect.assertions(1); + const state = { + groups: { + group1: { + fields: [document.createElement('input')], + validators: [], + errorMessages: ['This field is required'], + valid: false + }, + group2: { + fields: [document.createElement('input')], + validators: [], + valid: false + } + }, + errors: { + group1: 'This field is required', + group2: 'This field is required' + } + }; + const output = Reducers[ACTIONS.REMOVE_GROUP](state, 'group2'); + expect(output).toEqual({ + groups: { + group1: { + fields: [document.createElement('input')], + validators: [], + errorMessages: ['This field is required'], + valid: false + } + }, + errors: { + group1: 'This field is required' + } + }); + }); }); \ No newline at end of file diff --git a/packages/validate/src/lib/factory/group.js b/packages/validate/src/lib/factory/group.js index de14e1c9..bee7b7a2 100644 --- a/packages/validate/src/lib/factory/group.js +++ b/packages/validate/src/lib/factory/group.js @@ -6,6 +6,7 @@ import { reduceErrorMessages } from '../validator'; import { initRealTimeValidation } from '../validator/real-time-validation'; import { renderError, clearError, addAXAttributes } from '../dom'; +import { findErrors } from '../validator/utils'; import { ACTIONS } from '../constants'; import reducers from '../reducers'; @@ -20,7 +21,7 @@ export const addGroup = store => nodes => { const groups = removeUnvalidatableGroups(nodes.reduce(assembleValidationGroup, {})); if (Object.keys(groups).length === 0) return console.warn('Group cannot be added.'); - store.update(reducers[ACTIONS.ADD_GROUP](store.getState(), groups), [ addAXAttributes, () => { + store.update(reducers[ACTIONS.ADD_GROUP](store.getState(), groups, findErrors(groups)), [ addAXAttributes, () => { if (store.getState().realTimeValidation) { //if we're already in realtime validation then we need to re-start it with the newly added group initRealTimeValidation(store); diff --git a/packages/validate/src/lib/reducers/index.js b/packages/validate/src/lib/reducers/index.js index 0df9d04b..029672d9 100644 --- a/packages/validate/src/lib/reducers/index.js +++ b/packages/validate/src/lib/reducers/index.js @@ -21,14 +21,21 @@ export default { groups: Object.assign({}, state.groups, nextGroup) }); }, - [ACTIONS.ADD_GROUP]: (state, data) => Object.assign({}, state, { - groups: Object.assign({}, state.groups, data) + [ACTIONS.ADD_GROUP]: (state, groups, errors) => Object.assign({}, state, { + groups: Object.assign({}, state.groups, groups), + errors: Object.assign({}, state.errors, errors) }), [ACTIONS.REMOVE_GROUP]: (state, groupName) => Object.assign({}, state, { groups: Object.keys(state.groups).reduce((acc, group) => { if (group !== groupName) acc[group] = state.groups[group]; return acc; - }, {}) + }, {}), + ...(state.errors !== undefined ? { + errors: Object.keys(state.errors).reduce((acc, error) => { + if (error !== groupName) acc[error] = state.errors[error]; + return acc; + }, {}) + } : {}) }), [ACTIONS.ADD_VALIDATION_METHOD]: (state, data) => { const nextGroup = Object.assign({},