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