javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sean Perkins
2022-02-23 12:28:13 -05:00
committed by GitHub
parent b6d7e1c757
commit 62878238fc
5 changed files with 58 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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>

19
core/src/components/datetime/test/utils/month-did-change-event.js Normal file
View File

@ -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
core/src/components/datetime/test/zoom/e2e.ts
View File

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

8
core/src/components/datetime/test/zoom/index.html
View File

@ -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>