javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

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');
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
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';
// Focus #basic-modal button
@ -74,7 +74,7 @@ test.describe('modal: rendering', () => {
await ionModalWillPresent.next();
await ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
await expect(modal).toHaveClass(/show-modal/);
await page.setIonViewport();
@ -112,7 +112,7 @@ test.describe('modal: htmlAttributes inheritance', () => {
await ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
const attribute = await modal.getAttribute('data-testid');
expect(attribute).toBe('basic-modal');
@ -161,7 +161,7 @@ test.describe('modal: incorrect usage', () => {
await page.click('#basic-modal');
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));
expect(warnings.length).toBe(1);
@ -174,7 +174,7 @@ test.describe('modal: incorrect usage', () => {
await page.click('#basic-modal');
await ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => {
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();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
expect(returnValue).toBe(true);
@ -27,7 +27,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -40,7 +40,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(true);
@ -53,7 +53,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -90,7 +90,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(true);
@ -103,7 +103,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -116,7 +116,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(true);
@ -129,7 +129,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -151,7 +151,7 @@ test.describe('modal: canDismiss', () => {
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 ionModalDidDismiss.next();
@ -164,10 +164,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
expect(modal).not.toBe(null);
});
test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
@ -179,7 +179,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next();
@ -193,12 +193,12 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionHandlerDone.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
expect(modal).not.toBe(null);
});
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();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionActionSheetDidPresent.next();
@ -234,7 +234,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(true);
@ -247,7 +247,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -260,7 +260,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(true);
@ -273,7 +273,7 @@ test.describe('modal: canDismiss', () => {
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());
expect(returnValue).toBe(false);
@ -286,7 +286,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next();
@ -299,10 +299,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
expect(modal).not.toBe(null);
});
test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
@ -314,7 +314,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionModalDidDismiss.next();
@ -328,12 +328,12 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionHandlerDone.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
expect(modal).not.toBe(null);
});
test('should not dismiss on swipe when not attempting to close', async ({ page }) => {
@ -344,10 +344,10 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, -500);
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
expect(modal).not.toBe(null);
});
test('should hit the dismiss threshold when swiping', async ({ page }) => {
@ -359,7 +359,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 100);
await ionModalDidDismiss.next();
@ -374,7 +374,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
await ionActionSheetDidPresent.next();
@ -399,7 +399,7 @@ test.describe('modal: canDismiss', () => {
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 ionHandlerDone.next();
@ -415,7 +415,7 @@ test.describe('modal: canDismiss', () => {
await ionModalDidPresent.next();
const modalHeader = await page.locator('#modal-header');
const modalHeader = page.locator('#modal-header');
await dragElementBy(modalHeader, page, 0, 500);
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 ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
const content = (await page.$('ion-modal ion-content'))!;
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 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 ionModalDidDismiss.next();
@ -27,7 +27,7 @@ test.describe('card modal - scroll target', () => {
await page.click('#card');
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'))!;
await content.evaluate((el: HTMLElement) => (el.scrollTop = 500));
@ -44,7 +44,7 @@ test.describe('card modal - scroll target', () => {
await page.click('#card');
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 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.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);
});
});
@ -157,7 +157,7 @@ test.describe('card modal', () => {
await cardModalPage.openModalByTrigger('#card');
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);
});
});

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) {
const { page } = this;
const elementRef = await page.locator(selector);
const elementRef = page.locator(selector);
await dragElementBy(elementRef, page, 0, swipeY);
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 modal = page.locator('ion-modal');
await page.locator('#date-button').click();
await page.click('#date-button');
await ionModalDidPresent.next();
// 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 ionModalDidDismiss.next();
await page.locator('#date-button').click();
await page.click('#date-button');
await ionModalDidPresent.next();
// 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 ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01));
});
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());
expect(breakpoint).toBe(0.25);
});
@ -102,7 +102,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
});
test('should update the current breakpoint', async ({ page }) => {
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 ionBreakpointDidChange.next();
@ -112,7 +112,7 @@ test.describe('sheet modal: setting the breakpoint', () => {
});
test('should emit ionBreakpointDidChange', async ({ page }) => {
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 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 }) => {
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 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 }) => {
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);

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 ionModalDidPresent.next();
const modal = await page.locator('ion-modal');
const modal = page.locator('ion-modal');
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
await ionModalDidDismiss.next();