test(core): fix flaky datetime and input-otp tests (#30598)

brandyscarney · web-flow · commit 56265e35d16d · 2025-08-04T21:23:45.000Z
This fixes the flaky/failing tests here: `should not have visual regressions with a custom styled calendar` <img width="1658" height="916" alt="CleanShot 2025-08-04 at 13 46 12@2x" src="https://github.com/user-attachments/assets/b5d54ee8-b315-4db0-b09b-65d9cd2fa7ca" /> `should switch the calendar header when moving to a month with a different number of days` <img width="2104" height="1752" alt="CleanShot 2025-08-04 at 13 45 33@2x" src="https://github.com/user-attachments/assets/8a0cdb0b-6e9d-4b5c-a2df-f9174431492b" /> 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>
diff --git 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
@@ -164,7 +164,7 @@ <h2>Grid Style</h2>
       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
@@ -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
@@ -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);
