diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js index d9f003ad4..88521726f 100644 --- a/packages/fieldset/test/lion-fieldset.test.js +++ b/packages/fieldset/test/lion-fieldset.test.js @@ -9,8 +9,6 @@ import { } from '@open-wc/testing'; import sinon from 'sinon'; import { localizeTearDown } from '@lion/localize/test-helpers.js'; -import '@lion/input/lion-input.js'; - import '../lion-fieldset.js'; const tagString = 'lion-fieldset'; @@ -293,6 +291,38 @@ describe('', () => { el.formElements.color.modelValue = 'cat'; expect(el.error).to.deep.equal({}); }); + + it('validates on children (de)registration', async () => { + function hasEvenNumberOfChildren(modelValue) { + return { even: Object.keys(modelValue).length % 2 === 0 }; + } + const el = await fixture(html` + <${tag} .errorValidators=${[[hasEvenNumberOfChildren]]}> + + + `); + const child2 = await fixture( + html` + + `, + ); + + await nextFrame(); + expect(el.error.even).to.equal(true); + + el.appendChild(child2); + await nextFrame(); + expect(el.error.even).to.equal(undefined); + + el.removeChild(child2); + await nextFrame(); + expect(el.error.even).to.equal(true); + + // Edge case: remove all children + el.removeChild(el.querySelector('[id=c1]')); + await nextFrame(); + expect(el.error.even).to.equal(undefined); + }); }); describe('interaction states', () => { diff --git a/packages/validate/src/ValidateMixin.js b/packages/validate/src/ValidateMixin.js index 1a1a32f34..0de305129 100644 --- a/packages/validate/src/ValidateMixin.js +++ b/packages/validate/src/ValidateMixin.js @@ -386,10 +386,7 @@ export const ValidateMixin = dedupeMixin( */ validate() { if (this.modelValue === undefined) { - this.constructor.validationTypes.forEach(type => { - this[`${type}State`] = false; - this[type] = {}; - }); + this.__resetValidationStates(); return; } this.__oldValidationStates = this.getValidationStates(); @@ -399,6 +396,13 @@ export const ValidateMixin = dedupeMixin( this.dispatchEvent(new CustomEvent('validation-done', { bubbles: true, composed: true })); } + __resetValidationStates() { + this.constructor.validationTypes.forEach(type => { + this[`${type}State`] = false; + this[type] = {}; + }); + } + /** * Override if needed */ diff --git a/packages/validate/test/ValidateMixin.test.js b/packages/validate/test/ValidateMixin.test.js index c2af922c1..99dd36d44 100644 --- a/packages/validate/test/ValidateMixin.test.js +++ b/packages/validate/test/ValidateMixin.test.js @@ -513,6 +513,7 @@ describe('ValidateMixin', () => { `); el.modelValue = 'a'; + expect(el.errorState).to.equal(true); expect(el.warningState).to.equal(true); expect(el.infoState).to.equal(true); expect(el.successState).to.equal(true);