test(dark-light-modes): reusable test code

packages/core/src/components/accordion/test/basic/accordion.e2e.ts

@@ -1,26 +1,53 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/basic/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders basic accordion correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders basic accordion correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
+
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('second accordion item opens on click', async ({ page }) => {
+      // Define selector for second accordion item
+      const accordionSecondItem = page.getByText('Second item');
+
+      // Hover second accordion item
+      await accordionSecondItem.click();
+
+      // Check screenshot diff to make sure the second accordion item is open
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should handle hover on accordion items', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Hover first accordion item
@@ -40,25 +67,11 @@ test.describe.parallel('tds-accordion', () => {
     await expect(accordionSecondItem).toHaveCSS('cursor', 'pointer');
   });
 
-  test('second accordion item opens on click', async ({ page }) => {
-    // Define selector for second accordion item
-    await page.goto(componentTestPath);
-    const accordionSecondItem = page.getByText('Second item');
-
-    // Hover second accordion item
-    await accordionSecondItem.click();
-
-    // Check screenshot diff to make sure the second accordion item is open
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('fires tdsToggle event on click', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByText('Second item');
 
     // Click first accordion item

packages/core/src/components/accordion/test/disabled/accordion.e2e.ts

@@ -1,33 +1,48 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/disabled/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders disabled accordion correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders disabled accordion correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
+
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('disabled accordion items should be displayed', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.locator(accordionSelector + '>> text=First item');
 
     // Expect first accordion item to be disabled
     await expect(accordionFirstItem).toBeDisabled();
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByTestId('second-item');
 
     // Define selector for second accordion item button since
@@ -40,7 +55,6 @@ test.describe.parallel('tds-accordion', () => {
 
   test('cursor should be not-allowed on disabled accordion items', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByTestId('first-item');
     const accordionFirstItemButton = accordionFirstItem.getByRole('button');
 
@@ -53,7 +67,6 @@ test.describe.parallel('tds-accordion', () => {
     await expect(accordionCursorFirstItem).toBe('not-allowed');
 
     // Define selector for second accordion item
-    await page.goto(componentTestPath);
     const accordionSecondItem = page.getByTestId('second-item');
     const accordionSecondItemButton = accordionSecondItem.getByRole('button');
 
@@ -68,7 +81,6 @@ test.describe.parallel('tds-accordion', () => {
 
   test('does not fire tdsToggle event on click on disabled accordion', async ({ page }) => {
     // Define selector for first accordion item
-    await page.goto(componentTestPath);
     const accordionFirstItem = page.getByText('First item');
 
     // Click first accordion item

packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts

@@ -1,20 +1,31 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/accordion/test/hide-last-border/index.html';
 const accordionSelector = 'tds-accordion';
+const componentName = 'tds-accordion';
 
-test.describe.parallel('tds-accordion', () => {
-  test('renders accordion with hidden last border correctly', async ({ page }) => {
-    // Define selector for accordion
-    await page.goto(componentTestPath);
-    const accordion = page.locator(accordionSelector);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    // Check if accordion contains the correct text
-    await expect(accordion).toContainText('First item');
-    await expect(accordion).toContainText('Second item');
+    test('renders accordion with hidden last border correctly', async ({ page }) => {
+      // Define selector for accordion
+      const accordion = page.locator(accordionSelector);
 
-    // Check screenshot diff to make sure the accordion is rendered correctly
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      // Check if accordion contains the correct text
+      await expect(accordion).toContainText('First item');
+      await expect(accordion).toContainText('Second item');
+
+      // Check screenshot diff to make sure the accordion is rendered correctly
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });

packages/core/src/components/banner/test/default/lightmode/banner.e2e.ts → packages/core/src/components/banner/test/default/banner.e2e.ts

@@ -1,18 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/default/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-default';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
 
-const componentTestPath = 'src/components/banner/test/default/lightmode/index.html';
-
-test.describe.parallel('tds-banner-default-lightmode', () => {
+test.describe.parallel(componentName, () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
   });
 
-  test('renders default banner correctly', async ({ page }) => {
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
   test('header exists', async ({ page }) => {
     const bannerHeader = page.getByText('This is a header text area', { exact: true });
     await expect(bannerHeader).toBeVisible();

packages/core/src/components/banner/test/error/banner.e2e.ts

@@ -0,0 +1,35 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/error/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-error';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders error banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('icons exists', async ({ page }) => {
+    const images = page.getByRole('img');
+    await expect(images).toHaveCount(2);
+  });
+});

packages/core/src/components/banner/test/information/banner.e2e.ts

@@ -0,0 +1,29 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  getTestDescribeText,
+  setupPage,
+  testConfigurations,
+} from '../../../../utils/testConfiguration';
+
+const componentTestPath = 'src/components/banner/test/information/index.html';
+const componentName = 'tds-banner';
+const testDescription = 'tds-banner-information';
+
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders information banner correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('icons exists', async ({ page }) => {
+      const images = page.getByRole('img');
+      await expect(images).toHaveCount(2);
+    });
+  });
+});