test(table): add screenshot tests using reusable test code

packages/core/src/components/table/table/test/batch/table.e2e.ts

@@ -1,27 +1,43 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/batch/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-batch';
 
-test.describe.parallel('tds-table-batch', () => {
-  test('renders batch table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders batch table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table has a settings button', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table has a settings button', async ({ page }) => {
     const tdsTableToolbarSettings = page.getByRole('img');
     await expect(tdsTableToolbarSettings).toHaveCount(1);
     await expect(tdsTableToolbarSettings).toBeVisible();
   });
 
   test('table has a [Download] button', async ({ page }) => {
-    await page.goto(componentTestPath);
     const tdsTableToolbarDownloadButton = page.getByRole('button', { name: /Download/ });
     await expect(tdsTableToolbarDownloadButton).toHaveCount(1);
     await expect(tdsTableToolbarDownloadButton).toBeVisible();

packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts

@@ -1,23 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering fill';
 
-test.describe.parallel('tds-table-column-filtering fill', () => {
-  test('expect slotted inputs to persist inputed value', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
-    await inputfield.fill('Hello World!');
+    test('expect slotted inputs to persist inputed value', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
+      await inputfield.fill('Hello World!');
 
-    await inputfield.blur();
+      await inputfield.blur();
 
-    let value = await inputfield.inputValue();
+      let value = await inputfield.inputValue();
 
-    expect(value).toBe('Hello World!');
+      expect(value).toBe('Hello World!');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });

packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts

@@ -1,24 +1,38 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering focus';
 
-test.describe.parallel('tds-table-column-filtering focus', () => {
-  test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
+    test('expect wrapper to effect slotted inputs style on focus', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
 
-    await inputfield.focus();
+      await inputfield.focus();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      // only check the color if no mode variant or mode is set:
+      if (!config) {
+        const color = await inputfield.evaluate((el) => {
+          return window.getComputedStyle(el).getPropertyValue('background-color');
+        });
 
-    expect(color).toBe('rgb(255, 255, 255)'); // white
+        expect(color).toBe('rgb(255, 255, 255)'); // white
+      }
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });

packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts

@@ -1,30 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering hover';
 
-test.describe.parallel('tds-table-column-filtering hover', () => {
-  test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstHeaderInput');
+    test('expect wrapper to effect slotted inputs style on hover', async ({ page }) => {
+      const inputfield = page.getByTestId('firstHeaderInput');
 
-    await inputfield.hover();
+      await inputfield.hover();
 
-    const color = await inputfield.evaluate((el) => {
-      return window.getComputedStyle(el).getPropertyValue('background-color');
-    });
+      const color = await inputfield.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('background-color');
+      });
 
-    expect(color).toBe('rgba(0, 0, 0, 0)');
+      expect(color).toBe('rgba(0, 0, 0, 0)');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
+});
 
-  test('expect slotted input to show search icon on hover', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('expect slotted input to show search icon on hover', async ({ page }) => {
     const inputfield = page.getByTestId('firstHeaderInput');
 
     await inputfield.hover();

packages/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts

@@ -1,16 +1,28 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath =
   'src/components/table/table/test/column-filtering/header-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-column-filtering';
 
-test.describe.parallel('tds-table-column-filtering', () => {
-  test('renders table with editable header cell correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    test('renders table with editable header cell correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
+
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });

packages/core/src/components/table/table/test/default/table.e2e.ts

@@ -1,27 +1,42 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/default/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-default';
 
-test.describe.parallel('tds-table-default', () => {
-  test('renders default table correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tableComponent = page.getByRole('table');
-    await expect(tableComponent).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default table correctly', async ({ page }) => {
+      const tableComponent = page.getByRole('table');
+      await expect(tableComponent).toHaveCount(1);
 
-    /** Check screenshot diff */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /** Check screenshot diff */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('table has four columns', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('table has four columns', async ({ page }) => {
     const tableHeaderCells = page.locator('tds-header-cell');
     await expect(tableHeaderCells).toHaveCount(4);
   });
 
   test('columns are: Truck type, Driver name, Country, Mileage', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Expect each header to be visible */
     await expect(page.getByText('Truck type')).toBeVisible();
     await expect(page.getByText('Driver name')).toBeVisible();
@@ -30,16 +45,12 @@ test.describe.parallel('tds-table-default', () => {
   });
 
   test('Row should contain the correct number of rows with', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Expect the number of rows to be correct amount */
     const tableBodyRows = page.locator('tds-table-body-row');
     await expect(tableBodyRows).toHaveCount(6);
   });
 
   test('table has the correct text inside each cell', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     /* Checks all rows to see that they have the correct amount of tds-body-cells with values provided */
     const promises = [];
     for (let i = 1; i <= 8; i++) {

packages/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts

@@ -1,22 +1,33 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/table/table/test/editing/body-input-wrapper/index.html';
+const componentName = 'tds-table';
+const testDescription = 'tds-table-editable-cells fill';
 
-test.describe.parallel('tds-table-editable-cells fill', () => {
-  test('expect slotted inputs to persist inputed value', async ({ page }) => {
-    await page.goto(componentTestPath);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    const inputfield = page.getByTestId('firstInput');
-    await inputfield.fill('Hello World!');
+    test('expect slotted inputs to persist inputed value', async ({ page }) => {
+      const inputfield = page.getByTestId('firstInput');
+      await inputfield.fill('Hello World!');
 
-    await inputfield.blur();
+      await inputfield.blur();
 
-    let value = await inputfield.inputValue();
+      let value = await inputfield.inputValue();
 
-    expect(value).toBe('Hello World!');
+      expect(value).toBe('Hello World!');
 
-    /* Check diff of screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+      /* Check diff of screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0.01 });
+    });
   });
 });