javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(checkbox): ionChange fires on user interaction (#25923)

Browse Source 
BREAKING CHANGE:

`ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
This commit is contained in:
Liam DeBeasi
2022-09-13 15:27:34 -05:00
committed by GitHub
parent c76de0cc37
commit a6b2629ede
8 changed files with 86 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
core/src/components/checkbox/test/basic/checkbox.e2e.ts
View File

@ -10,3 +10,52 @@ test.describe('checkbox: basic', () => {
expect(await page.screenshot()).toMatchSnapshot(`checkbox-basic-${page.getSnapshotSettings()}.png`);
});
});
test.describe('checkbox: ionChange', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
});
test('should fire ionChange when interacting with checkbox', async ({ page }) => {
await page.setContent(`
<ion-checkbox value="my-checkbox"></ion-checkbox>
`);
const ionChange = await page.spyOnEvent('ionChange');
const checkbox = page.locator('ion-checkbox');
await checkbox.click();
await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
await checkbox.click();
await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
});
test('should fire ionChange when interacting with checkbox in item', async ({ page }) => {
await page.setContent(`
<ion-item>
<ion-checkbox value="my-checkbox"></ion-checkbox>
</ion-item>
`);
const ionChange = await page.spyOnEvent('ionChange');
const item = page.locator('ion-item');
await item.click();
await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: true });
await item.click();
await expect(ionChange).toHaveReceivedEventDetail({ value: 'my-checkbox', checked: false });
});
test('should not fire when programmatically setting a value', async ({ page }) => {
await page.setContent(`
<ion-checkbox value="my-checkbox"></ion-checkbox>
`);
const ionChange = await page.spyOnEvent('ionChange');
const checkbox = page.locator('ion-checkbox');
await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
await expect(ionChange).not.toHaveReceivedEvent();
});
});