migrate ino-segment-button tests

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