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 index aa44b112924..09695de4008 100644 --- a/core/src/components/item-sliding/test/async/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/async/item-sliding.e2e.ts @@ -1,6 +1,9 @@ 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: async'), () => { test.beforeEach(async ({ page }) => { @@ -35,5 +38,83 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => await expect(itemSlidingEl).toHaveClass(/item-sliding-active-slide/); }); + + test('should not throw errors when adding multiple items with side="end" using the Ionic CDN', async ({ + page, + }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29499', + }); + + const errors: string[] = []; + page.on('console', (msg) => { + if (msg.type() === 'error') { + errors.push(msg.text()); + } + }); + page.on('pageerror', (error) => { + errors.push(error.message); + }); + + // This issue only happens when using a CDN version of Ionic + // so we need to use the CDN by passing the `importIonicFromCDN` option + // to setContent. + await page.setContent( + ` + + + Item Sliding + + ADD ITEM + + + + + + + + + `, + { ...config, importIonicFromCDN: true } + ); + + // Click the button enough times to reproduce the issue + const addButton = page.locator('#addItem'); + await addButton.click(); + await addButton.click(); + await addButton.click(); + + await page.waitForChanges(); + + // Check that the items have been added + const items = page.locator('ion-item-sliding'); + expect(await items.count()).toBe(3); + + // Check that no errors have been logged + expect(errors.length).toBe(0); + }); }); }); diff --git a/core/src/utils/test/playwright/page/utils/set-content.ts b/core/src/utils/test/playwright/page/utils/set-content.ts index b844bac81f3..af0ee88ab26 100644 --- a/core/src/utils/test/playwright/page/utils/set-content.ts +++ b/core/src/utils/test/playwright/page/utils/set-content.ts @@ -33,6 +33,22 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL; + // The Ionic bundle is included locally by default unless the test + // config passes in the importIonicFromCDN option. This is useful + // when testing with the CDN version of Ionic. + let ionicImports = ` + + + `; + + if (options?.importIonicFromCDN) { + ionicImports = ` + + + + `; + } + const output = ` @@ -40,11 +56,10 @@ export const setContent = async (page: Page, html: string, testInfo: TestInfo, o Ionic Playwright Test - ${palette !== 'light' ? `` : ''} - + ${ionicImports}