From 04ab7ff0af0299d17d29ca9aeec75e76a156a97b Mon Sep 17 00:00:00 2001 From: felixw Date: Mon, 25 Sep 2023 13:22:59 +0200 Subject: [PATCH 1/5] fix: update parent checkbox state when new children are added dynamically --- .../checkbox-group/checkbox-group.tsx | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index b1ef173009..1b0f8f57f9 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -58,6 +58,8 @@ export class CheckboxGroup { private groupNode; private actionText: string; + private observer: MutationObserver; + @Listen('scaleChange') handleCheckboxChange(ev) { const el = ev.composedPath()[0]; @@ -95,6 +97,23 @@ export class CheckboxGroup { } } + componentDidLoad() { + this.updateParentCheckboxState(); + const slot = this.host.querySelector('fieldset'); + this.observer = new MutationObserver(() => { + this.updateParentCheckboxState(); + }); + this.observer.observe(slot, { + childList: true, + }); + } + + disconnectedCallback() { + if (this.observer) { + this.observer.disconnect(); + } + } + getChildNodes() { return Array.from( this.host.querySelector('fieldset').querySelectorAll('scale-checkbox') @@ -161,8 +180,4 @@ export class CheckboxGroup { ); } - - componentDidLoad() { - this.updateParentCheckboxState(); - } } From f9947a3dd37062bf52e1cebef355dc7c99187795 Mon Sep 17 00:00:00 2001 From: felixw Date: Mon, 25 Sep 2023 13:24:49 +0200 Subject: [PATCH 2/5] fix: naming --- .../src/components/checkbox-group/checkbox-group.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index 1b0f8f57f9..55a2e9e0e7 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -99,11 +99,11 @@ export class CheckboxGroup { componentDidLoad() { this.updateParentCheckboxState(); - const slot = this.host.querySelector('fieldset'); + const fieldset = this.host.querySelector('fieldset'); this.observer = new MutationObserver(() => { this.updateParentCheckboxState(); }); - this.observer.observe(slot, { + this.observer.observe(fieldset, { childList: true, }); } From a8cfa82fee5fb62d9a63b836220894d49dce7e23 Mon Sep 17 00:00:00 2001 From: felixw Date: Sat, 30 Sep 2023 16:05:57 +0200 Subject: [PATCH 3/5] test: mock mutationobserver --- .../components/checkbox-group/checkbox-group.spec.ts | 6 ++++++ .../src/components/checkbox-group/checkbox-group.tsx | 9 ++++++--- packages/components/stencil.config.ts | 1 + packages/components/test-setup.ts | 12 ++++++++++++ 4 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 packages/components/test-setup.ts diff --git a/packages/components/src/components/checkbox-group/checkbox-group.spec.ts b/packages/components/src/components/checkbox-group/checkbox-group.spec.ts index e755537ac2..29cb92f642 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.spec.ts +++ b/packages/components/src/components/checkbox-group/checkbox-group.spec.ts @@ -3,6 +3,12 @@ import { CheckboxGroup } from './checkbox-group'; describe('CheckboxGroup', () => { it('should match standard snapshot', async () => { + const MutationObserver = class { + constructor(callback) {} + disconnect() {} + observe(element, initObject) {} + }; + const page = await newSpecPage({ components: [CheckboxGroup], html: ` diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index 55a2e9e0e7..554e4e9df9 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -26,7 +26,10 @@ import statusNote from '../../utils/status-note'; styleUrl: './checkbox-group.css', shadow: false, }) + export class CheckboxGroup { + observer: MutationObserver; + @Element() host: HTMLElement; /** (optional) Input name */ @@ -58,7 +61,6 @@ export class CheckboxGroup { private groupNode; private actionText: string; - private observer: MutationObserver; @Listen('scaleChange') handleCheckboxChange(ev) { @@ -100,12 +102,13 @@ export class CheckboxGroup { componentDidLoad() { this.updateParentCheckboxState(); const fieldset = this.host.querySelector('fieldset'); - this.observer = new MutationObserver(() => { + const mo = new MutationObserver(() => { this.updateParentCheckboxState(); }); - this.observer.observe(fieldset, { + mo.observe(fieldset, { childList: true, }); + this.observer = mo; } disconnectedCallback() { diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts index 15187f38e7..7ba424577c 100644 --- 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 new file mode 100644 index 0000000000..19ac5d11ba --- /dev/null +++ b/packages/components/test-setup.ts @@ -0,0 +1,12 @@ +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; + \ No newline at end of file From b42f431ec43f9460fb662c103cd493e73b303295 Mon Sep 17 00:00:00 2001 From: felixw Date: Wed, 4 Oct 2023 11:04:31 +0200 Subject: [PATCH 4/5] fix: remove wrong mock --- .../src/components/checkbox-group/checkbox-group.spec.ts | 8 +------- 1 file changed, 1 insertion(+), 7 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 index 29cb92f642..c5ce40033e 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.spec.ts +++ b/packages/components/src/components/checkbox-group/checkbox-group.spec.ts @@ -3,15 +3,9 @@ import { CheckboxGroup } from './checkbox-group'; describe('CheckboxGroup', () => { it('should match standard snapshot', async () => { - const MutationObserver = class { - constructor(callback) {} - disconnect() {} - observe(element, initObject) {} - }; - const page = await newSpecPage({ components: [CheckboxGroup], - html: ` + html: `
Date: Wed, 4 Oct 2023 12:02:31 +0200 Subject: [PATCH 5/5] style: format --- .../checkbox-group/checkbox-group.tsx | 2 -- packages/components/test-setup.ts | 21 +++++++++---------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx index 554e4e9df9..ec800bcb9c 100644 --- a/packages/components/src/components/checkbox-group/checkbox-group.tsx +++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx @@ -26,7 +26,6 @@ import statusNote from '../../utils/status-note'; styleUrl: './checkbox-group.css', shadow: false, }) - export class CheckboxGroup { observer: MutationObserver; @@ -61,7 +60,6 @@ export class CheckboxGroup { private groupNode; private actionText: string; - @Listen('scaleChange') handleCheckboxChange(ev) { const el = ev.composedPath()[0]; diff --git a/packages/components/test-setup.ts b/packages/components/test-setup.ts index 19ac5d11ba..dcdd866aa7 100644 --- a/packages/components/test-setup.ts +++ b/packages/components/test-setup.ts @@ -1,12 +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; - \ No newline at end of file + 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;