test(text-field): add test with helper text

scania-digital-design-system · Dec 20, 2024 · 83691c4 · 83691c4
1 parent 802f24e
commit 83691c4
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 0 deletions.
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,25 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Text Field - Read Only with Suffix</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
+      type="text"
+      size="lg"
+      state="default"
+      label="Label"
+      label-position="no label"
+      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/...TdsTextField---with-helper-text-renders-text-field-with-helper-text-1-linux.png b/...TdsTextField---with-helper-text-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