test(text-field): move non-screenshot tests to not run for all style …

…configurations
scania-digital-design-system · Jan 14, 2025 · c8180c4 · c8180c4
1 parent 6b11c6c
commit c8180c4
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 152 deletions.
diff --git a/...2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png b/...2e.ts-snapshots/tds-footer-default-renders-default-footer-correctly-1-linux.png
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
@@ -26,84 +26,90 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff on screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('should have type "text"', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('type', 'text');
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    test('should have size "lg"', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('size', 'lg');
-    });
+  test('should have type "text"', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('type', 'text');
+  });
 
-    test('should have correct height', async ({ page }) => {
-      const height = await page.evaluate((textField) => {
-        const element = document.querySelector(textField);
-        return element.getBoundingClientRect().height;
-      }, 'tds-text-field');
-      expect(height).toBe(56);
-    });
+  test('should have size "lg"', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('size', 'lg');
+  });
 
-    test('should not render label in "no-label" state', async ({ page }) => {
-      const textFieldLabelSelector = page.locator('tds-text-field label');
-      await expect(textFieldLabelSelector).toHaveCount(0);
-    });
+  test('should have correct height', async ({ page }) => {
+    const height = await page.evaluate((textField) => {
+      const element = document.querySelector(textField);
+      return element.getBoundingClientRect().height;
+    }, 'tds-text-field');
+    expect(height).toBe(56);
+  });
 
-    test('should have correct placeholder', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('placeholder', 'Placeholder');
-    });
+  test('should not render label in "no-label" state', async ({ page }) => {
+    const textFieldLabelSelector = page.locator('tds-text-field label');
+    await expect(textFieldLabelSelector).toHaveCount(0);
+  });
 
-    test('should not have a prefix', async ({ page }) => {
-      const prefixPresence = page.locator('tds-text-field span[slot="prefix"]');
-      await expect(prefixPresence).toHaveCount(0);
-    });
+  test('should have correct placeholder', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('placeholder', 'Placeholder');
+  });
 
-    test('should not have a suffix', async ({ page }) => {
-      const suffixPresence = page.locator('tds-text-field span[slot="suffix"]');
-      await expect(suffixPresence).toHaveCount(0);
-    });
+  test('should not have a prefix', async ({ page }) => {
+    const prefixPresence = page.locator('tds-text-field span[slot="prefix"]');
+    await expect(prefixPresence).toHaveCount(0);
+  });
 
-    test('should not have "no-min-width" attribute', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).not.toHaveAttribute('no-min-width');
-    });
+  test('should not have a suffix', async ({ page }) => {
+    const suffixPresence = page.locator('tds-text-field span[slot="suffix"]');
+    await expect(suffixPresence).toHaveCount(0);
+  });
 
-    test('should have width greater than 200px', async ({ page }) => {
-      const width = await page.evaluate((textField) => {
-        const element = document.querySelector(textField);
-        return element.getBoundingClientRect().width;
-      }, 'tds-text-field');
-      expect(width).toBeGreaterThan(200);
-    });
+  test('should not have "no-min-width" attribute', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).not.toHaveAttribute('no-min-width');
+  });
 
-    test('should not be read-only', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).not.toHaveAttribute('read-only');
-    });
+  test('should have width greater than 200px', async ({ page }) => {
+    const width = await page.evaluate((textField) => {
+      const element = document.querySelector(textField);
+      return element.getBoundingClientRect().width;
+    }, 'tds-text-field');
+    expect(width).toBeGreaterThan(200);
+  });
 
-    test('should not be disabled', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).not.toHaveAttribute('disabled');
-    });
+  test('should not be read-only', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).not.toHaveAttribute('read-only');
+  });
+
+  test('should not be disabled', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).not.toHaveAttribute('disabled');
+  });
 
-    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';
+  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);
+    // Hover over the text field
+    await page.hover(textFieldInputSelector);
 
-      // Click on the text field to activate it
-      await page.click(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 text');
+    // Type 'Test text' into the text field
+    await page.fill(textFieldInputSelector, 'Test text');
 
-      // Verify the text field contains the inputted text
-      const value = await page.inputValue(textFieldInputSelector);
-      expect(value).toBe('Test text');
-    });
+    // Verify the text field contains the inputted text
+    const value = await page.inputValue(textFieldInputSelector);
+    expect(value).toBe('Test text');
   });
 });
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
@@ -26,22 +26,28 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff on screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('should have disabled attribute', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('disabled', '');
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('should have disabled attribute', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('disabled', '');
+  });
 
