diff --git a/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx b/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx index 588c7b96f7..db7b6b945c 100644 --- a/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx +++ b/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx @@ -38,12 +38,16 @@ export class OdsCheckbox { @Method() public async clear(): Promise { - const hasChange = this.inputEl?.checked === true; if (this.inputEl) { this.inputEl.checked = false; } this.odsClear.emit(); - hasChange && this.onInput(); + this.odsChange.emit({ + checked: false, + name: this.name, + validity: this.inputEl?.validity, + value: this.value ?? null, + }); this.inputEl?.focus(); } @@ -65,7 +69,8 @@ export class OdsCheckbox { @Method() public async reset(): Promise { - const hasChange = this.inputEl?.checked !== this.isChecked; + const defaultCheckedValues: string[] = []; + this.getOdsCheckboxGroupByName().forEach((checkbox) => { const inputCheckbox = checkbox.querySelector('input[type="checkbox"]'); if (!inputCheckbox) { @@ -73,12 +78,18 @@ export class OdsCheckbox { } if (checkbox.getAttribute('is-checked') !== null && checkbox.getAttribute('is-checked') !== 'false') { inputCheckbox.checked = true; + defaultCheckedValues.push(inputCheckbox.value); } else { inputCheckbox.checked = false; } }); this.odsReset.emit(); - hasChange && this.onInput(); + this.odsChange.emit({ + checked: !!defaultCheckedValues.length, + name: this.name, + validity: this.inputEl?.validity, + value: defaultCheckedValues.length ? defaultCheckedValues.join(',') : (this.value ?? null), + }); } @Method() @@ -123,11 +134,28 @@ export class OdsCheckbox { } private onInput(): void { + const { checked, validity, values } = Array.from(this.getOdsCheckboxGroupByName()) + .reduce<{ checked: boolean, validity: ValidityState | undefined, values: string[] }>((res, odsCheckboxElement) => { + const inputElement = odsCheckboxElement.querySelector('input[type="checkbox"]'); + + if (inputElement && inputElement.checked) { + res.checked = true; + res.validity = inputElement.validity; + res.values.push(inputElement.value); + } + + return res; + }, { + checked: false, + validity: this.inputEl?.validity, + values: [], + }); + this.odsChange.emit({ - checked: this.inputEl?.checked ?? false, + checked, name: this.name, - validity: this.inputEl?.validity, - value: this.value ?? null, + validity, + value: values.length ? values.join(',') : (this.value ?? null), }); } diff --git a/packages/ods/src/components/checkbox/tests/behaviour/ods-checkbox.e2e.ts b/packages/ods/src/components/checkbox/tests/behaviour/ods-checkbox.e2e.ts index 495d742e77..42e0df25ea 100644 --- a/packages/ods/src/components/checkbox/tests/behaviour/ods-checkbox.e2e.ts +++ b/packages/ods/src/components/checkbox/tests/behaviour/ods-checkbox.e2e.ts @@ -1,7 +1,6 @@ -import type { E2EElement, E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; +import { type E2EElement, type E2EPage, newE2EPage } from '@stencil/core/testing'; -describe('ods-checkbox behavior', () => { +describe('ods-checkbox behaviour', () => { let el: E2EElement; let page: E2EPage; @@ -23,49 +22,52 @@ describe('ods-checkbox behavior', () => { el = await page.find('ods-checkbox'); } - describe('Methods', () => { + describe('methods', () => { describe('clear', () => { it('should receive odsClear event', async() => { - await setup(''); + await setup(''); const odsClearSpy = await page.spyOnEvent('odsClear'); const odsChangeSpy = await page.spyOnEvent('odsChange'); - expect(await isInputCheckboxChecked(el)).toBe(true); - await el.callMethod('clear'); - await page.waitForChanges(); - expect(await isInputCheckboxChecked(el)).toBe(false); - expect(odsClearSpy).toHaveReceivedEventTimes(1); - expect(odsChangeSpy).toHaveReceivedEventTimes(1); - }); - - it('should receive odsClear event but not odsChange if there are no change', async() => { - await setup(''); - const odsClearSpy = await page.spyOnEvent('odsClear'); - const odsChangeSpy = await page.spyOnEvent('odsChange'); - expect(await isInputCheckboxChecked(el)).toBe(false); + expect(await isInputCheckboxChecked(el)).toBe(true); await el.callMethod('clear'); await page.waitForChanges(); expect(await isInputCheckboxChecked(el)).toBe(false); expect(odsClearSpy).toHaveReceivedEventTimes(1); - expect(odsChangeSpy).toHaveReceivedEventTimes(0); + expect(odsChangeSpy).toHaveReceivedEventTimes(1); + expect(odsChangeSpy).toHaveReceivedEventDetail({ + checked: false, + name: 'ods-checkbox', + validity: {}, + value: 'value', + }); }); }); describe('reset', () => { - it('should receive odsReset event but not odsChange if there are no change', async() => { - await setup(''); + it('should receive odsReset event', async() => { + await setup(''); const odsResetSpy = await page.spyOnEvent('odsReset'); const odsChangeSpy = await page.spyOnEvent('odsChange'); - expect(await isInputCheckboxChecked(el)).toBe(false); + + expect(await isInputCheckboxChecked(el)).toBe(true); await el.callMethod('reset'); await page.waitForChanges(); - expect(await isInputCheckboxChecked(el)).toBe(false); + expect(await isInputCheckboxChecked(el)).toBe(true); + expect(odsResetSpy).toHaveReceivedEventTimes(1); - expect(odsChangeSpy).toHaveReceivedEventTimes(0); + expect(odsChangeSpy).toHaveReceivedEventTimes(1); + + expect(odsChangeSpy).toHaveReceivedEventDetail({ + checked: true, + name: 'ods-checkbox', + validity: {}, + value: 'value', + }); }); it('should checked the checkbox with is-checked after reset', async() => { @@ -73,11 +75,11 @@ describe('ods-checkbox behavior', () => { `); const checkboxGroup = await page.findAll('ods-checkbox'); - const odsResetSpy = await page.spyOnEvent('odsReset'); - const odsChangeSpy = await page.spyOnEvent('odsChange'); + expect(await isInputCheckboxChecked(checkboxGroup[0])).toBe(true); await checkboxGroup[2].click(); + expect(await isInputCheckboxChecked(checkboxGroup[2])).toBe(true); await checkboxGroup[2].callMethod('reset'); @@ -85,13 +87,35 @@ describe('ods-checkbox behavior', () => { expect(await isInputCheckboxChecked(checkboxGroup[0])).toBe(true); expect(await isInputCheckboxChecked(checkboxGroup[2])).toBe(false); - expect(odsResetSpy).toHaveReceivedEventTimes(1); - expect(odsChangeSpy).toHaveReceivedEventTimes(2); + }); + + it('should send an odsChange with correct values for each item on form reset', async() => { + await setup(`
+ + + + +
`); + const resetButton = await page.find('button[type="reset"]'); + const odsResetSpy = await page.spyOnEvent('odsReset'); + const odsChangeSpy = await page.spyOnEvent('odsChange'); + + await resetButton.click(); + await page.waitForChanges(); + + expect(odsResetSpy).toHaveReceivedEventTimes(3); + expect(odsChangeSpy).toHaveReceivedEventTimes(3); + expect(odsChangeSpy).toHaveReceivedEventDetail({ + checked: true, + name: 'checkbox-group', + validity: {}, + value: 'value1,value2', + }); }); }); }); - describe('Checkbox group', () => { + describe('checkbox group', () => { it('should select multiple checkbox', async() => { await setup(''); const checkboxGroup = await page.findAll('ods-checkbox'); @@ -104,7 +128,7 @@ describe('ods-checkbox behavior', () => { }); }); - describe('Event', () => { + describe('events', () => { it('should receive event odsChange', async() => { await setup(''); const odsChangeSpy = await page.spyOnEvent('odsChange'); @@ -122,7 +146,7 @@ describe('ods-checkbox behavior', () => { }); }); - describe('Form', () => { + describe('form', () => { it('should get form data with button type submit', async() => { await setup(`