test(datetime): event for calendar month text change (#24836)

core/src/components/datetime/test/sub-pixel-width/e2e.ts

@@ -8,18 +8,19 @@ describe('datetime: sub-pixel width', () => {
     });
 
     const openModalBtn = await page.find('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const modal = await page.find('ion-modal');
 
     await openModalBtn.click();
 
-    const modal = await page.find('ion-modal');
     await modal.waitForVisible();
-    await page.waitForTimeout(250);
+    await ionModalDidPresent.next();
 
     const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')
 
     await buttons[1].click();
 
-    await page.waitForTimeout(350);
+    await page.waitForEvent('datetimeMonthDidChange');
 
     const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 
@@ -32,18 +33,19 @@ describe('datetime: sub-pixel width', () => {
     });
 
     const openModalBtn = await page.find('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const modal = await page.find('ion-modal');
 
     await openModalBtn.click();
 
-    const modal = await page.find('ion-modal');
     await modal.waitForVisible();
-    await page.waitForTimeout(250);
+    await ionModalDidPresent.next();
 
     const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')
 
     await buttons[0].click();
 
-    await page.waitForTimeout(350);
+    await page.waitForEvent('datetimeMonthDidChange');
 
     const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 

core/src/components/datetime/test/sub-pixel-width/index.html

@@ -42,6 +42,15 @@
       </ion-modal>
     </ion-content>
   </ion-app>
+
+  <script type="module">
+    import { InitMonthDidChangeEvent } from '../test/utils/month-did-change-event.js';
+
+    document.getElementById('open-modal').addEventListener('click', () => {
+      InitMonthDidChangeEvent();
+    });
+  </script>
+
 </body>
 
 </html>

core/src/components/datetime/test/utils/month-did-change-event.js

@@ -0,0 +1,19 @@
+
+/**
+ * Initializes a mutation observer to detect when the calendar month
+ * text is updated as a result of a month change in `ion-datetime`.
+ *
+ * @param {*} datetimeSelector The element selector for the `ion-datetime` component.
+ */
+export function InitMonthDidChangeEvent(datetimeSelector = 'ion-datetime') {
+  const observer = new MutationObserver(mutationRecords => {
+    if (mutationRecords[0].type === 'characterData') {
+      document.dispatchEvent(new CustomEvent('datetimeMonthDidChange'));
+    }
+  });
+
+  observer.observe(document.querySelector(datetimeSelector).shadowRoot.querySelector('.calendar-month-year'), {
+    characterData: true,
+    subtree: true
+  });
+}

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

@@ -17,7 +17,7 @@ describe('datetime: zoom interactivity', () => {
 
     test('should update the month when next button is clicked', async () => {
       const page = await newE2EPage({
-        url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
+        url: '/src/components/datetime/test/zoom?ionic:_testing=true'
       });
 
       page.setViewport({
@@ -38,7 +38,7 @@ describe('datetime: zoom interactivity', () => {
 
       await buttons[1].click();
 
-      await page.waitForTimeout(350);
+      await page.waitForEvent('datetimeMonthDidChange');
 
       const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 
@@ -47,7 +47,7 @@ describe('datetime: zoom interactivity', () => {
 
     test('should update the month when prev button is clicked', async () => {
       const page = await newE2EPage({
-        url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
+        url: '/src/components/datetime/test/zoom?ionic:_testing=true'
       });
 
       const openModalBtn = await page.find('#open-modal');
@@ -62,7 +62,7 @@ describe('datetime: zoom interactivity', () => {
 
       await buttons[0].click();
 
-      await page.waitForTimeout(350);
+      await page.waitForEvent('datetimeMonthDidChange');
 
       const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 
@@ -79,7 +79,7 @@ describe('datetime: zoom interactivity', () => {
 
     test('should update the month when next button is clicked', async () => {
       const page = await newE2EPage({
-        url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
+        url: '/src/components/datetime/test/zoom?ionic:_testing=true'
       });
 
       page.setViewport({
@@ -89,18 +89,19 @@ describe('datetime: zoom interactivity', () => {
       });
 
       const openModalBtn = await page.find('#open-modal');
+      const modal = await page.find('ion-modal');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
       await openModalBtn.click();
 
-      const modal = await page.find('ion-modal');
       await modal.waitForVisible();
-      await page.waitForTimeout(250);
+      await ionModalDidPresent.next();
 
       const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')
 
       await buttons[1].click();
 
-      await page.waitForTimeout(350);
+      await page.waitForEvent('datetimeMonthDidChange');
 
       const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 
@@ -109,22 +110,23 @@ describe('datetime: zoom interactivity', () => {
 
     test('should update the month when prev button is clicked', async () => {
       const page = await newE2EPage({
-        url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true'
+        url: '/src/components/datetime/test/zoom?ionic:_testing=true'
       });
 
       const openModalBtn = await page.find('#open-modal');
+      const modal = await page.find('ion-modal');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
       await openModalBtn.click();
 
-      const modal = await page.find('ion-modal');
       await modal.waitForVisible();
-      await page.waitForTimeout(250);
+      await ionModalDidPresent.next();
 
       const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button')
 
       await buttons[0].click();
 
-      await page.waitForTimeout(350);
+      await page.waitForEvent('datetimeMonthDidChange');
 
       const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
 

core/src/components/datetime/test/zoom/index.html

@@ -37,6 +37,14 @@
       </ion-modal>
     </ion-content>
   </ion-app>
+
+  <script type="module">
+    import { InitMonthDidChangeEvent } from '../test/utils/month-did-change-event.js';
+
+    document.getElementById('open-modal').addEventListener('click', () => {
+      InitMonthDidChangeEvent();
+    });
+  </script>
 </body>
 
 </html>