diff --git a/core/src/components/segment/test/a11y/segment.e2e-legacy.ts b/core/src/components/segment/test/a11y/segment.e2e-legacy.ts deleted file mode 100644 index 8fe9e20049..0000000000 --- a/core/src/components/segment/test/a11y/segment.e2e-legacy.ts +++ /dev/null @@ -1,49 +0,0 @@ -import AxeBuilder from '@axe-core/playwright'; -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: a11y', () => { - test('should not have any axe violations', async ({ page }) => { - await page.goto('/src/components/segment/test/a11y'); - - const results = await new AxeBuilder({ page }).analyze(); - expect(results.violations).toEqual([]); - }); - - // TODO FW-3710 - test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => { - // TODO (FW-2979) - skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); - const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; - const isRTL = testInfo.project.metadata.rtl === true; - const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight'; - const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft'; - - await page.goto('/src/components/segment/test/a11y'); - - const segmentButtons = page.locator('ion-segment-button'); - - await page.keyboard.press(tabKey); - await expect(segmentButtons.nth(0)).toBeFocused(); - - await page.keyboard.press(nextKey); - await expect(segmentButtons.nth(1)).toBeFocused(); - - await page.keyboard.press(previousKey); - await expect(segmentButtons.nth(0)).toBeFocused(); - - await page.keyboard.press('End'); - await expect(segmentButtons.nth(2)).toBeFocused(); - - await page.keyboard.press('Home'); - await expect(segmentButtons.nth(0)).toBeFocused(); - - // Loop to the end from the start - await page.keyboard.press(previousKey); - await expect(segmentButtons.nth(2)).toBeFocused(); - - // Loop to the start from the end - await page.keyboard.press(nextKey); - await expect(segmentButtons.nth(0)).toBeFocused(); - }); -}); diff --git a/core/src/components/segment/test/a11y/segment.e2e.ts b/core/src/components/segment/test/a11y/segment.e2e.ts new file mode 100644 index 0000000000..33bebc50f2 --- /dev/null +++ b/core/src/components/segment/test/a11y/segment.e2e.ts @@ -0,0 +1,51 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs().forEach(({ title, config }) => { + test.describe(title('segment: a11y'), () => { + test('should not have any axe violations', async ({ page }) => { + await page.goto('/src/components/segment/test/a11y', config); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + // TODO FW-3710 + test.skip('segment buttons should be keyboard navigable', async ({ page, browserName, skip }, testInfo) => { + // TODO (FW-2979) + skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.'); + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + const isRTL = testInfo.project.metadata.rtl === true; + const nextKey = isRTL ? 'ArrowLeft' : 'ArrowRight'; + const previousKey = isRTL ? 'ArrowRight' : 'ArrowLeft'; + + await page.goto('/src/components/segment/test/a11y', config); + + const segmentButtons = page.locator('ion-segment-button'); + + await page.keyboard.press(tabKey); + await expect(segmentButtons.nth(0)).toBeFocused(); + + await page.keyboard.press(nextKey); + await expect(segmentButtons.nth(1)).toBeFocused(); + + await page.keyboard.press(previousKey); + await expect(segmentButtons.nth(0)).toBeFocused(); + + await page.keyboard.press('End'); + await expect(segmentButtons.nth(2)).toBeFocused(); + + await page.keyboard.press('Home'); + await expect(segmentButtons.nth(0)).toBeFocused(); + + // Loop to the end from the start + await page.keyboard.press(previousKey); + await expect(segmentButtons.nth(2)).toBeFocused(); + + // Loop to the start from the end + await page.keyboard.press(nextKey); + await expect(segmentButtons.nth(0)).toBeFocused(); + }); + }); +}); diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts b/core/src/components/segment/test/basic/segment.e2e.ts similarity index 63% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts rename to core/src/components/segment/test/basic/segment.e2e.ts index abd3a85604..f9f13b22ac 100644 --- a/core/src/components/segment/test/basic/segment.e2e-legacy.ts +++ b/core/src/components/segment/test/basic/segment.e2e.ts @@ -1,61 +1,80 @@ import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; -test.describe('segment: basic', () => { - test.describe('segment: rendering', () => { +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('segment: rendering'), () => { test('should not have visual regressions when no value is selected', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` First Second Third - `); + `, + config + ); const segment = page.locator('ion-segment'); - await expect(segment).toHaveScreenshot(`segment-no-value-${page.getSnapshotSettings()}.png`); + await expect(segment).toHaveScreenshot(screenshot(`segment-no-value`)); }); test('should not have visual regressions when a value is selected', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` First Second Third - `); + `, + config + ); const segment = page.locator('ion-segment'); - await expect(segment).toHaveScreenshot(`segment-value-${page.getSnapshotSettings()}.png`); + await expect(segment).toHaveScreenshot(screenshot(`segment-value`)); }); + }); +}); +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('segment: feature rendering'), () => { test('should not have visual regressions when an item is disabled', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` First Second Third - `); + `, + config + ); const segment = page.locator('ion-segment'); - await expect(segment).toHaveScreenshot(`segment-disabled-${page.getSnapshotSettings()}.png`); + await expect(segment).toHaveScreenshot(screenshot(`segment-disabled`)); }); test('should not have visual regressions with color', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` First Second Third - `); + `, + config + ); const segment = page.locator('ion-segment'); - await expect(segment).toHaveScreenshot(`segment-color-${page.getSnapshotSettings()}.png`); + await expect(segment).toHaveScreenshot(screenshot(`segment-color`)); }); }); }); diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-color-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-color-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-disabled-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-disabled-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-no-value-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/basic/segment.e2e-legacy.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/basic/segment.e2e.ts-snapshots/segment-value-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts b/core/src/components/segment/test/custom/segment.e2e-legacy.ts deleted file mode 100644 index 6e6b7c7b33..0000000000 --- a/core/src/components/segment/test/custom/segment.e2e-legacy.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: custom', () => { - test('should not have visual regressions', async ({ page, skip }) => { - skip.rtl(); - - await page.goto('/src/components/segment/test/custom'); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(`segment-custom-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/segment/test/custom/segment.e2e.ts b/core/src/components/segment/test/custom/segment.e2e.ts new file mode 100644 index 0000000000..d1e857a5d6 --- /dev/null +++ b/core/src/components/segment/test/custom/segment.e2e.ts @@ -0,0 +1,14 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('segment: custom'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/segment/test/custom', config); + + await page.setIonViewport(); + + await expect(page).toHaveScreenshot(screenshot(`segment-custom`)); + }); + }); +}); diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/custom/segment.e2e-legacy.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/custom/segment.e2e.ts-snapshots/segment-custom-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts b/core/src/components/segment/test/icon/segment.e2e-legacy.ts deleted file mode 100644 index 77b035b705..0000000000 --- a/core/src/components/segment/test/icon/segment.e2e-legacy.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: icons', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - Bookmarks - - - - Reading List - - - - Shared Links - - - `); - - const segment = page.locator('ion-segment'); - - await expect(segment).toHaveScreenshot(`segment-icons-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/segment/test/icon/segment.e2e.ts b/core/src/components/segment/test/icon/segment.e2e.ts new file mode 100644 index 0000000000..36aff5cdb8 --- /dev/null +++ b/core/src/components/segment/test/icon/segment.e2e.ts @@ -0,0 +1,32 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('segment: icons'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + Bookmarks + + + + Reading List + + + + Shared Links + + + `, + config + ); + + const segment = page.locator('ion-segment'); + + await expect(segment).toHaveScreenshot(screenshot(`segment-icons`)); + }); + }); +}); diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/icon/segment.e2e-legacy.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/modes/segment.e2e-legacy.ts b/core/src/components/segment/test/modes/segment.e2e-legacy.ts deleted file mode 100644 index dbb68da0a2..0000000000 --- a/core/src/components/segment/test/modes/segment.e2e-legacy.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: modes', () => { - test('should allow overriding of modes to iOS', async ({ page, skip }) => { - skip.rtl(); - skip.mode('ios', 'This tests that users can override the mode to iOS when the app is in MD mode'); - - await page.setContent(` - - - Puppies - - - `); - - const segment = page.locator('ion-segment'); - const segmentButtons = page.locator('ion-segment-button'); - await expect(segment).toHaveClass(/ios/); - await expect(segmentButtons).toHaveClass(/ios/); - }); - - test('should allow overriding of modes to MD', async ({ page, skip }) => { - skip.rtl(); - skip.mode('md', 'This tests that users can override the mode to MD when the app is in iOS mode'); - - await page.setContent(` - - - Puppies - - - `); - - const segment = page.locator('ion-segment'); - const segmentButtons = page.locator('ion-segment-button'); - await expect(segment).toHaveClass(/md/); - await expect(segmentButtons).toHaveClass(/md/); - }); -}); diff --git a/core/src/components/segment/test/modes/segment.e2e.ts b/core/src/components/segment/test/modes/segment.e2e.ts new file mode 100644 index 0000000000..ed409be143 --- /dev/null +++ b/core/src/components/segment/test/modes/segment.e2e.ts @@ -0,0 +1,45 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This tests that users can override the mode to iOS when the app is in MD mode + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('segment: modes'), () => { + test('should allow overriding of modes to iOS', async ({ page }) => { + await page.setContent( + ` + + + Puppies + + + `, + config + ); + + const segment = page.locator('ion-segment'); + const segmentButtons = page.locator('ion-segment-button'); + await expect(segment).toHaveClass(/ios/); + await expect(segmentButtons).toHaveClass(/ios/); + }); + + test('should allow overriding of modes to MD', async ({ page }) => { + await page.setContent( + ` + + + Puppies + + + `, + config + ); + + const segment = page.locator('ion-segment'); + const segmentButtons = page.locator('ion-segment-button'); + await expect(segment).toHaveClass(/md/); + await expect(segmentButtons).toHaveClass(/md/); + }); + }); +}); diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts b/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts deleted file mode 100644 index 941d2c63e7..0000000000 --- a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: scrollable', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - First - Second - Third - Fourth - Fifth - Sixth - Seventh - Eigth - Nineth - - `); - - const segment = page.locator('ion-segment'); - - await expect(segment).toHaveScreenshot(`segment-scrollable-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/segment/test/scrollable/segment.e2e.ts b/core/src/components/segment/test/scrollable/segment.e2e.ts new file mode 100644 index 0000000000..d40258a70f --- /dev/null +++ b/core/src/components/segment/test/scrollable/segment.e2e.ts @@ -0,0 +1,29 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('segment: scrollable'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + First + Second + Third + Fourth + Fifth + Sixth + Seventh + Eigth + Nineth + + `, + config + ); + + const segment = page.locator('ion-segment'); + + await expect(segment).toHaveScreenshot(screenshot(`segment-scrollable`)); + }); + }); +}); diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/scrollable/segment.e2e-legacy.ts-snapshots/segment-scrollable-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/scrollable/segment.e2e.ts-snapshots/segment-scrollable-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/segment-events.e2e-legacy.ts b/core/src/components/segment/test/segment-events.e2e-legacy.ts deleted file mode 100644 index 6a4c29a8ca..0000000000 --- a/core/src/components/segment/test/segment-events.e2e-legacy.ts +++ /dev/null @@ -1,204 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('segment: events: ionChange', () => { - test.beforeEach(({ skip }) => { - skip.rtl(); - }); - - test.describe('when the segment is activated by keyboard navigation', () => { - test('should emit when there is no initial value', async ({ page, browserName }) => { - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; - - await page.keyboard.press(tabKey); - await page.keyboard.press('ArrowRight'); - await page.keyboard.press('Enter'); - - expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); - - expect(ionChangeSpy).toHaveReceivedEventTimes(1); - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); - }); - }); - - test.describe('when the segment is clicked', () => { - test('should emit when the value changes', async ({ page }) => { - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await page.click('ion-segment-button[value="2"]'); - - await ionChangeSpy.next(); - - expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); - expect(ionChangeSpy).toHaveReceivedEventTimes(1); - }); - - test('when the segment does not have an initial value', async ({ page }) => { - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await page.click('ion-segment-button[value="2"]'); - - await ionChangeSpy.next(); - - expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); - expect(ionChangeSpy).toHaveReceivedEventTimes(1); - }); - }); - - // TODO FW-3021 - test.describe.skip('when the pointer is released', () => { - test('should emit if the value has changed', async ({ page }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/20257', - }); - - await page.setContent(` - - - - One - Two - Three - - - - `); - - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - const firstButton = page.locator('ion-segment-button[value="1"]'); - const lastButton = page.locator('ion-segment-button[value="3"]'); - - await firstButton.hover(); - await page.mouse.down(); - - await lastButton.hover(); - await page.mouse.up(); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '3' }); - expect(ionChangeSpy).toHaveReceivedEventTimes(1); - }); - - test('should not emit if the value has not changed', async ({ page }) => { - await page.setContent(` - - One - Two - Three - - `); - - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - const firstButton = page.locator('ion-segment-button[value="1"]'); - const lastButton = page.locator('ion-segment-button[value="3"]'); - - await firstButton.hover(); - await page.mouse.down(); - - await lastButton.hover(); - - await firstButton.hover(); - await page.mouse.up(); - - expect(ionChangeSpy).toHaveReceivedEventTimes(0); - }); - }); - - test('should not emit if the value has not changed on click', async ({ page }) => { - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await page.click('ion-segment-button[value="1"]'); - - expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('1'); - - expect(ionChangeSpy).toHaveReceivedEventTimes(0); - }); - - test('should not emit if the value is set programmatically', async ({ page }) => { - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await segment.evaluate((el: HTMLIonSegmentElement) => (el.value = '2')); - - expect(ionChangeSpy).toHaveReceivedEventTimes(0); - expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); - }); - - test('should emit when clicking after changing value programmatically', async ({ page }) => { - test.info().annotations.push({ - type: 'issue', - description: 'https://github.com/ionic-team/ionic-framework/issues/27002', - }); - - await page.setContent(` - - One - Two - Three - - `); - - const segment = page.locator('ion-segment'); - const segmentButtons = segment.locator('ion-segment-button'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await segment.evaluate((el: HTMLIonSegmentElement) => (el.value = '2')); - - await segmentButtons.nth(0).click(); - - await ionChangeSpy.next(); - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '1' }); - }); -}); diff --git a/core/src/components/segment/test/segment-events.e2e.ts b/core/src/components/segment/test/segment-events.e2e.ts new file mode 100644 index 0000000000..f0b10d0e9a --- /dev/null +++ b/core/src/components/segment/test/segment-events.e2e.ts @@ -0,0 +1,229 @@ +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('segment: events: ionChange'), () => { + test.describe('when the segment is activated by keyboard navigation', () => { + test('should emit when there is no initial value', async ({ page, browserName }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab'; + + await page.keyboard.press(tabKey); + await page.keyboard.press('ArrowRight'); + await page.keyboard.press('Enter'); + + expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); + + expect(ionChangeSpy).toHaveReceivedEventTimes(1); + expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); + }); + }); + + test.describe('when the segment is clicked', () => { + test('should emit when the value changes', async ({ page }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await page.click('ion-segment-button[value="2"]'); + + await ionChangeSpy.next(); + + expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); + + expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); + expect(ionChangeSpy).toHaveReceivedEventTimes(1); + }); + + test('when the segment does not have an initial value', async ({ page }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await page.click('ion-segment-button[value="2"]'); + + await ionChangeSpy.next(); + + expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); + + expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '2' }); + expect(ionChangeSpy).toHaveReceivedEventTimes(1); + }); + }); + + // TODO FW-3021 + test.describe.skip('when the pointer is released', () => { + test('should emit if the value has changed', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/20257', + }); + + await page.setContent( + ` + + + + One + Two + Three + + + + `, + config + ); + + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + const firstButton = page.locator('ion-segment-button[value="1"]'); + const lastButton = page.locator('ion-segment-button[value="3"]'); + + await firstButton.hover(); + await page.mouse.down(); + + await lastButton.hover(); + await page.mouse.up(); + + expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '3' }); + expect(ionChangeSpy).toHaveReceivedEventTimes(1); + }); + + test('should not emit if the value has not changed', async ({ page }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + const firstButton = page.locator('ion-segment-button[value="1"]'); + const lastButton = page.locator('ion-segment-button[value="3"]'); + + await firstButton.hover(); + await page.mouse.down(); + + await lastButton.hover(); + + await firstButton.hover(); + await page.mouse.up(); + + expect(ionChangeSpy).toHaveReceivedEventTimes(0); + }); + }); + + test('should not emit if the value has not changed on click', async ({ page }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await page.click('ion-segment-button[value="1"]'); + + expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('1'); + + expect(ionChangeSpy).toHaveReceivedEventTimes(0); + }); + + test('should not emit if the value is set programmatically', async ({ page }) => { + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await segment.evaluate((el: HTMLIonSegmentElement) => (el.value = '2')); + + expect(ionChangeSpy).toHaveReceivedEventTimes(0); + expect(await segment.evaluate((el: HTMLIonSegmentElement) => el.value)).toBe('2'); + }); + + test('should emit when clicking after changing value programmatically', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/27002', + }); + + await page.setContent( + ` + + One + Two + Three + + `, + config + ); + + const segment = page.locator('ion-segment'); + const segmentButtons = segment.locator('ion-segment-button'); + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await segment.evaluate((el: HTMLIonSegmentElement) => (el.value = '2')); + + await segmentButtons.nth(0).click(); + + await ionChangeSpy.next(); + expect(ionChangeSpy).toHaveReceivedEventDetail({ value: '1' }); + }); + }); +}); diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts b/core/src/components/segment/test/toolbar/segment.e2e.ts similarity index 76% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts rename to core/src/components/segment/test/toolbar/segment.e2e.ts index 20329552c8..a3687a6feb 100644 --- a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts +++ b/core/src/components/segment/test/toolbar/segment.e2e.ts @@ -1,10 +1,11 @@ import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; -test.describe('segment: toolbar', () => { - test.describe('segment: rendering', () => { +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('segment: rendering'), () => { test('should not have visual regressions when used in a toolbar without color', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` @@ -14,15 +15,18 @@ test.describe('segment: toolbar', () => { - `); + `, + config + ); const header = page.locator('ion-header'); - await expect(header).toHaveScreenshot(`segment-toolbar-${page.getSnapshotSettings()}.png`); + await expect(header).toHaveScreenshot(screenshot(`segment-toolbar`)); }); test('should not have visual regressions when used in a toolbar with color', async ({ page }) => { - await page.setContent(` + await page.setContent( + ` @@ -53,23 +57,30 @@ test.describe('segment: toolbar', () => { - `); + `, + config + ); const header = page.locator('ion-header'); - await expect(header).toHaveScreenshot(`segment-toolbar-color-${page.getSnapshotSettings()}.png`); + await expect(header).toHaveScreenshot(screenshot(`segment-toolbar-color`)); }); + }); +}); - test('should not inherit height when segment is MD and toolbar is iOS', async ({ page, skip }) => { - skip.rtl(); - skip.mode('ios', 'We manually set the mode in this test, so the automatic mode switching is not needed'); - +/** + * We manually set the mode in this test, so the automatic mode switching is not needed + */ +configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('segment: feature rendering'), () => { + test('should not inherit height when segment is MD and toolbar is iOS', async ({ page }) => { test.info().annotations.push({ type: 'issue', description: 'https://github.com/ionic-team/ionic-framework/issues/18617', }); - await page.setContent(` + await page.setContent( + ` @@ -79,11 +90,13 @@ test.describe('segment: toolbar', () => { - `); + `, + config + ); const header = page.locator('ion-header'); - await expect(header).toHaveScreenshot(`segment-toolbar-height-inherit-${page.getSnapshotSettings()}.png`); + await expect(header).toHaveScreenshot(screenshot(`segment-toolbar-height-inherit`)); }); }); }); diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-color-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-height-inherit-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/segment/test/toolbar/segment.e2e-legacy.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png rename to core/src/components/segment/test/toolbar/segment.e2e.ts-snapshots/segment-toolbar-md-rtl-Mobile-Safari-linux.png