Skip to content

Commit

Permalink
fix(radio): emit odsChange with matching radio value
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpellier
dpellier committed Nov 28, 2024
1 parent 78b7ccb commit 935aef5
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 31 deletions.
28 changes: 11 additions & 17 deletions packages/ods/src/components/radio/src/components/ods-radio/ods-radio.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ export class OdsRadio {
this.inputEl.checked = false;
}
this.odsClear.emit();
this.emitChange({
this.odsChange.emit({
checked: false,
name: this.name,
validity: this.inputEl?.validity,
validity: this.inputEl?.validity,
value: this.value ?? null,
});
this.inputEl?.focus();
Expand All @@ -69,23 +69,26 @@ export class OdsRadio {

@Method()
public async reset(): Promise<void> {
let defaultCheckedRadioValue = null;

this.getOdsRadiosGroupByName().forEach((radio) => {
const inputRadio = radio.querySelector<HTMLInputElement>('input[type="radio"]');
if (!inputRadio) {
return;
}
if (radio.getAttribute('is-checked') !== null && radio.getAttribute('is-checked') !== 'false') {
inputRadio.checked = true;
defaultCheckedRadioValue = inputRadio.value;
} else {
inputRadio.checked = false;
}
});
this.odsReset.emit();
this.emitChange({
checked: this.isChecked,
this.odsChange.emit({
checked: !!defaultCheckedRadioValue,
name: this.name,
validity: this.inputEl?.validity,
value: this.value ?? null,
validity: this.inputEl?.validity,
value: defaultCheckedRadioValue,
});
}

Expand Down Expand Up @@ -126,15 +129,6 @@ export class OdsRadio {
await this.reset();
}

private emitChange(detail: OdsRadioChangeEventDetail): void {
this.odsChange.emit({
checked: detail.checked,
name: detail.name,
validity: detail.validity,
value: detail.value,
});
}

private getOdsRadiosGroupByName(): NodeListOf<Element & OdsRadio> {
return document.querySelectorAll(`ods-radio[name="${this.name}"]`);
}
Expand All @@ -150,10 +144,10 @@ export class OdsRadio {
}

private onInput(event: Event): void {
this.emitChange({
this.odsChange.emit({
checked: (event.target as HTMLInputElement)?.checked,
name: this.name,
validity: this.inputEl?.validity,
validity: this.inputEl?.validity,
value: this.value ?? null,
});
}
Expand Down
50 changes: 36 additions & 14 deletions packages/ods/src/components/radio/tests/behaviour/ods-radio.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
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-radio behaviour', () => {
let el: E2EElement;
Expand All @@ -23,13 +22,15 @@ describe('ods-radio behaviour', () => {
el = await page.find('ods-radio');
}

describe('Methods', () => {
describe('methods', () => {
describe('clear', () => {
it('should receive odsClear event', async() => {
await setup('<ods-radio name="ods-radio" value="value" is-checked></ods-radio>');
const odsClearSpy = await page.spyOnEvent('odsClear');
const odsChangeSpy = await page.spyOnEvent('odsChange');

expect(await isInputRadioChecked(el)).toBe(true);

await el.callMethod('clear');
await page.waitForChanges();

Expand All @@ -50,7 +51,9 @@ describe('ods-radio behaviour', () => {
await setup('<ods-radio name="ods-radio" value="value" is-checked></ods-radio>');
const odsResetSpy = await page.spyOnEvent('odsReset');
const odsChangeSpy = await page.spyOnEvent('odsChange');

expect(await isInputRadioChecked(el)).toBe(true);

await el.callMethod('reset');
await page.waitForChanges();

Expand All @@ -70,32 +73,46 @@ describe('ods-radio behaviour', () => {
<ods-radio name="radio-group" value="value2"></ods-radio>
<ods-radio name="radio-group" value="value3"></ods-radio>`);
const radios = await page.findAll('ods-radio');
const odsResetSpy = await page.spyOnEvent('odsReset');
const odsChangeSpy = await page.spyOnEvent('odsChange');

expect(await isInputRadioChecked(radios[0])).toBe(true);

await radios[2].click();

expect(await isInputRadioChecked(radios[2])).toBe(true);

await radios[2].callMethod('reset');

expect(await isInputRadioChecked(radios[0])).toBe(true);
});

it('should send odsChange event with the checked item value', async() => {
await setup(`<ods-radio name="radio-group" value="value1"></ods-radio>
<ods-radio name="radio-group" value="value2" is-checked></ods-radio>
<ods-radio name="radio-group" value="value3"></ods-radio>`);
const radios = await page.findAll('ods-radio');
const odsResetSpy = await page.spyOnEvent('odsReset');
const odsChangeSpy = await page.spyOnEvent('odsChange');

await radios[0].callMethod('reset');

expect(await isInputRadioChecked(radios[1])).toBe(true);
expect(odsResetSpy).toHaveReceivedEventTimes(1);
expect(odsChangeSpy).toHaveReceivedEventTimes(2);
expect(odsChangeSpy).toHaveReceivedEventTimes(1);
expect(odsChangeSpy).toHaveReceivedEventDetail({
checked: false,
checked: true,
name: 'radio-group',
validity: {},
value: 'value3',
value: 'value2',
});
});
});

describe('select', () => {
it('should select radio', async() => {
await setup('<ods-radio value="value"></ods-radio>');

expect(await isInputRadioChecked(el)).toBe(false);

await el.callMethod('select');
await page.waitForChanges();

Expand All @@ -104,7 +121,7 @@ describe('ods-radio behaviour', () => {
});
});

describe('Radio group', () => {
describe('radio group', () => {
async function isInputRadioChecked(radio: E2EElement): Promise<boolean> {
const input = await radio.find('input[type="radio"]');
return input.getProperty('checked');
Expand All @@ -113,6 +130,7 @@ describe('ods-radio behaviour', () => {
it('should select only one radio with the same name', async() => {
await setup('<ods-radio name="radio-group" value="value1" is-checked></ods-radio><ods-radio name="radio-group" value="value2"></ods-radio><ods-radio name="radio-group" value="value3"></ods-radio>');
const radios = await page.findAll('ods-radio');

expect(await isInputRadioChecked(radios[0])).toBe(true);

await radios[2].click();
Expand All @@ -123,7 +141,6 @@ describe('ods-radio behaviour', () => {

it('should select only one radio with the same name', async() => {
await setup(`<ods-radio name="radio-group" value="value1" is-checked></ods-radio><ods-radio name="radio-group" value="value2"></ods-radio><ods-radio name="radio-group" value="value3"></ods-radio>
<ods-radio name="radio-group2" value="value1"></ods-radio><ods-radio name="radio-group2" value="value2"></ods-radio><ods-radio name="radio-group2" value="value3"></ods-radio>`);
const radiosGroup = await page.findAll('ods-radio[name="radio-group"]');
const radiosGroup2 = await page.findAll('ods-radio[name="radio-group2"]');
Expand All @@ -132,14 +149,14 @@ describe('ods-radio behaviour', () => {
expect(await isInputRadioChecked(radiosGroup2[0])).toBe(false);

await radiosGroup[2].click();

expect(await isInputRadioChecked(radiosGroup[0])).toBe(false);
expect(await isInputRadioChecked(radiosGroup[2])).toBe(true);
expect(await isInputRadioChecked(radiosGroup2[2])).toBe(false);

});
});

describe('Form', () => {
describe('form', () => {
it('should get form data with button type submit', async() => {
await setup(`<form method="get">
<ods-radio input-id="huey-form" name="name" value="huey" is-checked></ods-radio>
Expand All @@ -149,8 +166,10 @@ describe('ods-radio behaviour', () => {
<button type="submit">Submit</button>
</form>`);
const submitButton = await page.find('button[type="submit"]');

await submitButton.click();
await page.waitForNetworkIdle();

const url = new URL(page.url());
expect(url.searchParams.get('name')).toBe('huey');
});
Expand All @@ -164,8 +183,10 @@ describe('ods-radio behaviour', () => {
<button type="submit">Submit</button>
</form>`);
const submitButton = await page.find('button[type="submit"]');

await submitButton.click();
await page.waitForNetworkIdle();

const url = new URL(page.url());
expect(url.searchParams.get('name')).toBeNull();
});
Expand All @@ -179,11 +200,12 @@ describe('ods-radio behaviour', () => {
<button type="submit">Submit</button>
</form>`);
const resetButton = await page.find('button[type="reset"]');
await resetButton.click();

const submitButton = await page.find('button[type="submit"]');

await resetButton.click();
await submitButton.click();
await page.waitForNetworkIdle();

const url = new URL(page.url());
expect(url.searchParams.get('name')).toBe('huey');
});
Expand Down

0 comments on commit 935aef5

Please sign in to comment.