fix(fieldset): test validation after dynamic child removal/addition

Author: tlouisse

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('<lion-fieldset>', () => {
       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]]}>
+          <lion-input id="c1" name="c1"></lion-input>
+        </${tag}>
+      `);
+      const child2 = await fixture(
+        html`
+          <lion-input name="c2"></lion-input>
+        `,
+      );
+
+      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', () => {

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
        */

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);