diff --git a/core/src/components/datetime/test/cancel/datetime.e2e.ts b/core/src/components/datetime/test/cancel/datetime.e2e.ts new file mode 100644 index 0000000000..a2a9ab1f3d --- /dev/null +++ b/core/src/components/datetime/test/cancel/datetime.e2e.ts @@ -0,0 +1,69 @@ +import { configs, test } from '@utils/test/playwright'; +import { expect } from '@playwright/test'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe.only(title('datetime: cancel method'), () => { + test('should emit ionCancel', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const ionCancel = await page.spyOnEvent('ionCancel'); + const datetime = page.locator('ion-datetime'); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel()); + + await ionCancel.next(); + }); + + test('parent overlay should be dismissed when true is passed', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + const datetime = page.locator('ion-datetime'); + const modal = page.locator('ion-modal'); + + await modal.evaluate((el: HTMLIonModalElement) => el.present()); + + await ionModalDidPresent.next(); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true)); + + await ionModalDidDismiss.next(); + }); + + test('should reset the internal state of datetime', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + const day = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]'); + await day.click(); + await page.waitForChanges(); + + await expect(day).toHaveClass(/calendar-day-active/); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel()); + await page.waitForChanges(); + + await expect(day).not.toHaveClass(/calendar-day-active/); + }); + }); +}); diff --git a/core/src/components/datetime/test/reset/datetime.e2e.ts b/core/src/components/datetime/test/reset/datetime.e2e.ts new file mode 100644 index 0000000000..0cc207ec37 --- /dev/null +++ b/core/src/components/datetime/test/reset/datetime.e2e.ts @@ -0,0 +1,100 @@ +import { configs, test } from '@utils/test/playwright'; +import { expect } from '@playwright/test'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe.only(title('datetime: reset method'), () => { + test('should reset the internal state of datetime to the set value', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]'); + const daySix = datetime.locator('.calendar-day[data-month="6"][data-day="6"][data-year="2023"]'); + await dayOne.click(); + await page.waitForChanges(); + + await expect(dayOne).toHaveClass(/calendar-day-active/); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset()); + await page.waitForChanges(); + + await expect(daySix).toHaveClass(/calendar-day-active/); + }); + + test('should reset the internal state of datetime to the provided value', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]'); + const daySix = datetime.locator('.calendar-day[data-month="6"][data-day="6"][data-year="2023"]'); + await dayOne.click(); + await page.waitForChanges(); + + await expect(dayOne).toHaveClass(/calendar-day-active/); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset('2023-06-06T16:30')); + await page.waitForChanges(); + + await expect(daySix).toHaveClass(/calendar-day-active/); + }); + + test('should reset the internal state of datetime to today when value is set or passed', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const datetime = page.locator('ion-datetime'); + + const dayOne = datetime.locator('.calendar-day[data-month="6"][data-day="1"][data-year="2023"]'); + await dayOne.click(); + await page.waitForChanges(); + + await expect(dayOne).toHaveClass(/calendar-day-active/); + + await datetime.evaluate((el: HTMLIonDatetimeElement) => el.reset()); + await page.waitForChanges(); + + await expect(await datetime.locator('.calendar-day-active').count()).toBe(0); + }); + }); +});