mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
test(many): do not await page.locator (#27267)
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:
@ -85,7 +85,7 @@ test.describe('action sheet: basic', () => {
|
||||
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
|
||||
await actionSheetFixture.open('#alertFromActionSheet');
|
||||
|
||||
await page.locator('#open-alert').click();
|
||||
await page.click('#open-alert');
|
||||
|
||||
await ionAlertDidPresent.next();
|
||||
});
|
||||
|
@ -16,7 +16,7 @@ test.describe('datetime-button: switching to correct view', () => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date');
|
||||
@ -25,7 +25,7 @@ test.describe('datetime-button: switching to correct view', () => {
|
||||
const datetime = page.locator('ion-datetime');
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'date-time');
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveJSProperty('presentation', 'time');
|
||||
|
@ -65,40 +65,40 @@ test.describe('datetime-button: popover', () => {
|
||||
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
|
||||
});
|
||||
test('should open the date popover', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time popover', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
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 expect(datetime).toBeVisible();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
|
||||
await ionPopoverDidDismiss.next();
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
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 expect(datetime).toBeVisible();
|
||||
|
||||
await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
|
||||
await ionPopoverDidDismiss.next();
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionPopoverDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
@ -127,40 +127,40 @@ test.describe('datetime-button: modal', () => {
|
||||
ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
|
||||
});
|
||||
test('should open the date modal', async ({ page }) => {
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
test('should open the time modal', async ({ page }) => {
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
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 expect(datetime).toBeVisible();
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.locator('#time-button').click();
|
||||
await page.click('#time-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
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 expect(datetime).toBeVisible();
|
||||
|
||||
await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
|
||||
await ionModalDidDismiss.next();
|
||||
|
||||
await page.locator('#date-button').click();
|
||||
await page.click('#date-button');
|
||||
await ionModalDidPresent.next();
|
||||
await expect(datetime).toBeVisible();
|
||||
});
|
||||
|
@ -40,7 +40,7 @@ test.describe('img: basic', () => {
|
||||
ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
|
||||
ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
|
||||
|
||||
const ionImg = await page.locator('ion-img');
|
||||
const ionImg = page.locator('ion-img');
|
||||
await ionImg.evaluate((el: HTMLIonImgElement) => {
|
||||
el.src = 'https://via.placeholder.com/150';
|
||||
return el;
|
||||
@ -79,7 +79,7 @@ test.describe('img: basic', () => {
|
||||
|
||||
ionError = await page.spyOnEvent('ionError');
|
||||
|
||||
const ionImg = await page.locator('ion-img');
|
||||
const ionImg = page.locator('ion-img');
|
||||
await ionImg.evaluate((el: HTMLIonImgElement) => {
|
||||
el.src = 'https://via.placeholder.com/150';
|
||||
return el;
|
||||
|
@ -19,8 +19,8 @@ test.describe('item: axe', () => {
|
||||
<ion-item id="item-2" aria-label="test" button="true"></ion-item>
|
||||
`);
|
||||
|
||||
const item1 = await page.locator('#item-1 .item-native');
|
||||
const item2 = await page.locator('#item-2 .item-native');
|
||||
const item1 = page.locator('#item-1 .item-native');
|
||||
const item2 = page.locator('#item-2 .item-native');
|
||||
|
||||
expect(await item1.getAttribute('aria-label')).toEqual('test');
|
||||
expect(await item2.getAttribute('aria-label')).toEqual('test');
|
||||
|
@ -17,7 +17,7 @@ test.describe('loading: basic', () => {
|
||||
|
||||
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 ionLoadingDidDismiss.next();
|
||||
@ -51,7 +51,7 @@ test.describe('loading: basic', () => {
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
|
||||
const loading = await page.locator('ion-loading');
|
||||
const loading = page.locator('ion-loading');
|
||||
await expect(loading).toHaveAttribute('data-testid', 'basic-loading');
|
||||
});
|
||||
});
|
||||
@ -63,7 +63,7 @@ test.describe('loading: basic', () => {
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
|
||||
const button = await page.locator('ion-loading ion-button');
|
||||
const button = page.locator('ion-loading ion-button');
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
await page.keyboard.down('Alt');
|
||||
|
@ -15,7 +15,7 @@ test.describe('loading: standalone', () => {
|
||||
|
||||
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 ionLoadingDidDismiss.next();
|
||||
|
@ -28,7 +28,7 @@ test.describe('menu: basic', () => {
|
||||
await page.click('#open-start');
|
||||
await ionDidOpen.next();
|
||||
|
||||
const button = await page.locator('#start-menu-button');
|
||||
const button = page.locator('#start-menu-button');
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
await page.keyboard.down('Alt');
|
||||
|
@ -17,14 +17,14 @@ test.describe('menu: focus trap', () => {
|
||||
await page.click('#open-menu-button');
|
||||
await ionDidOpen.next();
|
||||
|
||||
const menu = await page.locator('#menu');
|
||||
const menu = page.locator('#menu');
|
||||
await expect(menu).toBeFocused();
|
||||
|
||||
const openModalButton = await page.locator('#open-modal-button');
|
||||
const openModalButton = page.locator('#open-modal-button');
|
||||
await openModalButton.click();
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const modal = await page.locator('#modal');
|
||||
const modal = page.locator('#modal');
|
||||
await expect(modal).toBeFocused();
|
||||
|
||||
await modal.evaluate(async (el: HTMLIonModalElement) => {
|
||||
@ -45,13 +45,13 @@ test.describe('menu: focus trap', () => {
|
||||
await page.click('#open-menu-button');
|
||||
await ionDidOpen.next();
|
||||
|
||||
const menu = await page.locator('#menu');
|
||||
const menu = page.locator('#menu');
|
||||
await expect(menu).toBeFocused();
|
||||
|
||||
await page.click('#open-modal-button');
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const modal = await page.locator('#modal');
|
||||
const modal = page.locator('#modal');
|
||||
await expect(modal).toBeFocused();
|
||||
});
|
||||
|
||||
@ -63,13 +63,13 @@ test.describe('menu: focus trap', () => {
|
||||
await page.click('#open-menu-button');
|
||||
await ionDidOpen.next();
|
||||
|
||||
const menu = await page.locator('#menu');
|
||||
const menu = page.locator('#menu');
|
||||
await expect(menu).toBeFocused();
|
||||
|
||||
await page.click('#open-modal-button');
|
||||
await ionModalDidPresent.next();
|
||||
|
||||
const modal = await page.locator('#modal');
|
||||
const modal = page.locator('#modal');
|
||||
|
||||
await modal.evaluate(async (el: HTMLIonModalElement) => {
|
||||
await el.dismiss();
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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();
|
||||
|
@ -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);
|
||||
|
@ -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');
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -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) {
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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();
|
||||
|
@ -40,7 +40,7 @@ test.describe('popover: nested', async () => {
|
||||
await backdrop.click({ position: { x: 5, y: 5 } });
|
||||
await ionPopoverDidDismiss.next();
|
||||
|
||||
const nestedPopover = await page.locator('.child-popover-one');
|
||||
const nestedPopover = page.locator('.child-popover-one');
|
||||
await expect(nestedPopover).toHaveClass(/overlay-hidden/);
|
||||
});
|
||||
|
||||
|
@ -45,7 +45,7 @@ test.describe('select: basic', () => {
|
||||
animations: 'disabled',
|
||||
});
|
||||
|
||||
const alert = await page.locator('ion-alert');
|
||||
const alert = page.locator('ion-alert');
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
|
||||
|
||||
await ionDismiss.next();
|
||||
@ -65,7 +65,7 @@ test.describe('select: basic', () => {
|
||||
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 ionDismiss.next();
|
||||
|
@ -7,8 +7,8 @@ test.describe('select: compare-with', () => {
|
||||
|
||||
await page.goto('/src/components/select/test/compare-with');
|
||||
|
||||
const multipleSelect = await page.locator('#multiple');
|
||||
const singleSelect = await page.locator('#single');
|
||||
const multipleSelect = page.locator('#multiple');
|
||||
const singleSelect = page.locator('#single');
|
||||
|
||||
await expect(multipleSelect).toHaveJSProperty('value', [
|
||||
{
|
||||
|
@ -8,7 +8,7 @@ test.describe.skip('select: async', () => {
|
||||
await page.goto(`/src/components/select/test/legacy/async`);
|
||||
const selectValueSet = await page.spyOnEvent('selectValueSet');
|
||||
|
||||
const select = await page.locator('#default');
|
||||
const select = page.locator('#default');
|
||||
|
||||
await selectValueSet.next();
|
||||
|
||||
|
@ -44,7 +44,7 @@ test.describe('select: basic', () => {
|
||||
`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 ionDismiss.next();
|
||||
@ -64,7 +64,7 @@ test.describe('select: basic', () => {
|
||||
`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 ionDismiss.next();
|
||||
|
@ -7,8 +7,8 @@ test.describe('select: compare-with', () => {
|
||||
|
||||
await page.goto('/src/components/select/test/legacy/compare-with');
|
||||
|
||||
const multipleSelect = await page.locator('#multiple');
|
||||
const singleSelect = await page.locator('#single');
|
||||
const multipleSelect = page.locator('#multiple');
|
||||
const singleSelect = page.locator('#single');
|
||||
|
||||
await expect(multipleSelect).toHaveJSProperty('value', [
|
||||
{
|
||||
|
@ -10,7 +10,7 @@ test.describe('select: standalone', () => {
|
||||
|
||||
await ionAlertDidPresent.next();
|
||||
|
||||
const alert = await page.locator('ion-alert');
|
||||
const alert = page.locator('ion-alert');
|
||||
await alert.evaluate((el: HTMLIonAlertElement) => el.dismiss());
|
||||
|
||||
await ionAlertDidDismiss.next();
|
||||
|
@ -54,7 +54,7 @@ test.describe('textarea: autogrow', () => {
|
||||
</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`);
|
||||
});
|
||||
|
@ -67,7 +67,7 @@ test.describe('textarea: autogrow', () => {
|
||||
</ion-app>`
|
||||
);
|
||||
|
||||
const textarea = await page.locator('ion-textarea');
|
||||
const textarea = page.locator('ion-textarea');
|
||||
|
||||
expect(await textarea.screenshot()).toMatchSnapshot(
|
||||
`textarea-autogrow-word-break-${page.getSnapshotSettings()}.png`
|
||||
|
Reference in New Issue
Block a user