Repository: ionic-team/ionic-framework
File: core/src/components/segment/test/segment-events.e2e.ts (TypeScript)

Code before:
          <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.describe('should not emit', () => {
    test('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 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('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>

Review comment (suggestion):
Optional: Might be good to make this more descriptive, something like "should not emit on button click." The descriptions here are very similar to the ones for dragging above, so it's a bit confusing at a glance.

Code after:
          </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>