test(text-field): add screenshot tests using reusable test code (#956)

scania-digital-design-system · Jan 20, 2025 · e1152b3 · e1152b3
1 parent e3b69e6
commit e1152b3
Show file tree

Hide file tree

Showing 32 changed files with 169 additions and 63 deletions.
diff --git a/packages/core/src/components/text-field/test/default/text-field.e2e.ts b/packages/core/src/components/text-field/test/default/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/default/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - default state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - default state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders default text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders default text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have type "text"', async ({ page }) => {

diff --git a/...default-state-primary-darkmode-renders-default-text-field-correctly-1-linux.png b/...default-state-primary-darkmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...efault-state-primary-lightmode-renders-default-text-field-correctly-1-linux.png b/...efault-state-primary-lightmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...fault-state-secondary-darkmode-renders-default-text-field-correctly-1-linux.png b/...fault-state-secondary-darkmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...ault-state-secondary-lightmode-renders-default-text-field-correctly-1-linux.png b/...ault-state-secondary-lightmode-renders-default-text-field-correctly-1-linux.png
diff --git a/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts b/packages/core/src/components/text-field/test/disabled/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/disabled/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - default state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - default state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders disabled text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders disabled text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have disabled attribute', async ({ page }) => {

diff --git a/...efault-state-primary-darkmode-renders-disabled-text-field-correctly-1-linux.png b/...efault-state-primary-darkmode-renders-disabled-text-field-correctly-1-linux.png
diff --git a/...-default-text-field-correctly-1-linux.png → ...disabled-text-field-correctly-1-linux.png b/...-default-text-field-correctly-1-linux.png → ...disabled-text-field-correctly-1-linux.png
diff --git a/...ault-state-secondary-darkmode-renders-disabled-text-field-correctly-1-linux.png b/...ault-state-secondary-darkmode-renders-disabled-text-field-correctly-1-linux.png
diff --git a/...ult-state-secondary-lightmode-renders-disabled-text-field-correctly-1-linux.png b/...ult-state-secondary-lightmode-renders-disabled-text-field-correctly-1-linux.png
diff --git a/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts b/packages/core/src/components/text-field/test/password-error/text-field.e2e.ts
@@ -1,22 +1,58 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/password-error/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - password type with error state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - password type with error state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders default text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders default text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('should handle hover, click, and input on text field', async ({ page }) => {
+      // Define the selector for the text field input
+      const textFieldInputSelector = 'tds-text-field input';
+
+      // Hover over the text field
+      await page.hover(textFieldInputSelector);
+
+      // Click on the text field to activate it
+      await page.click(textFieldInputSelector);
+
+      // Type 'Test text' into the text field
+      await page.fill(textFieldInputSelector, 'Test');
+
+      // Verify the text field contains the inputted text
+      const value = await page.inputValue(textFieldInputSelector);
+      expect(value).toBe('Test');
+
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have state "error"', async ({ page }) => {
@@ -48,25 +84,4 @@ test.describe.parallel('TdsTextField - password type with error state', () => {
     const textFieldLabelSelector = page.locator('div >> text="Label"');
     await expect(textFieldLabelSelector).toHaveCount(1);
   });
-
-  test('should handle hover, click, and input on text field', async ({ page }) => {
-    // Define the selector for the text field input
-    const textFieldInputSelector = 'tds-text-field input';
-
-    // Hover over the text field
-    await page.hover(textFieldInputSelector);
-
-    // Click on the text field to activate it
-    await page.click(textFieldInputSelector);
-
-    // Type 'Test text' into the text field
-    await page.fill(textFieldInputSelector, 'Test');
-
-    // Verify the text field contains the inputted text
-    const value = await page.inputValue(textFieldInputSelector);
-    expect(value).toBe('Test');
-
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
 });
diff --git a/...disabled-text-field-correctly-1-linux.png → ...click-and-input-on-text-field-1-linux.png b/...disabled-text-field-correctly-1-linux.png → ...click-and-input-on-text-field-1-linux.png
diff --git a/...with-error-state--12676--handle-hover-click-and-input-on-text-field-1-linux.png b/...with-error-state--12676--handle-hover-click-and-input-on-text-field-1-linux.png
diff --git a/...th-error-state--30745-darkmode-renders-default-text-field-correctly-1-linux.png b/...th-error-state--30745-darkmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...th-error-state--77a59-darkmode-renders-default-text-field-correctly-1-linux.png b/...th-error-state--77a59-darkmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...th-error-state--9a284-ightmode-renders-default-text-field-correctly-1-linux.png b/...th-error-state--9a284-ightmode-renders-default-text-field-correctly-1-linux.png
diff --git a/...click-and-input-on-text-field-1-linux.png → ...click-and-input-on-text-field-1-linux.png b/...click-and-input-on-text-field-1-linux.png → ...click-and-input-on-text-field-1-linux.png
diff --git a/...with-error-state--b4450--handle-hover-click-and-input-on-text-field-1-linux.png b/...with-error-state--b4450--handle-hover-click-and-input-on-text-field-1-linux.png
diff --git a/...th-error-state--bcdcf-ightmode-renders-default-text-field-correctly-1-linux.png b/...th-error-state--bcdcf-ightmode-renders-default-text-field-correctly-1-linux.png
diff --git a/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts b/packages/core/src/components/text-field/test/read-only-success/text-field.e2e.ts
@@ -1,22 +1,37 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 // Defined once for reuse
 const componentTestPath = 'src/components/text-field/test/read-only-success/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - read-only success state';
+
 const textFieldSelector = 'tds-text-field';
 
-test.describe.parallel('TdsTextField - read-only success state', () => {
-  test.beforeEach(async ({ page }) => {
-    // Navigate to the component test page before each test
-    await page.goto(componentTestPath);
-  });
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-  test('renders readonly success state of text-field correctly', async ({ page }) => {
-    const textField = page.locator(textFieldSelector);
-    await expect(textField).toHaveCount(1);
+    test('renders readonly success state of text-field correctly', async ({ page }) => {
+      const textField = page.locator(textFieldSelector);
+      await expect(textField).toHaveCount(1);
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('should have state "success"', async ({ page }) => {

diff --git a/...s-state-primary-18797-eadonly-success-state-of-text-field-correctly-1-linux.png b/...s-state-primary-18797-eadonly-success-state-of-text-field-correctly-1-linux.png
diff --git a/...s-state-primary-7fe16-eadonly-success-state-of-text-field-correctly-1-linux.png b/...s-state-primary-7fe16-eadonly-success-state-of-text-field-correctly-1-linux.png
diff --git a/...uccess-state-renders-readonly-success-state-of-text-field-correctly-1-linux.png b/...uccess-state-renders-readonly-success-state-of-text-field-correctly-1-linux.png
diff --git a/...-default-text-field-correctly-1-linux.png → ...state-of-text-field-correctly-1-linux.png b/...-default-text-field-correctly-1-linux.png → ...state-of-text-field-correctly-1-linux.png
diff --git a/...s-state-seconda-6d9f4-eadonly-success-state-of-text-field-correctly-1-linux.png b/...s-state-seconda-6d9f4-eadonly-success-state-of-text-field-correctly-1-linux.png
diff --git a/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts b/packages/core/src/components/text-field/test/read-only-with-suffix/text-field.e2e.ts
@@ -2,10 +2,14 @@ import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
 const componentTestPath = 'src/components/text-field/test/read-only-with-suffix/index.html';
+const testDescription = 'TdsTextField - readOnly prop effect';
 
-test.describe('TdsTextField - readOnly prop effect', () => {
-  test('should hide the suffix icon when readOnly is true', async ({ page }) => {
+test.describe.parallel(testDescription, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('should hide the suffix icon when readOnly is true', async ({ page }) => {
     const suffixIcon = await page.locator('.text-field-slot-wrap-suffix');
     await expect(suffixIcon).toBeHidden();
   });

diff --git a/packages/core/src/components/text-field/test/with-helper-text/index.html b/packages/core/src/components/text-field/test/with-helper-text/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Field - With helper text</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body>
+    <tds-text-field placeholder="Placeholder" helper="Helper text"></tds-text-field>
+  </body>
+</html>
diff --git a/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts b/packages/core/src/components/text-field/test/with-helper-text/text-field.e2e.ts
@@ -0,0 +1,25 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
+
+// Defined once for reuse
+const componentTestPath = 'src/components/text-field/test/with-helper-text/index.html';
+const componentName = 'tds-text-field';
+const testDescription = 'TdsTextField - with helper text';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders text-field with helper text', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+  });
+});
diff --git a/...th-helper-text-primary-darkmode-renders-text-field-with-helper-text-1-linux.png b/...th-helper-text-primary-darkmode-renders-text-field-with-helper-text-1-linux.png
diff --git a/...h-helper-text-primary-lightmode-renders-text-field-with-helper-text-1-linux.png b/...h-helper-text-primary-lightmode-renders-text-field-with-helper-text-1-linux.png
diff --git a/...-helper-text-secondary-darkmode-renders-text-field-with-helper-text-1-linux.png b/...-helper-text-secondary-darkmode-renders-text-field-with-helper-text-1-linux.png
diff --git a/...helper-text-secondary-lightmode-renders-text-field-with-helper-text-1-linux.png b/...helper-text-secondary-lightmode-renders-text-field-with-helper-text-1-linux.png