diff --git a/core/src/components/item-sliding/test/async/item-sliding.e2e-legacy.ts b/core/src/components/item-sliding/test/async/item-sliding.e2e-legacy.ts deleted file mode 100644 index ed83be79d4..0000000000 --- a/core/src/components/item-sliding/test/async/item-sliding.e2e-legacy.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('item-sliding: async', () => { - test('should open even when item is added async', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md'); - - await page.goto(`/src/components/item-sliding/test/async`); - - const itemEl = page.locator('ion-item'); - const itemSlidingEl = page.locator('ion-item-sliding'); - - // Wait for item to be added to DOM - await page.waitForSelector('ion-item'); - - // Click item to open ion-item-sliding - await itemEl.click(); - - // This class is added when the item sliding component is fully open - await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/); - }); -}); diff --git a/core/src/components/item-sliding/test/async/item-sliding.e2e.ts b/core/src/components/item-sliding/test/async/item-sliding.e2e.ts new file mode 100644 index 0000000000..d91375403e --- /dev/null +++ b/core/src/components/item-sliding/test/async/item-sliding.e2e.ts @@ -0,0 +1,22 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('item-sliding: async'), () => { + test('should open even when item is added async', async ({ page }) => { + await page.goto(`/src/components/item-sliding/test/async`, config); + + const itemEl = page.locator('ion-item'); + const itemSlidingEl = page.locator('ion-item-sliding'); + + // Wait for item to be added to DOM + await page.waitForSelector('ion-item'); + + // Click item to open ion-item-sliding + await itemEl.click(); + + // This class is added when the item sliding component is fully open + await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/); + }); + }); +}); diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts deleted file mode 100644 index d8ee143e78..0000000000 --- a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { expect } from '@playwright/test'; -import { dragElementBy, test } from '@utils/test/playwright'; - -import { testSlidingItem } from '../test.utils'; - -test.describe('item-sliding: basic', () => { - test.beforeEach(async ({ skip }) => { - skip.mode('ios', "item-sliding doesn't have mode-specific styling"); - }); - - // TODO FW-3006 - test.skip('should not have visual regressions', async ({ page, browserName }, testInfo) => { - // TODO(FW-2608) - test.fixme( - testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'), - 'https://github.com/ionic-team/ionic-framework/issues/26103' - ); - - await page.goto(`/src/components/item-sliding/test/basic`); - const item = page.locator('#item2'); - - await testSlidingItem(page, item, 'start', true); - await testSlidingItem(page, item, 'end'); - }); - - // mouse gesture is flaky on CI, skip for now - test.fixme('should open when swiped', async ({ page, skip }) => { - skip.rtl(); - skip.browser( - (browserName: string) => browserName !== 'chromium', - 'dragElementBy is flaky outside of Chrome browsers.' - ); - - await page.goto(`/src/components/item-sliding/test/basic`); - const item = page.locator('#item2'); - - await dragElementBy(item, page, -150); - await page.waitForChanges(); - - // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it - await expect(item).toHaveScreenshot(`item-sliding-gesture-${page.getSnapshotSettings()}.png`); - }); - - // TODO FW-3006 - test.skip('should not scroll when the item-sliding is swiped', async ({ page, skip }) => { - skip.browser('webkit', 'mouse.wheel is not available in WebKit'); - skip.rtl(); - - await page.goto(`/src/components/item-sliding/test/basic`); - - const itemSlidingEl = page.locator('#item2'); - const scrollEl = page.locator('ion-content .inner-scroll'); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - - const box = (await itemSlidingEl.boundingBox())!; - const centerX = box.x + box.width / 2; - const centerY = box.y + box.height / 2; - - await page.mouse.move(centerX, centerY); - await page.mouse.down(); - await page.mouse.move(centerX - 30, centerY); - - /** - * Do not use scrollToBottom() or other scrolling methods - * on ion-content as those will update the scroll position. - * Setting scrollTop still works even with overflow-y: hidden. - * However, simulating a user gesture should not scroll the content. - */ - await page.mouse.wheel(0, 100); - await page.waitForChanges(); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - }); -}); diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts new file mode 100644 index 0000000000..0188887f29 --- /dev/null +++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts @@ -0,0 +1,74 @@ +import { expect } from '@playwright/test'; +import { configs, dragElementBy, test } from '@utils/test/playwright'; + +import { testSlidingItem } from '../test.utils'; + +/** + * item-sliding doesn't have mode-specific styling + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('item-sliding: basic'), () => { + // TODO FW-3006 + test.skip('should not have visual regressions', async ({ page, browserName }, testInfo) => { + // TODO(FW-2608) + test.fixme( + testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'), + 'https://github.com/ionic-team/ionic-framework/issues/26103' + ); + + await page.goto(`/src/components/item-sliding/test/basic`, config); + const item = page.locator('#item2'); + + await testSlidingItem(page, item, 'start', true); + await testSlidingItem(page, item, 'end'); + }); + + // mouse gesture is flaky on CI, skip for now + test.fixme('should open when swiped', async ({ page, skip }) => { + skip.browser( + (browserName: string) => browserName !== 'chromium', + 'dragElementBy is flaky outside of Chrome browsers.' + ); + + await page.goto(`/src/components/item-sliding/test/basic`, config); + const item = page.locator('#item2'); + + await dragElementBy(item, page, -150); + await page.waitForChanges(); + + // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it + await expect(item).toHaveScreenshot(screenshot(`item-sliding-gesture`)); + }); + + // TODO FW-3006 + test.skip('should not scroll when the item-sliding is swiped', async ({ page, skip }) => { + skip.browser('webkit', 'mouse.wheel is not available in WebKit'); + + await page.goto(`/src/components/item-sliding/test/basic`, config); + + const itemSlidingEl = page.locator('#item2'); + const scrollEl = page.locator('ion-content .inner-scroll'); + + expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); + + const box = (await itemSlidingEl.boundingBox())!; + const centerX = box.x + box.width / 2; + const centerY = box.y + box.height / 2; + + await page.mouse.move(centerX, centerY); + await page.mouse.down(); + await page.mouse.move(centerX - 30, centerY); + + /** + * Do not use scrollToBottom() or other scrolling methods + * on ion-content as those will update the scroll position. + * Setting scrollTop still works even with overflow-y: hidden. + * However, simulating a user gesture should not scroll the content. + */ + await page.mouse.wheel(0, 100); + await page.waitForChanges(); + + expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); + }); + }); +}); diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/item-sliding/test/basic/item-sliding.e2e-legacy.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e-legacy.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e-legacy.ts deleted file mode 100644 index c4ca18d73a..0000000000 --- a/core/src/components/item-sliding/test/icons/item-sliding.e2e-legacy.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { test } from '@utils/test/playwright'; - -import { testSlidingItem } from '../test.utils'; - -// TODO FW-3006 -test.describe.skip('item-sliding: icons', () => { - test('should not have visual regressions', async ({ page, browserName, skip }, testInfo) => { - // TODO(FW-2608) - test.fixme( - testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'), - 'https://github.com/ionic-team/ionic-framework/issues/26103' - ); - - skip.mode('ios', "item-sliding doesn't have mode-specific styling"); - await page.goto(`/src/components/item-sliding/test/icons`); - - const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom']; - for (const itemID of itemIDs) { - await testSlidingItem(page, page.locator(`#${itemID}`), itemID); - } - }); -}); diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts new file mode 100644 index 0000000000..c0d32ec0f7 --- /dev/null +++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts @@ -0,0 +1,24 @@ +import { configs, test } from '@utils/test/playwright'; + +import { testSlidingItem } from '../test.utils'; + +// TODO FW-3006 +configs().forEach(({ title, config }) => { + test.describe.skip(title('item-sliding: icons'), () => { + test('should not have visual regressions', async ({ page, browserName, skip }, testInfo) => { + // TODO(FW-2608) + test.fixme( + testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'), + 'https://github.com/ionic-team/ionic-framework/issues/26103' + ); + + skip.mode('ios', "item-sliding doesn't have mode-specific styling"); + await page.goto(`/src/components/item-sliding/test/icons`, config); + + const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom']; + for (const itemID of itemIDs) { + await testSlidingItem(page, page.locator(`#${itemID}`), itemID); + } + }); + }); +}); diff --git a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e-legacy.ts b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e-legacy.ts deleted file mode 100644 index e8e0a20d7d..0000000000 --- a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e-legacy.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('item-sliding: scroll-target', () => { - // TODO FW-3006 - test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => { - skip.browser('webkit', 'mouse.wheel is not available in WebKit'); - skip.rtl(); - - await page.goto(`/src/components/item-sliding/test/scroll-target`); - - const itemSlidingEl = page.locator('ion-item-sliding'); - const scrollEl = page.locator('.ion-content-scroll-host'); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - - const box = (await itemSlidingEl.boundingBox())!; - const centerX = box.x + box.width / 2; - const centerY = box.y + box.height / 2; - - await page.mouse.move(centerX, centerY); - await page.mouse.down(); - await page.mouse.move(centerX - 30, centerY); - - /** - * Do not use scrollToBottom() or other scrolling methods - * on ion-content as those will update the scroll position. - * Setting scrollTop still works even with overflow-y: hidden. - * However, simulating a user gesture should not scroll the content. - */ - await page.mouse.wheel(0, 100); - await page.waitForChanges(); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - }); -}); diff --git a/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts new file mode 100644 index 0000000000..cbc737dc83 --- /dev/null +++ b/core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts @@ -0,0 +1,39 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; +/** + * This behavior does not vary across modes/directions + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('item-sliding: scroll-target'), () => { + // TODO FW-3006 + test.skip('should not scroll when the item-sliding is swiped in custom scroll target', async ({ page, skip }) => { + skip.browser('webkit', 'mouse.wheel is not available in WebKit'); + + await page.goto(`/src/components/item-sliding/test/scroll-target`, config); + + const itemSlidingEl = page.locator('ion-item-sliding'); + const scrollEl = page.locator('.ion-content-scroll-host'); + + expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); + + const box = (await itemSlidingEl.boundingBox())!; + const centerX = box.x + box.width / 2; + const centerY = box.y + box.height / 2; + + await page.mouse.move(centerX, centerY); + await page.mouse.down(); + await page.mouse.move(centerX - 30, centerY); + + /** + * Do not use scrollToBottom() or other scrolling methods + * on ion-content as those will update the scroll position. + * Setting scrollTop still works even with overflow-y: hidden. + * However, simulating a user gesture should not scroll the content. + */ + await page.mouse.wheel(0, 100); + await page.waitForChanges(); + + expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); + }); + }); +});