diff --git a/core/src/components/datetime/test/sub-pixel-width/e2e.ts b/core/src/components/datetime/test/sub-pixel-width/e2e.ts index cab744acbe4..24066376b5e 100644 --- a/core/src/components/datetime/test/sub-pixel-width/e2e.ts +++ b/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'); diff --git a/core/src/components/datetime/test/sub-pixel-width/index.html b/core/src/components/datetime/test/sub-pixel-width/index.html index f532491e1be..2d1c2fae65d 100644 --- a/core/src/components/datetime/test/sub-pixel-width/index.html +++ b/core/src/components/datetime/test/sub-pixel-width/index.html @@ -42,6 +42,15 @@

Modal

+ + + diff --git a/core/src/components/datetime/test/utils/month-did-change-event.js b/core/src/components/datetime/test/utils/month-did-change-event.js new file mode 100644 index 00000000000..7bdeeaecc3c --- /dev/null +++ b/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 + }); +} diff --git a/core/src/components/datetime/test/zoom/e2e.ts b/core/src/components/datetime/test/zoom/e2e.ts index a81b71d18e2..a019dc317b9 100644 --- a/core/src/components/datetime/test/zoom/e2e.ts +++ b/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'); diff --git a/core/src/components/datetime/test/zoom/index.html b/core/src/components/datetime/test/zoom/index.html index b17d394f56f..7c46cb9dcde 100644 --- a/core/src/components/datetime/test/zoom/index.html +++ b/core/src/components/datetime/test/zoom/index.html @@ -37,6 +37,14 @@

Modal

+ +