From 521063bf241dc2c55bcd02a92ed8a418cfec6b1e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 28 Mar 2023 12:53:36 -0400 Subject: [PATCH] fix(item-sliding): open method works with items added async (#27035) resolves #26991 --- .../components/item-sliding/item-sliding.tsx | 11 ++++- .../item-sliding/test/async/index.html | 49 +++++++++++++++++++ .../test/async/item-sliding.e2e.ts | 23 +++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 core/src/components/item-sliding/test/async/index.html create mode 100644 core/src/components/item-sliding/test/async/item-sliding.e2e.ts diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 1c2a7c7548..1aefe5b504 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -127,7 +127,16 @@ export class ItemSliding implements ComponentInterface { */ @Method() async open(side: Side | undefined) { - if (this.item === null) { + /** + * It is possible for the item to be added to the DOM + * after the item-sliding component was created. As a result, + * if this.item is null, then we should attempt to + * query for the ion-item again. + * However, if the item is already defined then + * we do not query for it again. + */ + const item = (this.item = this.item ?? this.el.querySelector('ion-item')); + if (item === null) { return; } diff --git a/core/src/components/item-sliding/test/async/index.html b/core/src/components/item-sliding/test/async/index.html new file mode 100644 index 0000000000..401e37dc96 --- /dev/null +++ b/core/src/components/item-sliding/test/async/index.html @@ -0,0 +1,49 @@ + + + + + Item Sliding - Async + + + + + + + + + + + + + Item Sliding - Basic + + + + + + + + Option + + + + + + + + + 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..ed83be79d4 --- /dev/null +++ b/core/src/components/item-sliding/test/async/item-sliding.e2e.ts @@ -0,0 +1,23 @@ +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/); + }); +});