refactor(elements/ino-segment-group): migrate stencil e2e tests to pl…

…aywright (#1374)

Part of #1258 

## Proposed Changes

- migrate tests to playwright
- add spec test to test event api

packages/elements/src/components/ino-segment-button/ino-segment-button.spec.ts

@@ -0,0 +1,43 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { listenForEvent } from '../../util/test-utils';
+import { InoSegmentButton } from './ino-segment-button';
+
+describe('ino-segment-button', () => {
+  let page: SpecPage;
+  let segmentBtn: HTMLInoSegmentButtonElement;
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [InoSegmentButton],
+      html: '<ino-segment-button value="1"></ino-segment-button>',
+    });
+    segmentBtn = page.body.querySelector('ino-segment-button');
+  });
+
+  it('should emit a checkedChange event upon clicking the button', async () => {
+    const { assertEventDetails } = listenForEvent(page, 'checkedChange');
+    segmentBtn.click();
+    await page.waitForChanges();
+    assertEventDetails(true);
+  });
+
+  it('should not emit a checkedChange event if the button is disabled', async () => {
+    const { eventSpy } = listenForEvent(page, 'checkedChange');
+    segmentBtn.setAttribute('disabled', 'true');
+    await page.waitForChanges();
+
+    segmentBtn.click();
+    await page.waitForChanges();
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+
+  it('should not emit a checkedChange event if the button is checked', async () => {
+    const { eventSpy } = listenForEvent(page, 'checkedChange');
+    segmentBtn.setAttribute('checked', 'true');
+    await page.waitForChanges();
+
+    segmentBtn.click();
+    await page.waitForChanges();
+    expect(eventSpy).not.toHaveBeenCalled();
+  });
+});

packages/storybook/src/stories/ino-segment-button/ino-segment-button.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+import { goToStory } from '../test-utils';
+
+test.describe('ino-segment-button', () => {
+  test('should check segment button on click', async ({ page }) => {
+    await goToStory(page, ['Buttons', 'ino-segment-button', 'default']);
+    const button = page.locator('ino-segment-button');
+
+    await expect(button).toHaveAttribute('checked', 'false');
+    await button.click();
+    await expect(button).not.toHaveAttribute('checked', 'false');
+    await button.click();
+    await expect(button).not.toHaveAttribute('checked', 'false');
+  });
+
+  test('should not check disabled segment button on click', async ({
+    page,
+  }) => {
+    await goToStory(page, ['Buttons', 'ino-segment-button', 'disabled']);
+    const button = page.locator('ino-segment-button');
+
+    await expect(button).toHaveAttribute('checked', 'false');
+    await button.click();
+    await expect(button).toHaveAttribute('checked', 'false');
+  });
+
+  test('should render dense segment button', async ({ page }) => {
+    const button = page.locator('ino-segment-button');
+
+    await goToStory(page, ['Buttons', 'ino-segment-button', 'default']);
+    const bBox = await button.boundingBox();
+    await goToStory(page, ['Buttons', 'ino-segment-button', 'dense']);
+    const bBoxDense = await button.boundingBox();
+
+    expect(bBoxDense.width).toBeLessThan(bBox.width);
+    expect(bBoxDense.height).toBeLessThan(bBox.height);
+  });
+});

packages/storybook/src/stories/ino-segment-group/ino-segment-group.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+import { goToStory } from '../test-utils';
+
+test.describe('ino-segment-group', () => {
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Buttons', 'ino-segment-group', 'default']);
+  });
+
+  test('should have three segment buttons in group', async ({ page }) => {
+    const group = page.locator('ino-segment-group');
+    const buttons = group.locator('ino-segment-button');
+
+    await expect(group).toBeVisible();
+    await expect(group).toHaveAttribute('value', 'opt-2');
+    await expect(buttons).toHaveCount(4);
+  });
+
+  test('should click on button to change value', async ({ page }) => {
+    const group = page.locator('ino-segment-group');
+    const buttons = group.locator('ino-segment-button');
+
+    await expect(group).toHaveAttribute('value', 'opt-2');
+    await buttons.nth(0).click();
+    await expect(group).toHaveAttribute('value', 'opt-1');
+    await buttons.nth(1).click();
+    await expect(group).toHaveAttribute('value', 'opt-2');
+    await buttons.nth(2).click();
+    await expect(group).toHaveAttribute('value', 'opt-3');
+    await buttons.nth(3).click();
+    await expect(group).toHaveAttribute('value', 'opt-4');
+  });
+});