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

scania-digital-design-system · Jan 17, 2025 · a9db16b · a9db16b
1 parent be391f7
commit a9db16b
Show file tree

Hide file tree

Showing 199 changed files with 763 additions and 391 deletions.
diff --git a/packages/core/src/components/table/table/test/batch/table.e2e.ts b/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();

diff --git a/...hots/tds-table-batch-primary-darkmode-renders-batch-table-correctly-1-linux.png b/...hots/tds-table-batch-primary-darkmode-renders-batch-table-correctly-1-linux.png
diff --git a/...ots/tds-table-batch-primary-lightmode-renders-batch-table-correctly-1-linux.png b/...ots/tds-table-batch-primary-lightmode-renders-batch-table-correctly-1-linux.png
diff --git a/...able.e2e.ts-snapshots/tds-table-batch-renders-batch-table-correctly-1-linux.png b/...able.e2e.ts-snapshots/tds-table-batch-renders-batch-table-correctly-1-linux.png
diff --git a/...ts/tds-table-batch-secondary-darkmode-renders-batch-table-correctly-1-linux.png b/...ts/tds-table-batch-secondary-darkmode-renders-batch-table-correctly-1-linux.png
diff --git a/...s/tds-table-batch-secondary-lightmode-renders-batch-table-correctly-1-linux.png b/...s/tds-table-batch-secondary-lightmode-renders-batch-table-correctly-1-linux.png
diff --git a/...components/table/table/test/column-filtering/header-input-wrapper/interaction-fill.e2e.ts b/...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 });
+    });
   });
 });
diff --git a/...olumn-filtering-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...olumn-filtering-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...ill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...ill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...ll-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...ll-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...l-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...l-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...omponents/table/table/test/column-filtering/header-input-wrapper/interaction-focus.e2e.ts b/...omponents/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 });
+    });
   });
 });
diff --git a/...tering-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/...tering-focus-expect-wrapper-to-effect-slotted-inputs-style-on-focus-1-linux.png
diff --git a/...s-primary-darkm-ab933-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/...s-primary-darkm-ab933-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
diff --git a/...s-primary-light-43327-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/...s-primary-light-43327-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
diff --git a/...s-secondary-dar-76991-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/...s-secondary-dar-76991-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
diff --git a/...s-secondary-lig-76aa6-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png b/...s-secondary-lig-76aa6-apper-to-effect-slotted-inputs-style-on-focus-1-linux.png
diff --git a/...omponents/table/table/test/column-filtering/header-input-wrapper/interaction-hover.e2e.ts b/...omponents/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();

diff --git a/...tering-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/...tering-hover-expect-wrapper-to-effect-slotted-inputs-style-on-hover-1-linux.png
diff --git a/...r-primary-darkm-1683d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/...r-primary-darkm-1683d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
diff --git a/...r-primary-light-7b6df-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/...r-primary-light-7b6df-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
diff --git a/...r-secondary-dar-03d45-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/...r-secondary-dar-03d45-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
diff --git a/...r-secondary-lig-9096d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png b/...r-secondary-lig-9096d-apper-to-effect-slotted-inputs-style-on-hover-1-linux.png
diff --git a/...s/core/src/components/table/table/test/column-filtering/header-input-wrapper/table.e2e.ts b/...s/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 });
+    });
   });
 });
diff --git a/...-primary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/...-primary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png
diff --git a/...primary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/...primary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png
diff --git a/...-column-filtering-renders-table-with-editable-header-cell-correctly-1-linux.png b/...-column-filtering-renders-table-with-editable-header-cell-correctly-1-linux.png
diff --git a/...econdary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/...econdary-darkmode-renders-table-with-editable-header-cell-correctly-1-linux.png
diff --git a/...condary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png b/...condary-lightmode-renders-table-with-editable-header-cell-correctly-1-linux.png
diff --git a/packages/core/src/components/table/table/test/default/table.e2e.ts b/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++) {

diff --git a/.../tds-table-default-primary-darkmode-renders-default-table-correctly-1-linux.png b/.../tds-table-default-primary-darkmode-renders-default-table-correctly-1-linux.png
diff --git a/...tds-table-default-primary-lightmode-renders-default-table-correctly-1-linux.png b/...tds-table-default-primary-lightmode-renders-default-table-correctly-1-linux.png
diff --git a/....e2e.ts-snapshots/tds-table-default-renders-default-table-correctly-1-linux.png b/....e2e.ts-snapshots/tds-table-default-renders-default-table-correctly-1-linux.png
diff --git a/...ds-table-default-secondary-darkmode-renders-default-table-correctly-1-linux.png b/...ds-table-default-secondary-darkmode-renders-default-table-correctly-1-linux.png
diff --git a/...s-table-default-secondary-lightmode-renders-default-table-correctly-1-linux.png b/...s-table-default-secondary-lightmode-renders-default-table-correctly-1-linux.png
diff --git a/...s/core/src/components/table/table/test/editing/body-input-wrapper/interaction-fill.e2e.ts b/...s/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 });
+    });
   });
 });
diff --git a/...-editable-cells-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...-editable-cells-fill-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...ill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...ill-primary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...ll-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...ll-primary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...l-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...l-secondary-darkmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png
diff --git a/...-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png b/...-secondary-lightmode-expect-slotted-inputs-to-persist-inputed-value-1-linux.png