fix(tests): updating tests to wait for datetime

Author: ShaneK

core/src/components/datetime-button/test/a11y/datetime-button.e2e.ts

@@ -21,6 +21,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
       );
 
       const datetimeButton = page.locator('ion-datetime-button');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale`));
     });
@@ -40,6 +41,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, c
       );
 
       const datetimeButton = page.locator('ion-datetime-button');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-scale-wrap`));
     });

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -24,6 +24,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionModalDidPresent.next();
 
+      // Wait for datetime to be ready before taking screenshot
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
     });
 
@@ -44,6 +47,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionPopoverDidPresent.next();
 
+      // Wait for datetime to be ready before taking screenshot
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
     });
   });

core/src/components/datetime/test/custom/datetime.e2e.ts

@@ -52,6 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: custom focus'), () => {
     test('should focus the selected day and then the day after', async ({ page }) => {
       await page.goto(`/src/components/datetime/test/custom`, config);
+      await page.locator('.datetime-ready').last().waitFor();
 
       const datetime = page.locator('#custom-calendar-days');
 

core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts

@@ -7,6 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.goto('/src/components/datetime/test/first-day-of-week', config);
 
       const datetime = page.locator('ion-datetime');
+      await page.locator('.datetime-ready').waitFor();
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-day-of-week`));
     });
   });

core/src/components/datetime/test/highlighted-dates/datetime.e2e.ts

@@ -10,6 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       `,
         config
       );
+      await page.locator('.datetime-ready').waitFor();
     });
 
     test('should render highlights correctly when using an array', async ({ page }) => {