diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts index 73f718efc1..c056c174a3 100644 --- a/core/src/components/modal/gestures/swipe-to-close.ts +++ b/core/src/components/modal/gestures/swipe-to-close.ts @@ -277,7 +277,7 @@ export const createSwipeToCloseGesture = (el: HTMLIonModalElement, animation: An const gesture = createGesture({ el, gestureName: 'modalSwipeToClose', - gesturePriority: 40, + gesturePriority: 39, direction: 'y', threshold: 10, canStart, diff --git a/core/src/components/modal/test/card-nav/index.html b/core/src/components/modal/test/card-nav/index.html new file mode 100644 index 0000000000..f48c5be8a5 --- /dev/null +++ b/core/src/components/modal/test/card-nav/index.html @@ -0,0 +1,88 @@ + + + + + Modal - Card + Nav + + + + + + + + + + + + +
+ + + Card + + + + + Open Modal + + + +
+ + + + + diff --git a/core/src/components/modal/test/card-nav/modal.e2e.ts b/core/src/components/modal/test/card-nav/modal.e2e.ts new file mode 100644 index 0000000000..8918d34664 --- /dev/null +++ b/core/src/components/modal/test/card-nav/modal.e2e.ts @@ -0,0 +1,50 @@ +import { expect } from '@playwright/test'; +import { test, dragElementBy } from '@utils/test/playwright'; + +import { CardModalPage } from '../fixtures'; + +test.describe('card modal - nav', () => { + let cardModalPage: CardModalPage; + test.beforeEach(async ({ page, browserName }, testInfo) => { + test.skip(testInfo.project.metadata.mode !== 'ios', 'Card style modal is only available on iOS'); + test.skip( + testInfo.project.metadata.rtl === true, + 'This test only verifies that the gesture activates inside of a modal.' + ); + test.skip(browserName !== 'chromium', 'dragElementBy is flaky outside of Chrome browsers.'); + + cardModalPage = new CardModalPage(page); + await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false'); + }); + test('it should swipe to go back', async ({ page }) => { + await cardModalPage.openModalByTrigger('#open-modal'); + + const nav = page.locator('ion-nav') as any; + const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); + + await page.click('#go-page-two'); + + await ionNavDidChange.next(); + + const pageOne = page.locator('page-one'); + expect(pageOne).toHaveClass(/ion-page-hidden/); + + const content = page.locator('.page-two-content'); + + await dragElementBy(content, page, 1000, 0, 10); + + await ionNavDidChange.next(); + }); + test('should swipe to close', async ({ page }) => { + await cardModalPage.openModalByTrigger('#open-modal'); + + const nav = page.locator('ion-nav') as any; + const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange'); + + await page.click('#go-page-two'); + + await ionNavDidChange.next(); + + await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content'); + }); +}); diff --git a/core/src/components/modal/test/card/modal.e2e.ts b/core/src/components/modal/test/card/modal.e2e.ts index 30338cb0c8..1a888e5281 100644 --- a/core/src/components/modal/test/card/modal.e2e.ts +++ b/core/src/components/modal/test/card/modal.e2e.ts @@ -1,38 +1,7 @@ import { expect } from '@playwright/test'; -import { dragElementBy, test, Viewports } from '@utils/test/playwright'; -import type { E2EPage, EventSpy } from '@utils/test/playwright'; +import { test, Viewports } from '@utils/test/playwright'; -class CardModalPage { - private ionModalDidPresent!: EventSpy; - private ionModalDidDismiss!: EventSpy; - private page: E2EPage; - - constructor(page: E2EPage) { - this.page = page; - } - async navigate() { - const { page } = this; - await page.goto('/src/components/modal/test/card'); - this.ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - } - async openModalByTrigger(selector: string) { - await this.page.click(selector); - await this.ionModalDidPresent.next(); - - return this.page.locator('ion-modal'); - } - - async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 500) { - const { page } = this; - const elementRef = await page.locator(selector); - await dragElementBy(elementRef, page, 0, swipeY); - - if (waitForDismiss) { - await this.ionModalDidDismiss.next(); - } - } -} +import { CardModalPage } from '../fixtures'; test.describe('card modal', () => { let cardModalPage: CardModalPage; @@ -40,7 +9,7 @@ test.describe('card modal', () => { test.skip(testInfo.project.metadata.mode !== 'ios', 'Card style modal is only available on iOS'); cardModalPage = new CardModalPage(page); - await cardModalPage.navigate(); + await cardModalPage.navigate('/src/components/modal/test/card'); }); test.describe('card modal: rendering', () => { test('should not have visual regressions', async ({ page }) => { diff --git a/core/src/components/modal/test/fixtures.ts b/core/src/components/modal/test/fixtures.ts new file mode 100644 index 0000000000..a533b2ab1c --- /dev/null +++ b/core/src/components/modal/test/fixtures.ts @@ -0,0 +1,34 @@ +import { dragElementBy } from '@utils/test/playwright'; +import type { E2EPage, EventSpy } from '@utils/test/playwright'; + +export class CardModalPage { + private ionModalDidPresent!: EventSpy; + private ionModalDidDismiss!: EventSpy; + private page: E2EPage; + + constructor(page: E2EPage) { + this.page = page; + } + async navigate(url: string) { + const { page } = this; + await page.goto(url); + this.ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + } + async openModalByTrigger(selector: string) { + await this.page.click(selector); + await this.ionModalDidPresent.next(); + + return this.page.locator('ion-modal'); + } + + async swipeToCloseModal(selector: string, waitForDismiss = true, swipeY = 500) { + const { page } = this; + const elementRef = await page.locator(selector); + await dragElementBy(elementRef, page, 0, swipeY); + + if (waitForDismiss) { + await this.ionModalDidDismiss.next(); + } + } +} diff --git a/core/src/utils/test/playwright/drag-element.ts b/core/src/utils/test/playwright/drag-element.ts index 8cfe6d36d7..b053cc17d8 100644 --- a/core/src/utils/test/playwright/drag-element.ts +++ b/core/src/utils/test/playwright/drag-element.ts @@ -6,7 +6,9 @@ export const dragElementBy = async ( el: Locator | ElementHandle, page: E2EPage, dragByX = 0, - dragByY = 0 + dragByY = 0, + startXCoord?: number, + startYCoord?: number ) => { const boundingBox = await el.boundingBox(); @@ -16,8 +18,8 @@ export const dragElementBy = async ( ); } - const startX = boundingBox.x + boundingBox.width / 2; - const startY = boundingBox.y + boundingBox.height / 2; + const startX = startXCoord === undefined ? boundingBox.x + boundingBox.width / 2 : startXCoord; + const startY = startYCoord === undefined ? boundingBox.y + boundingBox.height / 2 : startYCoord; const midX = startX + dragByX / 2; const midY = startY + dragByY / 2;