From 1017729b3e0cab6e490c2b9826515960941ead74 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 4 Aug 2025 13:19:24 -0400 Subject: [PATCH 1/5] test(datetime): fix flaky tests --- core/src/components/datetime/test/custom/datetime.e2e.ts | 2 ++ core/src/components/datetime/test/custom/index.html | 2 +- core/src/components/datetime/test/datetime.e2e.ts | 5 +++++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts index 5563bc6c107..dea3a10b5ab 100644 --- a/core/src/components/datetime/test/custom/datetime.e2e.ts +++ b/core/src/components/datetime/test/custom/datetime.e2e.ts @@ -30,6 +30,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test('should allow styling calendar days in grid style datetimes', async ({ page }) => { const datetime = page.locator('#custom-calendar-days'); + await page.locator('.datetime-ready').waitFor(); + await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`)); }); }); diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index 25c4835c053..09895d9c591 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -164,7 +164,7 @@

Grid Style

const customDatetime = document.querySelector('#custom-calendar-days'); // Mock the current day to always have the same screenshots - const mockToday = '2023-06-10T16:22'; + const mockToday = '2023-06-10T16:22:00.000Z'; Date = class extends Date { constructor(...args) { if (args.length === 0) { diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts index 2e26aad48e2..76185c389df 100644 --- a/core/src/components/datetime/test/datetime.e2e.ts +++ b/core/src/components/datetime/test/datetime.e2e.ts @@ -17,6 +17,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { test('should switch the calendar header when moving to a month with a different number of days', async ({ page, }) => { + await page.locator('.datetime-ready').waitFor(); + const monthYearToggle = page.locator('ion-datetime .calendar-month-year'); const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option'); @@ -25,6 +27,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await monthYearToggle.click(); await page.waitForChanges(); + // Wait for the picker to be fully rendered + await page.locator('ion-picker').waitFor({ state: 'visible' }); + // February await monthColumnItems.nth(1).click(); await page.waitForChanges(); From b095789f2ac6a27a123c39d5d6558b41401f9d57 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 4 Aug 2025 13:36:56 -0400 Subject: [PATCH 2/5] test(datetime): wait for the last datetime to be ready --- core/src/components/datetime/test/custom/datetime.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts index dea3a10b5ab..e32b55016db 100644 --- a/core/src/components/datetime/test/custom/datetime.e2e.ts +++ b/core/src/components/datetime/test/custom/datetime.e2e.ts @@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test('should allow styling calendar days in grid style datetimes', async ({ page }) => { const datetime = page.locator('#custom-calendar-days'); - await page.locator('.datetime-ready').waitFor(); + await page.locator('.datetime-ready').last().waitFor(); await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`)); }); From e2c7e316af6f335cbfe2eea01507276f9a462ffa Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 4 Aug 2025 14:53:12 -0400 Subject: [PATCH 3/5] test(datetime): fix flaky custom test --- core/src/components/datetime/test/custom/datetime.e2e.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts index e32b55016db..60339fbf742 100644 --- a/core/src/components/datetime/test/custom/datetime.e2e.ts +++ b/core/src/components/datetime/test/custom/datetime.e2e.ts @@ -5,6 +5,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('datetime: custom'), () => { test.beforeEach(async ({ page }) => { await page.goto(`/src/components/datetime/test/custom`, config); + + await page.locator('.datetime-ready').last().waitFor(); }); test('should allow styling wheel style datetimes', async ({ page }) => { @@ -30,7 +32,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test('should allow styling calendar days in grid style datetimes', async ({ page }) => { const datetime = page.locator('#custom-calendar-days'); - await page.locator('.datetime-ready').last().waitFor(); + // Wait for calendar days to be rendered + await page.waitForFunction(() => { + const datetime = document.querySelector('#custom-calendar-days'); + const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day'); + return calendarDays && calendarDays.length > 0; + }); await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`)); }); From 2d4d8834572d6857038157c634ca0abc8c640526 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 4 Aug 2025 16:38:39 -0400 Subject: [PATCH 4/5] test(datetime): fix flaky datetime test --- .../components/datetime/test/datetime.e2e.ts | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts index 76185c389df..c95e4d20448 100644 --- a/core/src/components/datetime/test/datetime.e2e.ts +++ b/core/src/components/datetime/test/datetime.e2e.ts @@ -17,21 +17,28 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { test('should switch the calendar header when moving to a month with a different number of days', async ({ page, }) => { - await page.locator('.datetime-ready').waitFor(); - const monthYearToggle = page.locator('ion-datetime .calendar-month-year'); const monthColumnItems = page.locator('ion-datetime .month-column ion-picker-column-option'); await expect(monthYearToggle).toContainText('January 2022'); + // Click to open the picker await monthYearToggle.click(); await page.waitForChanges(); - // Wait for the picker to be fully rendered - await page.locator('ion-picker').waitFor({ state: 'visible' }); + // Wait for the picker to be open + await page.locator('.month-year-picker-open').waitFor(); + + // Wait a bit for the picker to fully load + await page.waitForTimeout(200); + + const ionChange = await page.spyOnEvent('ionChange'); + + // Click on February + await monthColumnItems.filter({ hasText: 'February' }).click(); - // February - await monthColumnItems.nth(1).click(); + // Wait for changes + await ionChange.next(); await page.waitForChanges(); await expect(monthYearToggle).toContainText('February 2022'); @@ -43,13 +50,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { const datetime = page.locator('ion-datetime'); const ionChange = await page.spyOnEvent('ionChange'); + // Click to open the picker await monthYearToggle.click(); await page.waitForChanges(); - // February - await monthColumnItems.nth(1).click(); + // Wait for the picker to be open + await page.locator('.month-year-picker-open').waitFor(); + + // Wait a bit for the picker to fully load + await page.waitForTimeout(200); + + // Click on February + await monthColumnItems.filter({ hasText: 'February' }).click(); + // Wait for changes await ionChange.next(); + await page.waitForChanges(); + await expect(ionChange).toHaveReceivedEventTimes(1); await expect(datetime).toHaveJSProperty('value', '2022-02-28'); }); From df4d3762715942e913993c912cd760eaef1ed42f Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Mon, 4 Aug 2025 17:12:07 -0400 Subject: [PATCH 5/5] test(input-otp): fix flaky separator test --- core/src/components/input-otp/test/separators/input-otp.e2e.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts b/core/src/components/input-otp/test/separators/input-otp.e2e.ts index 37c9bb8bb4a..4c92a458950 100644 --- a/core/src/components/input-otp/test/separators/input-otp.e2e.ts +++ b/core/src/components/input-otp/test/separators/input-otp.e2e.ts @@ -95,6 +95,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => el.separators = [2, 3]; }); + await page.waitForChanges(); + await expect(await hasSeparatorAfter(page, 0)).toBe(false); await expect(await hasSeparatorAfter(page, 1)).toBe(true); await expect(await hasSeparatorAfter(page, 2)).toBe(true);