fix: update parent checkbox state when new children are added dynamic…

…ally (#2145) * fix: update parent checkbox state when new children are added dynamically
telekom · Oct 12, 2023 · 5d8d71f · 5d8d71f
1 parent 0ef89a0
commit 5d8d71f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.spec.ts b/packages/components/src/components/checkbox-group/checkbox-group.spec.ts
@@ -5,7 +5,7 @@ describe('CheckboxGroup', () => {
   it('should match standard snapshot', async () => {
     const page = await newSpecPage({
       components: [CheckboxGroup],
-      html: ` <scale-checkbox-group>
+      html: `<scale-checkbox-group>
       <div slot="checkbox-header">
         <scale-checkbox
           input-id="header-checkbox"

diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -27,6 +27,8 @@ import statusNote from '../../utils/status-note';
   shadow: false,
 })
 export class CheckboxGroup {
+  observer: MutationObserver;
+
   @Element() host: HTMLElement;
 
   /** (optional) Input name */
@@ -95,6 +97,24 @@ export class CheckboxGroup {
     }
   }
 
+  componentDidLoad() {
+    this.updateParentCheckboxState();
+    const fieldset = this.host.querySelector('fieldset');
+    const mo = new MutationObserver(() => {
+      this.updateParentCheckboxState();
+    });
+    mo.observe(fieldset, {
+      childList: true,
+    });
+    this.observer = mo;
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   getChildNodes() {
     return Array.from(
       this.host.querySelector('fieldset').querySelectorAll('scale-checkbox')
@@ -161,8 +181,4 @@ export class CheckboxGroup {
       </Host>
     );
   }
-
-  componentDidLoad() {
-    this.updateParentCheckboxState();
-  }
 }
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
@@ -18,6 +18,7 @@ export const config: Config = {
       '!**/node_modules/**',
       '!**/*.{d,esm,iife,styles}.ts',
     ],
+    setupFilesAfterEnv: ['./test-setup.ts'],
   },
   namespace: 'scale-components',
   globalScript: 'src/global/scale.ts',

diff --git a/packages/components/test-setup.ts b/packages/components/test-setup.ts
@@ -0,0 +1,11 @@
+const mutationObserverMock = jest.fn(function MutationObserver(callback) {
+  this.observe = jest.fn();
+  this.disconnect = jest.fn();
+  // // Optionally add a trigger() method to manually trigger a change
+  this.trigger = (mockedMutationsList) => {
+    callback(mockedMutationsList, this);
+  };
+});
+
+// Mock the global MutationObserver object
+global.MutationObserver = mutationObserverMock as jest.Mock;