refactor(elements/ino-carousel): migrate stencil e2e tests to spec te…

…st (#1268)

* migrate and split up tests

* run formatter

* implement PR feedback

* try to fix flakiness

* wait for dom content loaded

* merge master into branch

* get playwright trace

* change trace config

.github/workflows/test.yml

@@ -47,9 +47,16 @@ jobs:
         env:
           NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
       - name: Test all projects
+        id: test_projects
         run: yarn test
         env:
           NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
+      - name: Upload playwright trace
+        if: ${{ failure() && steps.test_projects.conclusion == 'failure' }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-trace
+          path: trace.zip
       - name: Upload build artifacts for canary release
         uses: ./.github/workflows/artifacts-upload
         with:

packages/elements/src/components/ino-carousel/ino-carousel.spec.ts

@@ -0,0 +1,78 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing';
+import { InoCarousel } from './ino-carousel';
+import { InoCarouselSlide } from '../ino-carousel-slide/ino-carousel-slide';
+import { IconButton } from '../ino-icon-button/ino-icon-button';
+import { listenForEvent } from '../../util/test-utils';
+
+const CAROUSEL = 'ino-carousel';
+const LEFT_ARROW_SELECTOR = '.ino-carousel__arrow--left button';
+const RIGHT_ARROW_SELECTOR = '.ino-carousel__arrow--right button';
+
+describe('InoCarousel', () => {
+  let page: SpecPage;
+  let inoCarousel: HTMLInoCarouselElement;
+  let iconArrowRight: HTMLElement;
+  let iconArrowLeft: HTMLElement;
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [InoCarousel, InoCarouselSlide, IconButton],
+      html: `<ino-carousel value="a">
+      <ino-carousel-slide value="a"></ino-carousel-slide>
+      <ino-carousel-slide value="b"></ino-carousel-slide>
+      <ino-carousel-slide value="c"></ino-carousel-slide>
+    </ino-carousel>`,
+    });
+
+    inoCarousel = page.body.querySelector(CAROUSEL);
+    iconArrowLeft = page.body.querySelector(LEFT_ARROW_SELECTOR);
+    iconArrowRight = page.body.querySelector(RIGHT_ARROW_SELECTOR);
+  });
+
+  async function simulateIconClick(icon: 'Left' | 'Right'): Promise<void> {
+    switch (icon) {
+      case 'Left':
+        iconArrowLeft.click();
+        break;
+      case 'Right':
+        iconArrowRight.click();
+        break;
+    }
+    return await page.waitForChanges();
+  }
+
+  it('should slide right upon clicking  right arrow icon', async () => {
+    const { eventSpy, assertEventDetails } = listenForEvent(
+      page,
+      'valueChange',
+    );
+    await simulateIconClick('Right');
+    expect(eventSpy).toHaveBeenCalled();
+    assertEventDetails('b');
+  });
+
+  it('should show first slide in carousel upon clicking right arrow icon if last slide is showing', async () => {
+    const { eventSpy, assertEventDetails } = listenForEvent(
+      page,
+      'valueChange',
+    );
+    inoCarousel.setAttribute('value', 'c');
+    await page.waitForChanges();
+    await simulateIconClick('Right');
+    expect(eventSpy).toHaveBeenCalled();
+    assertEventDetails('a');
+  });
+
+  it('should show last slide in carousel upon clicking left arrow icon if first slide is showing', async () => {
+    const { eventSpy, assertEventDetails } = listenForEvent(
+      page,
+      'valueChange',
+    );
+    inoCarousel.setAttribute('value', 'a');
+    await page.waitForChanges();
+
+    await simulateIconClick('Left');
+    expect(eventSpy).toHaveBeenCalled();
+    assertEventDetails('c');
+  });
+});

packages/storybook/playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
   use: {
     baseURL,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'retain-on-failure',
   },
   expect: {
     timeout: process.env.CI ? 30000 : 10000,

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

@@ -0,0 +1,39 @@
+import { expect, Locator, test } from '@playwright/test';
+import { goToStory, setAttribute } from '../test-utils';
+
+test.describe('ino-carousel', () => {
+  let inoCarousel: Locator;
+  let selectedSlide: Locator;
+
+  test.beforeEach(async ({ page }) => {
+    await goToStory(page, ['Graphic', 'ino-carousel', 'default']);
+    inoCarousel = page.locator('ino-carousel');
+    selectedSlide = inoCarousel.locator('.ino-carousel-slide--selected');
+    await setAttribute(inoCarousel, 'autoplay', 'false');
+  });
+
+  test('should render with default values', async () => {
+    await expect(
+      inoCarousel.locator('.ino-carousel-slide--selected'),
+    ).toBeVisible();
+  });
+
+  test('should hide the buttons if inoHideButtons is set to true', async () => {
+    await expect(inoCarousel.getByRole('button')).toHaveCount(2);
+    await setAttribute(inoCarousel, 'hide-buttons', 'true');
+    await expect(inoCarousel.getByRole('button')).toHaveCount(0);
+  });
+
+  test('should change image on arrow click', async () => {
+    const imageBefore = await selectedSlide.innerHTML();
+    const arrowButtons = inoCarousel.getByRole('button');
+
+    await arrowButtons.first().click(); // click left
+    await expect(selectedSlide).toBeVisible();
+    expect(imageBefore).not.toEqual(await selectedSlide.innerHTML());
+
+    await arrowButtons.last().click(); // click right
+    await expect(selectedSlide).toBeVisible();
+    expect(imageBefore).toEqual(await selectedSlide.innerHTML());
+  });
+});

packages/storybook/src/stories/test-utils.ts

@@ -11,6 +11,7 @@ export async function goToStory(
   await page.goto(
     `/iframe.html?id=${category.toLowerCase()}-${name}--${story}`,
   );
+  await page.waitForLoadState('domcontentloaded');
 }
 
 export function setAttribute(el: Locator, attrName: string, value: string) {