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

Code before:
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="paid">Paid</ion-segment-content>
          <ion-segment-content id="free">Free</ion-segment-content>
          <ion-segment-content id="top">Top</ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      await page
        .locator('ion-segment-view')
        .evaluate(
          (segmentView: HTMLIonSegmentViewElement) => !segmentView.classList.contains('segment-view-scroll-disabled')
        );

      await page.waitForChanges();

      await page.locator('ion-segment-content[id="top"]').scrollIntoViewIfNeeded();

      const segmentButton = page.locator('ion-segment-button[value="top"]');
      await expect(segmentButton).toHaveClass(/segment-button-checked/);
    });

    test('should set correct segment button as checked and show correct content when programmatically setting the segment vale', async ({
      page,
    }) => {
      await page.setContent(
        `
        <ion-segment value="free">
          <ion-segment-button content-id="paid" value="paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button content-id="free" value="free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button content-id="top" value="top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="paid">Paid</ion-segment-content>
          <ion-segment-content id="free">Free</ion-segment-content>
          <ion-segment-content id="top">Top</ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      await page

Review comment (suggestion):
```suggestion
    test('should set correct segment button as checked and show correct content when programmatically setting the segment value', async ({
```

Code after:
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="paid">Paid</ion-segment-content>
          <ion-segment-content id="free">Free</ion-segment-content>
          <ion-segment-content id="top">Top</ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      await page
        .locator('ion-segment-view')
        .evaluate(
          (segmentView: HTMLIonSegmentViewElement) => !segmentView.classList.contains('segment-view-scroll-disabled')
        );

      await page.waitForChanges();

      await page.locator('ion-segment-content[id="top"]').scrollIntoViewIfNeeded();

      const segmentButton = page.locator('ion-segment-button[value="top"]');
      await expect(segmentButton).toHaveClass(/segment-button-checked/);
    });

    test('should set correct segment button as checked and show correct content when programmatically setting the segment value', async ({
      page,
    }) => {
      await page.setContent(
        `
        <ion-segment value="free">
          <ion-segment-button content-id="paid" value="paid">
            <ion-label>Paid</ion-label>
          </ion-segment-button>
          <ion-segment-button content-id="free" value="free">
            <ion-label>Free</ion-label>
          </ion-segment-button>
          <ion-segment-button content-id="top" value="top">
            <ion-label>Top</ion-label>
          </ion-segment-button>
        </ion-segment>
        <ion-segment-view>
          <ion-segment-content id="paid">Paid</ion-segment-content>
          <ion-segment-content id="free">Free</ion-segment-content>
          <ion-segment-content id="top">Top</ion-segment-content>
        </ion-segment-view>
      `,
        config
      );

      await page