test(datetime): fix flaky tests

Author: brandyscarney

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`));
     });
   });

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) {

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();