refactor(elements/ino-option): migrate stencil e2e tests to playwright (

#1333)

* migrate tests to playwright

* migrate ino-option-group tests to playwright

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

@@ -0,0 +1,21 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory } from '../test-utils';
+
+test.describe('ino-option-group', () => {
+  let inoOptionGroup: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-option-group', 'default']);
+    inoOptionGroup = page.locator('ino-option-group');
+  });
+
+  test('should be select an option', async () => {
+    await expect(inoOptionGroup).toHaveCount(2);
+    const firstGroup = inoOptionGroup.first();
+    const inoOptions = firstGroup.locator('ino-option');
+    await expect(inoOptions).toHaveCount(4);
+    await expect(inoOptions.first()).toHaveText(
+      await firstGroup.getAttribute('label'),
+    );
+  });
+});

packages/storybook/src/stories/ino-option/ino-option.spec.ts

@@ -0,0 +1,37 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-option', () => {
+  let inoOption: Locator;
+  let inoSelect: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-option', 'default']);
+    inoOption = page.locator('ino-option');
+    inoSelect = page.locator('ino-select');
+  });
+
+  test('should be select an option', async () => {
+    await inoSelect.click();
+    await inoOption.click();
+    await expect(inoSelect.locator('.mdc-select__selected-text')).toHaveText(
+      await inoOption.textContent(),
+    );
+  });
+
+  test('should be disabled', async () => {
+    await setAttribute(inoOption, 'disabled', 'true');
+    await inoSelect.click();
+    await inoOption.click();
+    await expect(
+      inoSelect.locator('.mdc-select__selected-text'),
+    ).not.toHaveText(await inoOption.textContent());
+  });
+
+  test('should be selected', async ({ page }) => {
+    await goToStory(page, ['Input', 'ino-option', 'selected-option']);
+    await expect(inoSelect.locator('.mdc-select__selected-text')).toHaveText(
+      await inoOption.textContent(),
+    );
+  });
+});