Skip to content

Commit

Permalink
test(datetime): event for calendar month text change (#24836)
Browse files Browse the repository at this point in the history
  • Loading branch information
sean-perkins authored Feb 23, 2022
1 parent b6d7e1c commit 6287823
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 18 deletions.
14 changes: 8 additions & 6 deletions core/src/components/datetime/test/sub-pixel-width/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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');

Expand Down
9 changes: 9 additions & 0 deletions core/src/components/datetime/test/sub-pixel-width/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,15 @@ <h2>Modal</h2>
</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>
19 changes: 19 additions & 0 deletions core/src/components/datetime/test/utils/month-did-change-event.js
Original file line number Diff line number Diff line change
@@ -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
});
}
26 changes: 14 additions & 12 deletions core/src/components/datetime/test/zoom/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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');

Expand All @@ -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');
Expand All @@ -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');

Expand All @@ -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({
Expand All @@ -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');

Expand All @@ -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');

Expand Down
8 changes: 8 additions & 0 deletions core/src/components/datetime/test/zoom/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,14 @@ <h2>Modal</h2>
</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>

0 comments on commit 6287823

Please sign in to comment.