From 56265e35d16d84f984b9bf35a1092af50202415c Mon Sep 17 00:00:00 2001 From: Brandy Smith Date: Mon, 4 Aug 2025 17:23:45 -0400 Subject: [PATCH] test(core): fix flaky datetime and input-otp tests (#30598) This fixes the flaky/failing tests here: `should not have visual regressions with a custom styled calendar` CleanShot 2025-08-04 at 13 46 12@2x `should switch the calendar header when moving to a month with a different number of days` CleanShot 2025-08-04 at 13 45 33@2x You can run them locally using: - `npm run test.e2e.docker src/components/datetime/test/datetime.e2e.ts -- --repeat-each=10` - `npm run test.e2e.docker src/components/datetime/test/custom/datetime.e2e.ts -- --repeat-each=10` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- .../datetime/test/custom/datetime.e2e.ts | 9 ++++++ .../datetime/test/custom/index.html | 2 +- .../components/datetime/test/datetime.e2e.ts | 30 ++++++++++++++++--- .../test/separators/input-otp.e2e.ts | 2 ++ 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts index 5563bc6c10..60339fbf74 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,6 +32,13 @@ 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'); + // 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`)); }); }); diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index 25c4835c05..09895d9c59 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -164,7 +164,7 @@ 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 2e26aad48e..c95e4d2044 100644 --- a/core/src/components/datetime/test/datetime.e2e.ts +++ b/core/src/components/datetime/test/datetime.e2e.ts @@ -22,11 +22,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await expect(monthYearToggle).toContainText('January 2022'); + // 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); + + const ionChange = await page.spyOnEvent('ionChange'); + + // Click on February + await monthColumnItems.filter({ hasText: 'February' }).click(); + + // Wait for changes + await ionChange.next(); await page.waitForChanges(); await expect(monthYearToggle).toContainText('February 2022'); @@ -38,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'); }); 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 37c9bb8bb4..4c92a45895 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);