-    test('should not allow input', async ({ page }) => {
-      // Define the selector for the text field input
-      const textFieldInputSelector = 'tds-text-field input';
+  test('should not allow input', async ({ page }) => {
+    // Define the selector for the text field input
+    const textFieldInputSelector = 'tds-text-field input';
 
-      // Check that the input is not editable
-      const input = page.locator(textFieldInputSelector);
-      await expect(input).not.toBeEditable();
+    // Check that the input is not editable
+    const input = page.locator(textFieldInputSelector);
+    await expect(input).not.toBeEditable();
 
-      // Check if selector has "not-allowed" cursor
-      await expect(page.locator(textFieldInputSelector)).toHaveCSS('cursor', 'not-allowed');
-    });
+    // Check if selector has "not-allowed" cursor
+    await expect(page.locator(textFieldInputSelector)).toHaveCSS('cursor', 'not-allowed');
   });
 });
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
@@ -27,36 +27,6 @@ testConfigurations.withModeVariants.forEach((config) => {
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
 
-    test('should have state "error"', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('state', 'error');
-    });
-
-    test('should have correct border-bottom-color using CSS variable', async ({ page }) => {
-      const textFieldContainer = page.locator('tds-text-field .text-field-container');
-
-      const borderBottomColor = await textFieldContainer.evaluate((element) =>
-        getComputedStyle(element).getPropertyValue('border-bottom-color'),
-      );
-
-      expect(borderBottomColor).toBe('rgb(255, 35, 64)');
-    });
-
-    test('should have type "password"', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('type', 'password');
-    });
-
-    test('should have attribute set to label outside', async ({ page }) => {
-      const textFieldLabelSelector = page.locator('tds-text-field');
-      await expect(textFieldLabelSelector).toHaveAttribute('label-position', 'outside');
-    });
-
-    test('should render label in "outside" state', async ({ page }) => {
-      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';
@@ -79,3 +49,39 @@ testConfigurations.withModeVariants.forEach((config) => {
     });
   });
 });
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('should have state "error"', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('state', 'error');
+  });
+
+  test('should have correct border-bottom-color using CSS variable', async ({ page }) => {
+    const textFieldContainer = page.locator('tds-text-field .text-field-container');
+
+    const borderBottomColor = await textFieldContainer.evaluate((element) =>
+      getComputedStyle(element).getPropertyValue('border-bottom-color'),
+    );
+
+    expect(borderBottomColor).toBe('rgb(255, 35, 64)');
+  });
+
+  test('should have type "password"', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('type', 'password');
+  });
+
+  test('should have attribute set to label outside', async ({ page }) => {
+    const textFieldLabelSelector = page.locator('tds-text-field');
+    await expect(textFieldLabelSelector).toHaveAttribute('label-position', 'outside');
+  });
+
+  test('should render label in "outside" state', async ({ page }) => {
+    const textFieldLabelSelector = page.locator('div >> text="Label"');
+    await expect(textFieldLabelSelector).toHaveCount(1);
+  });
+});
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
@@ -26,45 +26,48 @@ testConfigurations.withModeVariants.forEach((config) => {
       /* Check diff on screenshot */
       await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
     });
+  });
+});
 
-    test('should have state "success"', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('state', 'success');
-    });
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
 
-    // only check color when no mode variant or mode is set:
-    if (!config) {
-      test('should have correct border-bottom-color using CSS variable', async ({ page }) => {
-        const textFieldContainer = page.locator('tds-text-field .text-field-container');
+  test('should have state "success"', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('state', 'success');
+  });
 
-        const borderBottomColor = await textFieldContainer.evaluate((element) =>
-          getComputedStyle(element).getPropertyValue('border-bottom-color'),
-        );
+  test('should have correct border-bottom-color using CSS variable', async ({ page }) => {
+    const textFieldContainer = page.locator('tds-text-field .text-field-container');
 
-        expect(borderBottomColor).toBe('rgb(13, 15, 19)');
-      });
-    }
+    const borderBottomColor = await textFieldContainer.evaluate((element) =>
+      getComputedStyle(element).getPropertyValue('border-bottom-color'),
+    );
 
-    test('should have read-only attribute', async ({ page }) => {
-      const textField = page.locator(textFieldSelector);
-      await expect(textField).toHaveAttribute('read-only');
-    });
+    expect(borderBottomColor).toBe('rgb(13, 15, 19)');
+  });
 
-    test('should have read-only icon', async ({ page }) => {
-      const textFieldIconSelector = page.locator('tds-text-field tds-icon[name="edit_inactive"]');
-      await expect(textFieldIconSelector).toBeVisible();
-    });
+  test('should have read-only attribute', async ({ page }) => {
+    const textField = page.locator(textFieldSelector);
+    await expect(textField).toHaveAttribute('read-only');
+  });
 
-    test('should not allow input', async ({ page }) => {
-      // Define the selector for the text field input
-      const textFieldInputSelector = 'tds-text-field input';
+  test('should have read-only icon', async ({ page }) => {
+    const textFieldIconSelector = page.locator('tds-text-field tds-icon[name="edit_inactive"]');
+    await expect(textFieldIconSelector).toBeVisible();
+  });
 
-      // Check that the input is not editable
-      const input = page.locator(textFieldInputSelector);
-      await expect(input).not.toBeEditable();
+  test('should not allow input', async ({ page }) => {
+    // Define the selector for the text field input
+    const textFieldInputSelector = 'tds-text-field input';
 
-      // Check if selector has "auto" cursor
-      await expect(page.locator(textFieldInputSelector)).toHaveCSS('cursor', 'auto');
-    });
+    // Check that the input is not editable
+    const input = page.locator(textFieldInputSelector);
+    await expect(input).not.toBeEditable();
+
+    // Check if selector has "auto" cursor
+    await expect(page.locator(textFieldInputSelector)).toHaveCSS('cursor', 'auto');
   });
 });
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
@@ -1,24 +1,16 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
-import {
-  testConfigurations,
-  getTestDescribeText,
-  setupPage,
-} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/text-field/test/read-only-with-suffix/index.html';
-const componentName = 'tds-text-field';
 const testDescription = 'TdsTextField - readOnly prop effect';
 
-testConfigurations.withModeVariants.forEach((config) => {
-  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
-    test.beforeEach(async ({ page }) => {
-      await setupPage(page, config, componentTestPath, componentName);
-    });
+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();
-    });
+  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();
   });
 });