test(segment): migrate to generators (#27374)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Segment tests are using legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Segment tests are using generator syntax


3f05ad247f

The segment events tests do not vary across modes, so I removed the
extra checks.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/segment/test/a11y/segment.e2e-legacy.ts

@@ -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();
-  });
-});

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();
+    });
+  });
+});

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(
+        `
         <ion-segment>
           <ion-segment-button value="a">First</ion-segment-button>
           <ion-segment-button value="b">Second</ion-segment-button>
           <ion-segment-button value="c">Third</ion-segment-button>
         </ion-segment>
-      `);
+      `,
+        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(
+        `
         <ion-segment value="a">
           <ion-segment-button value="a">First</ion-segment-button>
           <ion-segment-button value="b">Second</ion-segment-button>
           <ion-segment-button value="c">Third</ion-segment-button>
         </ion-segment>
-      `);
+      `,
+        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(
+        `
         <ion-segment value="b">
           <ion-segment-button value="a">First</ion-segment-button>
           <ion-segment-button value="b" disabled="true">Second</ion-segment-button>
           <ion-segment-button value="c">Third</ion-segment-button>
         </ion-segment>
-      `);
+      `,
+        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(
+        `
         <ion-segment value="b" color="danger">
           <ion-segment-button value="a">First</ion-segment-button>
           <ion-segment-button value="b">Second</ion-segment-button>
           <ion-segment-button value="c">Third</ion-segment-button>
         </ion-segment>
-      `);
+      `,
+        config
+      );
 
       const segment = page.locator('ion-segment');
 
-      await expect(segment).toHaveScreenshot(`segment-color-${page.getSnapshotSettings()}.png`);
+      await expect(segment).toHaveScreenshot(screenshot(`segment-color`));
     });
   });
 });

core/src/components/segment/test/custom/segment.e2e-legacy.ts

@@ -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`);
-  });
-});

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`));
+    });
+  });
+});

core/src/components/segment/test/icon/segment.e2e-legacy.ts

@@ -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(`
-      <ion-segment value="2">
-        <ion-segment-button value="1">
-          <ion-icon name="book"></ion-icon>
-          <ion-label>Bookmarks</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="2">
-          <ion-icon name="search"></ion-icon>
-          <ion-label>Reading List</ion-label>
-        </ion-segment-button>
-        <ion-segment-button value="3">
-          <ion-icon name="time"></ion-icon>
-          <ion-label>Shared Links</ion-label>
-        </ion-segment-button>
-      </ion-segment>
-    `);
-
-    const segment = page.locator('ion-segment');
-
-    await expect(segment).toHaveScreenshot(`segment-icons-${page.getSnapshotSettings()}.png`);
-  });
-});

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(
+        `
+        <ion-segment value="2">
+          <ion-segment-button value="1">
+            <ion-icon name="book"></ion-icon>
+            <ion-label>Bookmarks</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="2">
+            <ion-icon name="search"></ion-icon>
+            <ion-label>Reading List</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="3">
+            <ion-icon name="time"></ion-icon>
+            <ion-label>Shared Links</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-icons`));
+    });
+  });
+});

core/src/components/segment/test/modes/segment.e2e-legacy.ts

