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

test(many): do not await page.locator (#27267)

Browse Source 
Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`page.locator` is synchronous, but we were `await`ing the calls:
https://playwright.dev/docs/api/class-page#page-locator

We were also doing `page.locator(...).click()` when we can just do
`page.click([selector])` directly,

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removes `await` usage from `page.locator`
- Removes `page.locator().click()` usage in favor of `page.click()`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
2023-04-25 08:26:17 -04:00
committed by GitHub
parent c267b43396
commit 0ac451998c
27 changed files with 96 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/action-sheet/test/basic/action-sheet.e2e.ts
View File

@ -85,7 +85,7 @@ test.describe('action sheet: basic', () => {
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent'); const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
await actionSheetFixture.open('#alertFromActionSheet'); await actionSheetFixture.open('#alertFromActionSheet');
await page.locator('#open-alert').click(); await page.click('#open-alert');
await ionAlertDidPresent.next(); await ionAlertDidPresent.next();
}); });

4
core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
View File

@ -16,7 +16,7 @@ test.describe('datetime-button: switching to correct view', () => {
const datetime = page.locator('ion-datetime'); const datetime = page.locator('ion-datetime');
await expect(datetime).toHaveJSProperty('presentation', 'date-time'); await expect(datetime).toHaveJSProperty('presentation', 'date-time');
await page.locator('#date-button').click(); await page.click('#date-button');
await page.waitForChanges(); await page.waitForChanges();
await expect(datetime).toHaveJSProperty('presentation', 'date'); await expect(datetime).toHaveJSProperty('presentation', 'date');
@ -25,7 +25,7 @@ test.describe('datetime-button: switching to correct view', () => {
const datetime = page.locator('ion-datetime'); const datetime = page.locator('ion-datetime');
await expect(datetime).toHaveJSProperty('presentation', 'date-time'); await expect(datetime).toHaveJSProperty('presentation', 'date-time');
await page.locator('#time-button').click(); await page.click('#time-button');
await page.waitForChanges(); await page.waitForChanges();
await expect(datetime).toHaveJSProperty('presentation', 'time'); await expect(datetime).toHaveJSProperty('presentation', 'time');

24
core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
View File

@ -65,40 +65,40 @@ test.describe('datetime-button: popover', () => {
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss'); ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
}); });
test('should open the date popover', async ({ page }) => { test('should open the date popover', async ({ page }) => {
await page.locator('#date-button').click(); await page.click('#date-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the time popover', async ({ page }) => { test('should open the time popover', async ({ page }) => {
await page.locator('#time-button').click(); await page.click('#time-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the date popover then the time popover', async ({ page }) => { test('should open the date popover then the time popover', async ({ page }) => {
await page.locator('#date-button').click(); await page.click('#date-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss()); await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
await ionPopoverDidDismiss.next(); await ionPopoverDidDismiss.next();
await page.locator('#time-button').click(); await page.click('#time-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the time popover then the date popover', async ({ page }) => { test('should open the time popover then the date popover', async ({ page }) => {
await page.locator('#time-button').click(); await page.click('#time-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss()); await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
await ionPopoverDidDismiss.next(); await ionPopoverDidDismiss.next();
await page.locator('#date-button').click(); await page.click('#date-button');
await ionPopoverDidPresent.next(); await ionPopoverDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
@ -127,40 +127,40 @@ test.describe('datetime-button: modal', () => {
ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
}); });
test('should open the date modal', async ({ page }) => { test('should open the date modal', async ({ page }) => {
await page.locator('#date-button').click(); await page.click('#date-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the time modal', async ({ page }) => { test('should open the time modal', async ({ page }) => {
await page.locator('#time-button').click(); await page.click('#time-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the date modal then the time modal', async ({ page }) => { test('should open the date modal then the time modal', async ({ page }) => {
await page.locator('#date-button').click(); await page.click('#date-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
await page.locator('#time-button').click(); await page.click('#time-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });
test('should open the time modal then the date modal', async ({ page }) => { test('should open the time modal then the date modal', async ({ page }) => {
await page.locator('#time-button').click(); await page.click('#time-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
await page.locator('#date-button').click(); await page.click('#date-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
await expect(datetime).toBeVisible(); await expect(datetime).toBeVisible();
}); });

4
core/src/components/img/test/basic/img.e2e.ts
View File

@ -40,7 +40,7 @@ test.describe('img: basic', () => {
ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad'); ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad'); ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
const ionImg = await page.locator('ion-img'); const ionImg = page.locator('ion-img');
await ionImg.evaluate((el: HTMLIonImgElement) => { await ionImg.evaluate((el: HTMLIonImgElement) => {
el.src = 'https://via.placeholder.com/150'; el.src = 'https://via.placeholder.com/150';
return el; return el;
@ -79,7 +79,7 @@ test.describe('img: basic', () => {
ionError = await page.spyOnEvent('ionError'); ionError = await page.spyOnEvent('ionError');
const ionImg = await page.locator('ion-img'); const ionImg = page.locator('ion-img');
await ionImg.evaluate((el: HTMLIonImgElement) => { await ionImg.evaluate((el: HTMLIonImgElement) => {
el.src = 'https://via.placeholder.com/150'; el.src = 'https://via.placeholder.com/150';
return el; return el;

4
core/src/components/item/test/a11y/item.e2e.ts
View File

@ -19,8 +19,8 @@ test.describe('item: axe', () => {
<ion-item id="item-2" aria-label="test" button="true"></ion-item> <ion-item id="item-2" aria-label="test" button="true"></ion-item>
`); `);
const item1 = await page.locator('#item-1 .item-native'); const item1 = page.locator('#item-1 .item-native');
const item2 = await page.locator('#item-2 .item-native'); const item2 = page.locator('#item-2 .item-native');
expect(await item1.getAttribute('aria-label')).toEqual('test'); expect(await item1.getAttribute('aria-label')).toEqual('test');
expect(await item2.getAttribute('aria-label')).toEqual('test'); expect(await item2.getAttribute('aria-label')).toEqual('test');

6
core/src/components/loading/test/basic/loading.e2e.ts
View File

@ -17,7 +17,7 @@ test.describe('loading: basic', () => {
await expect(page).toHaveScreenshot(`loading-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`); await expect(page).toHaveScreenshot(`loading-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`);
const loading = await page.locator('ion-loading'); const loading = page.locator('ion-loading');
await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss()); await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
await ionLoadingDidDismiss.next(); await ionLoadingDidDismiss.next();
@ -51,7 +51,7 @@ test.describe('loading: basic', () => {
await ionLoadingDidPresent.next(); await ionLoadingDidPresent.next();
const loading = await page.locator('ion-loading'); const loading = page.locator('ion-loading');
await expect(loading).toHaveAttribute('data-testid', 'basic-loading'); await expect(loading).toHaveAttribute('data-testid', 'basic-loading');
}); });
}); });
@ -63,7 +63,7 @@ test.describe('loading: basic', () => {
await ionLoadingDidPresent.next(); await ionLoadingDidPresent.next();
const button = await page.locator('ion-loading ion-button'); const button = page.locator('ion-loading ion-button');
if (browserName === 'webkit') { if (browserName === 'webkit') {
await page.keyboard.down('Alt'); await page.keyboard.down('Alt');

2
core/src/components/loading/test/standalone/loading.e2e.ts
View File

@ -15,7 +15,7 @@ test.describe('loading: standalone', () => {
await expect(page).toHaveScreenshot(`loading-standalone-diff-${page.getSnapshotSettings()}.png`); await expect(page).toHaveScreenshot(`loading-standalone-diff-${page.getSnapshotSettings()}.png`);
const loading = await page.locator('ion-loading'); const loading = page.locator('ion-loading');
await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss()); await loading.evaluate((el: HTMLIonLoadingElement) => el.dismiss());
await ionLoadingDidDismiss.next(); await ionLoadingDidDismiss.next();

2
core/src/components/menu/test/basic/menu.e2e.ts
View File

@ -28,7 +28,7 @@ test.describe('menu: basic', () => {
await page.click('#open-start'); await page.click('#open-start');
await ionDidOpen.next(); await ionDidOpen.next();
const button = await page.locator('#start-menu-button'); const button = page.locator('#start-menu-button');
if (browserName === 'webkit') { if (browserName === 'webkit') {
await page.keyboard.down('Alt'); await page.keyboard.down('Alt');

14
core/src/components/menu/test/focus-trap/menu.e2e.ts
View File

@ -17,14 +17,14 @@ test.describe('menu: focus trap', () => {
await page.click('#open-menu-button'); await page.click('#open-menu-button');
await ionDidOpen.next(); await ionDidOpen.next();
const menu = await page.locator('#menu'); const menu = page.locator('#menu');
await expect(menu).toBeFocused(); await expect(menu).toBeFocused();
const openModalButton = await page.locator('#open-modal-button'); const openModalButton = page.locator('#open-modal-button');
await openModalButton.click(); await openModalButton.click();
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('#modal'); const modal = page.locator('#modal');
await expect(modal).toBeFocused(); await expect(modal).toBeFocused();
await modal.evaluate(async (el: HTMLIonModalElement) => { await modal.evaluate(async (el: HTMLIonModalElement) => {
@ -45,13 +45,13 @@ test.describe('menu: focus trap', () => {
await page.click('#open-menu-button'); await page.click('#open-menu-button');
await ionDidOpen.next(); await ionDidOpen.next();
const menu = await page.locator('#menu'); const menu = page.locator('#menu');
await expect(menu).toBeFocused(); await expect(menu).toBeFocused();
await page.click('#open-modal-button'); await page.click('#open-modal-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('#modal'); const modal = page.locator('#modal');
await expect(modal).toBeFocused(); await expect(modal).toBeFocused();
}); });
@ -63,13 +63,13 @@ test.describe('menu: focus trap', () => {
await page.click('#open-menu-button'); await page.click('#open-menu-button');
await ionDidOpen.next(); await ionDidOpen.next();
const menu = await page.locator('#menu'); const menu = page.locator('#menu');
await expect(menu).toBeFocused(); await expect(menu).toBeFocused();
await page.click('#open-modal-button'); await page.click('#open-modal-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('#modal'); const modal = page.locator('#modal');
await modal.evaluate(async (el: HTMLIonModalElement) => { await modal.evaluate(async (el: HTMLIonModalElement) => {
await el.dismiss(); await el.dismiss();

10
core/src/components/modal/test/basic/modal.e2e.ts
View File

@ -43,7 +43,7 @@ test.describe('modal: focus trapping', () => {
await page.goto('/src/components/modal/test/basic'); await page.goto('/src/components/modal/test/basic');
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
const modalButton = await page.locator('#basic-modal'); const modalButton = page.locator('#basic-modal');
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
// Focus #basic-modal button // Focus #basic-modal button
@ -74,7 +74,7 @@ test.describe('modal: rendering', () => {
await ionModalWillPresent.next(); await ionModalWillPresent.next();
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
await expect(modal).toHaveClass(/show-modal/); await expect(modal).toHaveClass(/show-modal/);
await page.setIonViewport(); await page.setIonViewport();
@ -112,7 +112,7 @@ test.describe('modal: htmlAttributes inheritance', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const attribute = await modal.getAttribute('data-testid'); const attribute = await modal.getAttribute('data-testid');
expect(attribute).toBe('basic-modal'); expect(attribute).toBe('basic-modal');
@ -161,7 +161,7 @@ test.describe('modal: incorrect usage', () => {
await page.click('#basic-modal'); await page.click('#basic-modal');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
expect(warnings.length).toBe(1); expect(warnings.length).toBe(1);
@ -174,7 +174,7 @@ test.describe('modal: incorrect usage', () => {
await page.click('#basic-modal'); await page.click('#basic-modal');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => { const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => {
return el.getCurrentBreakpoint(); return el.getCurrentBreakpoint();
}); });

62
core/src/components/modal/test/can-dismiss/modal.e2e.ts
View File

@ -14,7 +14,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -27,7 +27,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -40,7 +40,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -53,7 +53,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -90,7 +90,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -103,7 +103,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -116,7 +116,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -129,7 +129,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -151,7 +151,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('ion-modal #modal-header'); const modalHeader = page.locator('ion-modal #modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -164,10 +164,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
expect(modal).not.toBe(null); expect(modal).not.toBe(null);
}); });
test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => { test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
@ -179,7 +179,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -193,12 +193,12 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionHandlerDone.next(); await ionHandlerDone.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
expect(modal).not.toBe(null); expect(modal).not.toBe(null);
}); });
test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
@ -211,7 +211,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionActionSheetDidPresent.next(); await ionActionSheetDidPresent.next();
@ -234,7 +234,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -247,7 +247,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -260,7 +260,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true); expect(returnValue).toBe(true);
@ -273,7 +273,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(false); expect(returnValue).toBe(false);
@ -286,7 +286,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -299,10 +299,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
expect(modal).not.toBe(null); expect(modal).not.toBe(null);
}); });
test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => { test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
@ -314,7 +314,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -328,12 +328,12 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionHandlerDone.next(); await ionHandlerDone.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
expect(modal).not.toBe(null); expect(modal).not.toBe(null);
}); });
test('should not dismiss on swipe when not attempting to close', async ({ page }) => { test('should not dismiss on swipe when not attempting to close', async ({ page }) => {
@ -344,10 +344,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, -500); await dragElementBy(modalHeader, page, 0, -500);
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
expect(modal).not.toBe(null); expect(modal).not.toBe(null);
}); });
test('should hit the dismiss threshold when swiping', async ({ page }) => { test('should hit the dismiss threshold when swiping', async ({ page }) => {
@ -359,7 +359,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 100); await dragElementBy(modalHeader, page, 0, 100);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -374,7 +374,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionActionSheetDidPresent.next(); await ionActionSheetDidPresent.next();
@ -399,7 +399,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role')); await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role'));
await ionHandlerDone.next(); await ionHandlerDone.next();
@ -415,7 +415,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header'); const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500); await dragElementBy(modalHeader, page, 0, 500);
await ionHandlerDone.next(); await ionHandlerDone.next();

2
core/src/components/modal/test/card-refresher/modal.e2e.ts
View File

@ -14,7 +14,7 @@ test.describe('card modal - with refresher', () => {
await page.click('#card'); await page.click('#card');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const content = (await page.$('ion-modal ion-content'))!; const content = (await page.$('ion-modal ion-content'))!;
await dragElementBy(content, page, 0, 500); await dragElementBy(content, page, 0, 500);

6
core/src/components/modal/test/card-scroll-target/modal.e2e.ts
View File

@ -16,7 +16,7 @@ test.describe('card modal - scroll target', () => {
await page.click('#card'); await page.click('#card');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const content = await page.locator('ion-modal .ion-content-scroll-host'); const content = page.locator('ion-modal .ion-content-scroll-host');
await dragElementBy(content, page, 0, 500); await dragElementBy(content, page, 0, 500);
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
@ -27,7 +27,7 @@ test.describe('card modal - scroll target', () => {
await page.click('#card'); await page.click('#card');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const content = (await page.$('ion-modal .ion-content-scroll-host'))!; const content = (await page.$('ion-modal .ion-content-scroll-host'))!;
await content.evaluate((el: HTMLElement) => (el.scrollTop = 500)); await content.evaluate((el: HTMLElement) => (el.scrollTop = 500));
@ -44,7 +44,7 @@ test.describe('card modal - scroll target', () => {
await page.click('#card'); await page.click('#card');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const content = await page.locator('ion-modal .ion-content-scroll-host'); const content = page.locator('ion-modal .ion-content-scroll-host');
await dragElementBy(content, page, 0, 20); await dragElementBy(content, page, 0, 20);
await expect(content).not.toHaveCSS('overflow', 'hidden'); await expect(content).not.toHaveCSS('overflow', 'hidden');

4
core/src/components/modal/test/card/modal.e2e.ts
View File

@ -82,7 +82,7 @@ test.describe('card modal', () => {
await cardModalPage.openModalByTrigger('#card'); await cardModalPage.openModalByTrigger('#card');
await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20); await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
const content = await page.locator('ion-modal ion-content'); const content = page.locator('ion-modal ion-content');
await expect(content).toHaveJSProperty('scrollY', true); await expect(content).toHaveJSProperty('scrollY', true);
}); });
}); });
@ -157,7 +157,7 @@ test.describe('card modal', () => {
await cardModalPage.openModalByTrigger('#card'); await cardModalPage.openModalByTrigger('#card');
await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20); await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
const content = await page.locator('ion-modal ion-content'); const content = page.locator('ion-modal ion-content');
await expect(content).toHaveJSProperty('scrollY', true); await expect(content).toHaveJSProperty('scrollY', true);
}); });
}); });

2
core/src/components/modal/test/fixtures.ts
View File

@ -24,7 +24,7 @@ export class CardModalPage {
async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 500) { async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 500) {
const { page } = this; const { page } = this;
const elementRef = await page.locator(selector); const elementRef = page.locator(selector);
await dragElementBy(elementRef, page, 0, swipeY); await dragElementBy(elementRef, page, 0, swipeY);
if (waitForDismiss) { if (waitForDismiss) {

4
core/src/components/modal/test/inline/modal.e2e.ts
View File

@ -44,7 +44,7 @@ test.describe('modal: inline', () => {
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
const modal = page.locator('ion-modal'); const modal = page.locator('ion-modal');
await page.locator('#date-button').click(); await page.click('#date-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
// Verifies that the host element exists with the .ion-page class // Verifies that the host element exists with the .ion-page class
@ -53,7 +53,7 @@ test.describe('modal: inline', () => {
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();
await page.locator('#date-button').click(); await page.click('#date-button');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
// Verifies that presenting the overlay again does not create a new host element // Verifies that presenting the overlay again does not create a new host element

12
core/src/components/modal/test/sheet/modal.e2e.ts
View File

@ -76,11 +76,11 @@ test.describe('sheet modal: setting the breakpoint', () => {
await page.click('#sheet-modal'); await page.click('#sheet-modal');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01)); await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01));
}); });
test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => { test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => {
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
expect(breakpoint).toBe(0.25); expect(breakpoint).toBe(0.25);
}); });
@ -102,7 +102,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
}); });
test('should update the current breakpoint', async ({ page }) => { test('should update the current breakpoint', async ({ page }) => {
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const modal = await page.locator('.modal-sheet'); const modal = page.locator('.modal-sheet');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
await ionBreakpointDidChange.next(); await ionBreakpointDidChange.next();
@ -112,7 +112,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
}); });
test('should emit ionBreakpointDidChange', async ({ page }) => { test('should emit ionBreakpointDidChange', async ({ page }) => {
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const modal = await page.locator('.modal-sheet'); const modal = page.locator('.modal-sheet');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
await ionBreakpointDidChange.next(); await ionBreakpointDidChange.next();
@ -120,7 +120,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
}); });
test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => { test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => {
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const modal = await page.locator('.modal-sheet'); const modal = page.locator('.modal-sheet');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0)); await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0));
await ionBreakpointDidChange.next(); await ionBreakpointDidChange.next();
@ -128,7 +128,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
}); });
test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => { test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => {
const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
const header = await page.locator('.modal-sheet ion-header'); const header = page.locator('.modal-sheet ion-header');
await dragElementBy(header, page, 0, 500); await dragElementBy(header, page, 0, 500);

2
core/src/components/modal/test/standalone/modal.e2e.ts
View File

@ -11,7 +11,7 @@ test.describe('modal: standalone', () => {
await page.click('#basic-modal'); await page.click('#basic-modal');
await ionModalDidPresent.next(); await ionModalDidPresent.next();
const modal = await page.locator('ion-modal'); const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next(); await ionModalDidDismiss.next();

2
core/src/components/popover/test/nested/popover.e2e.ts
View File

@ -40,7 +40,7 @@ test.describe('popover: nested', async () => {
await backdrop.click({ position: { x: 5, y: 5 } }); await backdrop.click({ position: { x: 5, y: 5 } });
await ionPopoverDidDismiss.next(); await ionPopoverDidDismiss.next();
const nestedPopover = await page.locator('.child-popover-one'); const nestedPopover = page.locator('.child-popover-one');
await expect(nestedPopover).toHaveClass(/overlay-hidden/); await expect(nestedPopover).toHaveClass(/overlay-hidden/);
}); });

4
core/src/components/select/test/basic/select.e2e.ts
View File

@ -45,7 +45,7 @@ test.describe('select: basic', () => {
animations: 'disabled', animations: 'disabled',
}); });
const alert = await page.locator('ion-alert'); const alert = page.locator('ion-alert');
await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss()); await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
await ionDismiss.next(); await ionDismiss.next();
@ -65,7 +65,7 @@ test.describe('select: basic', () => {
animations: 'disabled', animations: 'disabled',
}); });
const actionSheet = await page.locator('ion-action-sheet'); const actionSheet = page.locator('ion-action-sheet');
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss()); await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
await ionDismiss.next(); await ionDismiss.next();

4
core/src/components/select/test/compare-with/select.e2e.ts
View File

@ -7,8 +7,8 @@ test.describe('select: compare-with', () => {
await page.goto('/src/components/select/test/compare-with'); await page.goto('/src/components/select/test/compare-with');
const multipleSelect = await page.locator('#multiple'); const multipleSelect = page.locator('#multiple');
const singleSelect = await page.locator('#single'); const singleSelect = page.locator('#single');
await expect(multipleSelect).toHaveJSProperty('value', [ await expect(multipleSelect).toHaveJSProperty('value', [
{ {

2
core/src/components/select/test/legacy/async/select.e2e.ts
View File

@ -8,7 +8,7 @@ test.describe.skip('select: async', () => {
await page.goto(`/src/components/select/test/legacy/async`); await page.goto(`/src/components/select/test/legacy/async`);
const selectValueSet = await page.spyOnEvent('selectValueSet'); const selectValueSet = await page.spyOnEvent('selectValueSet');
const select = await page.locator('#default'); const select = page.locator('#default');
await selectValueSet.next(); await selectValueSet.next();

4
core/src/components/select/test/legacy/basic/select.e2e.ts
View File

@ -44,7 +44,7 @@ test.describe('select: basic', () => {
`select-alert-diff-${page.getSnapshotSettings()}.png` `select-alert-diff-${page.getSnapshotSettings()}.png`
); );
const alert = await page.locator('ion-alert'); const alert = page.locator('ion-alert');
await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss()); await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
await ionDismiss.next(); await ionDismiss.next();
@ -64,7 +64,7 @@ test.describe('select: basic', () => {
`select-action-sheet-diff-${page.getSnapshotSettings()}.png` `select-action-sheet-diff-${page.getSnapshotSettings()}.png`
); );
const actionSheet = await page.locator('ion-action-sheet'); const actionSheet = page.locator('ion-action-sheet');
await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss()); await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
await ionDismiss.next(); await ionDismiss.next();

4
core/src/components/select/test/legacy/compare-with/select.e2e.ts
View File

@ -7,8 +7,8 @@ test.describe('select: compare-with', () => {
await page.goto('/src/components/select/test/legacy/compare-with'); await page.goto('/src/components/select/test/legacy/compare-with');
const multipleSelect = await page.locator('#multiple'); const multipleSelect = page.locator('#multiple');
const singleSelect = await page.locator('#single'); const singleSelect = page.locator('#single');
await expect(multipleSelect).toHaveJSProperty('value', [ await expect(multipleSelect).toHaveJSProperty('value', [
{ {

2
core/src/components/select/test/legacy/standalone/select.e2e.ts
View File

@ -10,7 +10,7 @@ test.describe('select: standalone', () => {
await ionAlertDidPresent.next(); await ionAlertDidPresent.next();
const alert = await page.locator('ion-alert'); const alert = page.locator('ion-alert');
await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss()); await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
await ionAlertDidDismiss.next(); await ionAlertDidDismiss.next();

2
core/src/components/textarea/test/autogrow/textarea.e2e.ts
View File

@ -54,7 +54,7 @@ test.describe('textarea: autogrow', () => {
</ion-app>` </ion-app>`
); );
const textarea = await page.locator('ion-textarea'); const textarea = page.locator('ion-textarea');
await expect(textarea).toHaveScreenshot(`textarea-autogrow-word-break-${page.getSnapshotSettings()}.png`); await expect(textarea).toHaveScreenshot(`textarea-autogrow-word-break-${page.getSnapshotSettings()}.png`);
}); });

2
core/src/components/textarea/test/legacy/autogrow/textarea.e2e.ts
View File

@ -67,7 +67,7 @@ test.describe('textarea: autogrow', () => {
</ion-app>` </ion-app>`
); );
const textarea = await page.locator('ion-textarea'); const textarea = page.locator('ion-textarea');
expect(await textarea.screenshot()).toMatchSnapshot( expect(await textarea.screenshot()).toMatchSnapshot(
`textarea-autogrow-word-break-${page.getSnapshotSettings()}.png` `textarea-autogrow-word-break-${page.getSnapshotSettings()}.png`