refactor(elements/ino-card): migrate stencil e2e tests to spec test (#…

…1261) * migrate e2e tests to spec tests * run formatter * implement pr feedback * fix format * implement PR feedback
inovex · Mar 1, 2024 · 968c154 · 968c154
1 parent 7b24065
commit 968c154
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 51 deletions.
diff --git a/packages/elements/src/components/ino-card/ino-card.e2e.ts b/packages/elements/src/components/ino-card/ino-card.e2e.ts
diff --git a/packages/elements/src/components/ino-card/ino-card.spec.ts b/packages/elements/src/components/ino-card/ino-card.spec.ts
@@ -0,0 +1,28 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { Card } from './ino-card';
+import { listenForEvent } from '../../util/test-utils';
+
+const INO_CARD = `<ino-card></ino-card>`;
+const CARD_SELECTOR = 'ino-card';
+
+describe('InoCard', () => {
+  let page: SpecPage;
+  let card: HTMLInoCardElement;
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [Card],
+      html: INO_CARD,
+    });
+    card = page.body.querySelector(CARD_SELECTOR);
+  });
+
+  it('should emit a clickEl event upon interacting with the card', async () => {
+    const { eventSpy } = listenForEvent(page, 'click');
+
+    card.click();
+    await page.waitForChanges();
+
+    expect(eventSpy).toHaveBeenCalled();
+  });
+});
diff --git a/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts b/packages/storybook/src/stories/ino-accordion/ino-accordion.spec.ts
@@ -9,7 +9,7 @@ test.describe('ino-accordion', () => {
   });
 
   test('can be expanded properly', async ({ page }) => {
-    await goToStory(page, ['structure', 'ino-accordion', 'default']);
+    await goToStory(page, ['Structure', 'ino-accordion', 'default']);
 
     const title = page.getByText('Accordion Title');
     const text = page.getByText('Lorem ipsum dolor sit amet');

diff --git a/packages/storybook/src/stories/ino-button/ino-button.spec.ts b/packages/storybook/src/stories/ino-button/ino-button.spec.ts
@@ -5,7 +5,7 @@ test.describe('ino-button', () => {
   let inoButton: Locator;
 
   test.beforeEach(async ({ page }) => {
-    await goToStory(page, ['buttons', 'ino-button', 'default']);
+    await goToStory(page, ['Buttons', 'ino-button', 'default']);
     inoButton = page.locator('ino-button');
   });
 

diff --git a/packages/storybook/src/stories/ino-card/ino-card.spec.ts b/packages/storybook/src/stories/ino-card/ino-card.spec.ts
@@ -0,0 +1,17 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-card', () => {
+  let inoCard: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Structure', 'ino-card', 'default']);
+    inoCard = page.locator('ino-card');
+  });
+
+  test('should render with check mark if selected', async () => {
+    await setAttribute(inoCard, 'selected', 'true');
+    const check_mark = inoCard.locator('.ino-card__checkmark');
+    await expect(check_mark).toBeVisible();
+  });
+});
diff --git a/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts b/packages/storybook/src/stories/ino-checkbox/ino-checkbox.spec.ts
@@ -9,7 +9,7 @@ test.describe('ino-checkbox', () => {
   });
 
   test('can be toggled properly', async ({ page }) => {
-    await goToStory(page, ['input', 'ino-checkbox', 'default']);
+    await goToStory(page, ['Input', 'ino-checkbox', 'default']);
 
     await expect(checkbox).toBeChecked();
 
@@ -19,7 +19,7 @@ test.describe('ino-checkbox', () => {
   });
 
   test('disabling prevents a change of checked', async ({ page }) => {
-    await goToStory(page, ['input', 'ino-checkbox', 'disabled']);
+    await goToStory(page, ['Input', 'ino-checkbox', 'disabled']);
 
     await expect(checkbox).toBeChecked();
     await expect(checkbox).toBeDisabled();

diff --git a/packages/storybook/src/stories/test-utils.ts b/packages/storybook/src/stories/test-utils.ts
@@ -1,14 +1,16 @@
 import { Locator, Page } from '@playwright/test';
 
-type StoryDescription = [string, string, string]; // ['input', 'ino-checkbox', 'default']
+type StoryDescription = [StoryCategory, string, string]; // ['input', 'ino-checkbox', 'default']
 
 export async function goToStory(
   page: Page,
   storyDescription: StoryDescription,
 ) {
   const [category, name, story] = storyDescription;
 
-  await page.goto(`/iframe.html?id=${category}-${name}--${story}`);
+  await page.goto(
+    `/iframe.html?id=${category.toLowerCase()}-${name}--${story}`,
+  );
 }
 
 export function setAttribute(el: Locator, attrName: string, value: string) {

diff --git a/packages/storybook/src/types/storyCategory.d.ts b/packages/storybook/src/types/storyCategory.d.ts
@@ -0,0 +1,6 @@
+declare type StoryCategory =
+  | 'Structure'
+  | 'Input'
+  | 'Graphic'
+  | 'Buttons'
+  | 'Notification';