diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 39d11d7b85..f7fac0c67d 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -66,7 +66,6 @@ export class ItemSliding implements ComponentInterface { async componentDidLoad() { this.item = this.el.querySelector('ion-item'); - await this.updateOptions(); this.gesture = (await import('../../utils/gesture')).createGesture({ @@ -91,6 +90,7 @@ export class ItemSliding implements ComponentInterface { this.item = null; this.leftOptions = this.rightOptions = undefined; + this.closeOpened(); } /** @@ -128,6 +128,7 @@ export class ItemSliding implements ComponentInterface { async closeOpened(): Promise { if (openSlidingItem !== undefined) { openSlidingItem.close(); + openSlidingItem = undefined; return true; } return false; @@ -162,6 +163,7 @@ export class ItemSliding implements ComponentInterface { this.closeOpened(); return false; } + return !!(this.rightOptions || this.leftOptions); } diff --git a/core/src/components/item-sliding/test/interactive/e2e.ts b/core/src/components/item-sliding/test/interactive/e2e.ts new file mode 100644 index 0000000000..7319b27c7a --- /dev/null +++ b/core/src/components/item-sliding/test/interactive/e2e.ts @@ -0,0 +1,49 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('item-sliding: interactive', async () => { + const page = await newE2EPage({ + url: '/src/components/item-sliding/test/interactive?ionic:_testing=true' + }); + + const compare = await page.compareScreenshot(); + expect(compare).toMatchScreenshot(); + + const items = await page.$$('ion-item-sliding'); + expect(items.length).toEqual(3); + + await slideAndDelete(items[0], page); + + const itemsAfterFirstSlide = await page.$$('ion-item-sliding'); + expect(itemsAfterFirstSlide.length).toEqual(2); + + await slideAndDelete(items[1], page); + + const itemsAfterSecondSlide = await page.$$('ion-item-sliding'); + expect(itemsAfterSecondSlide.length).toEqual(1); +}); + +async function slideAndDelete(item: any, page: any) { + try { + // Get the element's ID + const id = await(await item.getProperty('id')).jsonValue(); + + // Simulate a drag + const boundingBox = await item.boundingBox(); + const centerX = parseFloat(boundingBox.x + boundingBox.width / 2); + const centerY = parseFloat(boundingBox.y + boundingBox.height / 2); + + await page.mouse.move(centerX, centerY); + await page.mouse.down(); + await page.mouse.move(0, centerY); + await page.mouse.up(); + + // Click the "delete" option + const options = await item.$$('ion-item-option'); + await options[0].click(); + + // Wait for element to be removed from DOM + await page.waitForSelector(id, { hidden: true }); + } catch (err) { + throw err; + } +} diff --git a/core/src/components/item-sliding/test/interactive/index.html b/core/src/components/item-sliding/test/interactive/index.html new file mode 100644 index 0000000000..03c6d39668 --- /dev/null +++ b/core/src/components/item-sliding/test/interactive/index.html @@ -0,0 +1,54 @@ + + + + + + Item Sliding - Standalone + + + + + + + + + + + + +