Merge branch 'ROU-11744' of https://github.com/ionic-team/ionic-framework into ROU-11744

Author: JoaoFerreira-FrontEnd

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -51,28 +51,71 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should return the same date format on current month days and on adjacent days', async ({ page }) => {
       await page.setContent(
         `
-        <ion-datetime show-adjacent-days="true" locale="en-US" value="2022-10-14T16:22:00.000Z" presentation="date"></ion-datetime>
+        <ion-datetime show-adjacent-days="true" value="2022-10-14T16:22:00.000Z" presentation="date"></ion-datetime>
       `,
         config
       );
-      const datetime = page.locator('ion-datetime');
+
+      // Wait for the datetime to be ready.
+      await page.locator('.datetime-ready').waitFor();
+
       const ionChange = await page.spyOnEvent('ionChange');
-      // Oct 20, 2022
-      await page.click('.calendar-day[data-month="10"][data-year="2022"][data-day="20"]');
+
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+
+      /**
+       * Make sure to exclude adjacent days from the query since
+       * the previous/next month is rendered hidden. This causes
+       * the query to possibly return different results: one for
+       * the current month and one from the hidden previous/next
+       * month.
+       */
+      const october20Button = page.locator(
+        '[data-month="10"][data-year="2022"][data-day="20"]:not(.calendar-day-adjacent-day)'
+      );
+
+      await october20Button.click();
+
       await ionChange.next();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: '2022-10-20T16:22:00' });
-      await expect(datetime).toHaveJSProperty('value', '2022-10-20T16:22:00');
-      // Nov 1, 2022
-      await page.click('.calendar-day[data-month="11"][data-year="2022"][data-day="1"]');
+      await expect(ionChange).toHaveReceivedEventDetail({
+        value: '2022-10-20T16:22:00',
+      });
+
+      const november1Button = page.locator(
+        '.calendar-day-adjacent-day[data-month="11"][data-year="2022"][data-day="1"]'
+      );
+
+      await november1Button.click();
+      // Wait for the datetime to change the month since an adjacent day
+      // was clicked.
       await page.waitForChanges();
+
+      // Wait for the title to update to the new month since it changes
+      // after the month animation finishes.
+      await expect(calendarMonthYear).toHaveText('November 2022');
+
       await ionChange.next();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: '2022-11-01T16:22:00' });
-      await expect(datetime).toHaveJSProperty('value', '2022-11-01T16:22:00');
-      // Nov 22, 2022
-      await page.click('.calendar-day[data-month="11"][data-year="2022"][data-day="22"]');
+      await expect(ionChange).toHaveReceivedEventDetail({
+        value: '2022-11-01T16:22:00',
+      });
+
+      /**
+       * Make sure to exclude adjacent days from the query since
+       * the previous/next month is rendered hidden. This causes
+       * the query to possibly return different results: one for
+       * the current month and one from the hidden previous/next
+       * month.
+       */
+      const november22Button = page.locator(
+        '[data-month="11"][data-year="2022"][data-day="22"]:not(.calendar-day-adjacent-day)'
+      );
+
+      await november22Button.click();
+
       await ionChange.next();
-      await expect(ionChange).toHaveReceivedEventDetail({ value: '2022-11-22T16:22:00' });
-      await expect(datetime).toHaveJSProperty('value', '2022-11-22T16:22:00');
+      await expect(ionChange).toHaveReceivedEventDetail({
+        value: '2022-11-22T16:22:00',
+      });
     });
   });
 });