diff --git a/core/src/components/cat-select/cat-select.e2e.ts b/core/src/components/cat-select/cat-select.e2e.ts index 4a7762b80..1b5882622 100644 --- a/core/src/components/cat-select/cat-select.e2e.ts +++ b/core/src/components/cat-select/cat-select.e2e.ts @@ -13,4 +13,34 @@ describe('cat-select', () => { const element = await page.find('cat-select'); expect(element).toHaveClass('hydrated'); }); + + it('should not emit catChange event on initialization with value', async () => { + const page = await newE2EPage(); + await page.setContent(` + + + `); + + const select = await page.find('cat-select'); + const changeSpy = await select.spyOnEvent('catChange'); + + await page.waitForChanges(); + + expect(changeSpy).not.toHaveReceivedEvent(); + }); }); diff --git a/core/src/components/cat-select/cat-select.spec.tsx b/core/src/components/cat-select/cat-select.spec.tsx index 10b5516bc..fbecb6a23 100644 --- a/core/src/components/cat-select/cat-select.spec.tsx +++ b/core/src/components/cat-select/cat-select.spec.tsx @@ -2,6 +2,7 @@ jest.mock('../cat-i18n/cat-i18n-registry'); import { newSpecPage } from '@stencil/core/testing'; import { CatSelect } from './cat-select'; +import { stringArrayConnector } from './connectors'; describe('cat-select', () => { it('renders', async () => { @@ -13,4 +14,70 @@ describe('cat-select', () => { `); }); + + describe('catChange', () => { + it('should not emit catChange event on initialization with value', async () => { + const page = await newSpecPage({ + components: [CatSelect], + html: `` + }); + + const select = page.rootInstance as CatSelect; + const catChangeSpy = jest.fn(); + + page.root?.addEventListener('catChange', catChangeSpy); + + await select.connect(stringArrayConnector(['option1', 'option2', 'option3'])); + await page.waitForChanges(); + + expect(catChangeSpy).not.toHaveBeenCalled(); + }); + + it('should emit catChange event when selection state changes from user interaction', async () => { + const page = await newSpecPage({ + components: [CatSelect], + html: `` + }); + + const select = page.rootInstance as CatSelect; + let eventEmitted = false; + + await select.connect(stringArrayConnector(['option1', 'option2', 'option3'])); + await page.waitForChanges(); + + page.root?.addEventListener('catChange', () => { + eventEmitted = true; + }); + + // Directly update selection state (simulating what happens after user interaction) + // This mimics the internal flow when user clicks an option + select['patchState']({ + selection: [{ item: { id: 'option1' }, render: { label: 'option1' } }], + tempSelection: [] + }); + await page.waitForChanges(); + + expect(eventEmitted).toBe(true); + }); + + it('should not emit catChange event when value is changed programmatically', async () => { + const page = await newSpecPage({ + components: [CatSelect], + html: `` + }); + + const select = page.rootInstance as CatSelect; + const catChangeSpy = jest.fn(); + + await select.connect(stringArrayConnector(['option1', 'option2', 'option3'])); + await page.waitForChanges(); + + page.root?.addEventListener('catChange', catChangeSpy); + + select.value = 'option2'; + await page.waitForChanges(); + + expect(catChangeSpy).not.toHaveBeenCalled(); + }); + }); }); diff --git a/core/src/components/cat-select/cat-select.tsx b/core/src/components/cat-select/cat-select.tsx index 398e1fbc3..4de9b7a94 100644 --- a/core/src/components/cat-select/cat-select.tsx +++ b/core/src/components/cat-select/cat-select.tsx @@ -339,8 +339,8 @@ export class CatSelect { if (!oldState.isResolving) { this.valueChangedBySelection = true; this.value = newValue; + this.catChange.emit(); } - this.catChange.emit(); this.showErrorsIfTimeout(); } }