@@ -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(`
-        <ion-segment mode="ios" value="kittens">
-          <ion-segment-button mode="ios" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      `);
-
-    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(`
-        <ion-segment mode="md" value="kittens">
-          <ion-segment-button mode="md" value="puppies">
-            <ion-label>Puppies</ion-label>
-          </ion-segment-button>
-        </ion-segment>
-      `);
-
-    const segment = page.locator('ion-segment');
-    const segmentButtons = page.locator('ion-segment-button');
-    await expect(segment).toHaveClass(/md/);
-    await expect(segmentButtons).toHaveClass(/md/);
-  });
-});

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(
+        `
+          <ion-segment mode="ios" value="kittens">
+            <ion-segment-button mode="ios" value="puppies">
+              <ion-label>Puppies</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        `,
+        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(
+        `
+          <ion-segment mode="md" value="kittens">
+            <ion-segment-button mode="md" value="puppies">
+              <ion-label>Puppies</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+      const segmentButtons = page.locator('ion-segment-button');
+      await expect(segment).toHaveClass(/md/);
+      await expect(segmentButtons).toHaveClass(/md/);
+    });
+  });
+});

core/src/components/segment/test/scrollable/segment.e2e-legacy.ts

@@ -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(`
-      <ion-segment scrollable="true" value="2">
-        <ion-segment-button value="1">First</ion-segment-button>
-        <ion-segment-button value="2">Second</ion-segment-button>
-        <ion-segment-button value="3">Third</ion-segment-button>
-        <ion-segment-button value="4">Fourth</ion-segment-button>
-        <ion-segment-button value="5">Fifth</ion-segment-button>
-        <ion-segment-button value="6">Sixth</ion-segment-button>
-        <ion-segment-button value="7">Seventh</ion-segment-button>
-        <ion-segment-button value="8">Eigth</ion-segment-button>
-        <ion-segment-button value="9">Nineth</ion-segment-button>
-      </ion-segment>
-    `);
-
-    const segment = page.locator('ion-segment');
-
-    await expect(segment).toHaveScreenshot(`segment-scrollable-${page.getSnapshotSettings()}.png`);
-  });
-});

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(
+        `
+        <ion-segment scrollable="true" value="2">
+          <ion-segment-button value="1">First</ion-segment-button>
+          <ion-segment-button value="2">Second</ion-segment-button>
+          <ion-segment-button value="3">Third</ion-segment-button>
+          <ion-segment-button value="4">Fourth</ion-segment-button>
+          <ion-segment-button value="5">Fifth</ion-segment-button>
+          <ion-segment-button value="6">Sixth</ion-segment-button>
+          <ion-segment-button value="7">Seventh</ion-segment-button>
+          <ion-segment-button value="8">Eigth</ion-segment-button>
+          <ion-segment-button value="9">Nineth</ion-segment-button>
+        </ion-segment>
+      `,
+        config
+      );
+
+      const segment = page.locator('ion-segment');
+
+      await expect(segment).toHaveScreenshot(screenshot(`segment-scrollable`));
+    });
+  });
+});

core/src/components/segment/test/segment-events.e2e-legacy.ts

@@ -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(`
-        <ion-segment>
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
-        </ion-segment>
-    `);
-
-      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(`
-          <ion-segment value="1">
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
-          </ion-segment>
-        `);
-
-      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(`
-          <ion-segment>
-            <ion-segment-button value="1">One</ion-segment-button>
-            <ion-segment-button value="2">Two</ion-segment-button>
-            <ion-segment-button value="3">Three</ion-segment-button>
-          </ion-segment>
-        `);
-
-      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(`
-        <ion-app>
-          <ion-toolbar>
-            <ion-segment value="1">
-              <ion-segment-button value="1">One</ion-segment-button>
-              <ion-segment-button value="2">Two</ion-segment-button>
-              <ion-segment-button value="3">Three</ion-segment-button>
-            </ion-segment>
-          </ion-toolbar>
-        </ion-app>
-      `);
-
-      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(`
-        <ion-segment value="1">
-          <ion-segment-button value="1">One</ion-segment-button>
-          <ion-segment-button value="2">Two</ion-segment-button>
-          <ion-segment-button value="3">Three</ion-segment-button>
-        </ion-segment>
-      `);
-
-      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(`
-      <ion-segment value="1">
-        <ion-segment-button value="1">One</ion-segment-button>
-        <ion-segment-button value="2">Two</ion-segment-button>
-        <ion-segment-button value="3">Three</ion-segment-button>
-      </ion-segment>
-    `);
-
-    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(`
-      <ion-segment value="1">
-        <ion-segment-button value="1">One</ion-segment-button>
-        <ion-segment-button value="2">Two</ion-segment-button>
-        <ion-segment-button value="3">Three</ion-segment-button>
-      </ion-segment>
-    `);
-
-    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(`
-      <ion-segment value="1" swipe-gesture="false">
-        <ion-segment-button value="1">One</ion-segment-button>
-        <ion-segment-button value="2">Two</ion-segment-button>
-        <ion-segment-button value="3">Three</ion-segment-button>
-      </ion-segment>
-    `);
-
-    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' });
-  });
-});

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(
+          `
+          <ion-segment>
+            <ion-segment-button value="1">One</ion-segment-button>
+            <ion-segment-button value="2">Two</ion-segment-button>
+            <ion-segment-button value="3">Three</ion-segment-button>
+          </ion-segment>
+      `,
+          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(
+          `
+            <ion-segment value="1">
+              <ion-segment-button value="1">One</ion-segment-button>
+              <ion-segment-button value="2">Two</ion-segment-button>
+              <ion-segment-button value="3">Three</ion-segment-button>
+            </ion-segment>
+          `,
+          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(
+          `
+            <ion-segment>
+              <ion-segment-button value="1">One</ion-segment-button>
+              <ion-segment-button value="2">Two</ion-segment-button>
+              <ion-segment-button value="3">Three</ion-segment-button>
+            </ion-segment>
+          `,
+          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(
+          `
+          <ion-app>
+            <ion-toolbar>
+              <ion-segment value="1">
+                <ion-segment-button value="1">One</ion-segment-button>
+                <ion-segment-button value="2">Two</ion-segment-button>
+                <ion-segment-button value="3">Three</ion-segment-button>
+              </ion-segment>
+            </ion-toolbar>
+          </ion-app>
+        `,
+          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(
+          `
+          <ion-segment value="1">
+            <ion-segment-button value="1">One</ion-segment-button>
+            <ion-segment-button value="2">Two</ion-segment-button>
+            <ion-segment-button value="3">Three</ion-segment-button>
+          </ion-segment>
+        `,
+          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(
+        `
+        <ion-segment value="1">
+          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="2">Two</ion-segment-button>
+          <ion-segment-button value="3">Three</ion-segment-button>
+        </ion-segment>
+      `,
+        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(
+        `
+        <ion-segment value="1">
+          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="2">Two</ion-segment-button>
+          <ion-segment-button value="3">Three</ion-segment-button>
+        </ion-segment>
+      `,
+        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(
+        `
+        <ion-segment value="1" swipe-gesture="false">
+          <ion-segment-button value="1">One</ion-segment-button>
+          <ion-segment-button value="2">Two</ion-segment-button>
+          <ion-segment-button value="3">Three</ion-segment-button>
+        </ion-segment>
+      `,
+        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' });
+    });
+  });
+});

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(
+        `
         <ion-header>
           <ion-toolbar>
             <ion-segment value="a">
@@ -14,15 +15,18 @@ test.describe('segment: toolbar', () => {
             </ion-segment>
           </ion-toolbar>
         </ion-header>
-      `);
+      `,
+        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(
+        `
         <ion-header>
           <ion-toolbar color="primary">
             <ion-segment value="a">
@@ -53,23 +57,30 @@ test.describe('segment: toolbar', () => {
             </ion-segment>
           </ion-toolbar>
         </ion-header>
-      `);
+      `,
+        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(
+        `
         <ion-header>
           <ion-toolbar mode="ios" color="primary">
             <ion-segment mode="md" value="a">
@@ -79,11 +90,13 @@ test.describe('segment: toolbar', () => {
             </ion-segment>
           </ion-toolbar>
         </ion-header>
-      `);
+      `,
+        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`));
     });
   });
 });