From 23165cdb8cf660f701d765194e5f035b82c6d2f1 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 26 Jun 2023 08:20:38 -0700 Subject: [PATCH] test(item-sliding): update visual regressions (#27695) Issue number: - --------- ## What is the current behavior? I forgot to address the tests when working on FW-2608 to address issue #26103 ## What is the new behavior? - Updated the visual regressions tests to verify that the item-sliding displays correctly on LTR/RTL. - Updated the item sliding tests to use the generators ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information The tests for item-sliding are disabled due to gesture flakiness. This will be addressed in another ticket. I recommend testing locally by adding the `.only` to all tests called `should not have visual regressions` and running `npm run test.e2e item-sliding`. --- .../test/basic/item-sliding.e2e.ts | 32 +++++++++---------- .../test/icons/item-sliding.e2e.ts | 16 ++++------ .../item-sliding/test/test.utils.ts | 10 +++--- 3 files changed, 28 insertions(+), 30 deletions(-) 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 index c4db981021..9a6f4fe1b8 100644 --- a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts @@ -3,26 +3,27 @@ import { configs, dragElementBy, test } from '@utils/test/playwright'; import { testSlidingItem } from '../test.utils'; +// TODO FW-3006 /** * item-sliding doesn't have mode-specific styling */ +configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('item-sliding: basic'), () => { + test.fixme('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/item-sliding/test/basic`, config); + + await testSlidingItem(page, 'item2', 'start', screenshot, true); + await testSlidingItem(page, 'item2', 'end', screenshot); + }); + }); +}); + +// TODO FW-3006 +/** + * This behavior does not vary across modes/directions + */ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, 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( @@ -40,7 +41,6 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co 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'); 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 index c0d32ec0f7..7b11e1ad1e 100644 --- a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts +++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts @@ -3,21 +3,17 @@ import { configs, test } from '@utils/test/playwright'; import { testSlidingItem } from '../test.utils'; // TODO FW-3006 -configs().forEach(({ title, config }) => { +/** + * item-sliding doesn't have mode-specific styling + */ +configs({ modes: ['md'] }).forEach(({ title, screenshot, 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"); + test('should not have visual regressions', async ({ page }) => { 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); + await testSlidingItem(page, itemID, itemID, screenshot); } }); }); diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts index 17fe093d11..5f759963d5 100644 --- a/core/src/components/item-sliding/test/test.utils.ts +++ b/core/src/components/item-sliding/test/test.utils.ts @@ -1,13 +1,15 @@ import { expect } from '@playwright/test'; -import type { Locator } from '@playwright/test'; -import type { E2EPage } from '@utils/test/playwright'; +import type { E2EPage, ScreenshotFn } from '@utils/test/playwright'; export const testSlidingItem = async ( page: E2EPage, - item: Locator, + itemID: string, screenshotNameSuffix: string, + screenshot: ScreenshotFn, openStart = false ) => { + const item = page.locator(`#${itemID}`); + // passing a param into the eval callback is tricky due to execution context // so just do the check outside the callback instead to make things easy if (openStart) { @@ -23,7 +25,7 @@ export const testSlidingItem = async ( // opening animation takes longer than waitForChanges accounts for await page.waitForTimeout(500); - await expect(item).toHaveScreenshot(`item-sliding-${screenshotNameSuffix}-${page.getSnapshotSettings()}.png`); + await expect(item).toHaveScreenshot(screenshot(`item-sliding-${screenshotNameSuffix}`)); await item.evaluate(async (el: HTMLIonItemSlidingElement) => { await el.close();