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

packages/core/src/components/textarea/test/basic/textarea.e2e.ts

@@ -1,33 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/basic/index.html';
+const componentName = 'tds-textarea';
 
-test.describe.parallel('tds-textarea', () => {
-  test('renders default textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, componentName), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+    test('renders default textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
+
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-  test('test if able to type in textarea', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const textarea = page.getByRole('textbox');
+    test('test if able to type in textarea', async ({ page }) => {
+      const textarea = page.getByRole('textbox');
 
-    /* Expect to have received an event from clicking on the textarea */
-    const myEventSpy = await page.spyOnEvent('click');
-    await textarea.click();
-    expect(myEventSpy).toHaveReceivedEvent();
+      /* Expect to have received an event from clicking on the textarea */
+      const myEventSpy = await page.spyOnEvent('click');
+      await textarea.click();
+      expect(myEventSpy).toHaveReceivedEvent();
 
-    /* Expect the textbox to have the cursor text style */
-    const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
-    expect(textareaCursorState).toBe('text');
+      /* Expect the textbox to have the cursor text style */
+      const textareaCursorState = await textarea.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      expect(textareaCursorState).toBe('text');
 
-    /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
-    await textarea.fill('Adding some text');
-    expect(await textarea.inputValue()).toBe('Adding some text');
+      /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
+      await textarea.fill('Adding some text');
+      expect(await textarea.inputValue()).toBe('Adding some text');
+    });
   });
 });

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

@@ -1,43 +1,55 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/default/index.html';
-
-test.describe.parallel('tds-textarea-default', () => {
-  test('renders default textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
-
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('test if able to type in textarea', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const textarea = page.getByRole('textbox');
-
-    /* Expect to have received an event from clicking on the textarea */
-    const myEventSpy = await page.spyOnEvent('click');
-    await textarea.click();
-    expect(myEventSpy).toHaveReceivedEvent();
-
-    /* Expect the textbox to have the cursor text style */
-    const textareaCursorState = await textarea.evaluate((style) => getComputedStyle(style).cursor);
-    expect(textareaCursorState).toBe('text');
-
-    /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
-    await textarea.fill('Adding some text');
-    expect(await textarea.inputValue()).toBe('Adding some text');
-
-    /* Expect no difference in screenshot  */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
-
-  test('not able to find label if "no-label" is set', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const textareaLabel = page.getByText('Label');
-    await expect(textareaLabel).toHaveCount(0);
-    await expect(textareaLabel).toBeHidden();
+const componentName = 'tds-textarea';
+const testDescription = 'tds-textarea-default';
+
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
+
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('test if able to type in textarea', async ({ page }) => {
+      const textarea = page.getByRole('textbox');
+
+      /* Expect to have received an event from clicking on the textarea */
+      const myEventSpy = await page.spyOnEvent('click');
+      await textarea.click();
+      expect(myEventSpy).toHaveReceivedEvent();
+
+      /* Expect the textbox to have the cursor text style */
+      const textareaCursorState = await textarea.evaluate(
+        (style) => getComputedStyle(style).cursor,
+      );
+      expect(textareaCursorState).toBe('text');
+
+      /* Expect the inputValue of textarea to have "Adding some text" after it has been typed */
+      await textarea.fill('Adding some text');
+      expect(await textarea.inputValue()).toBe('Adding some text');
+
+      /* Expect no difference in screenshot  */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
+
+    test('not able to find label if "no-label" is set', async ({ page }) => {
+      const textareaLabel = page.getByText('Label');
+      await expect(textareaLabel).toHaveCount(0);
+      await expect(textareaLabel).toBeHidden();
+    });
   });
 });

packages/core/src/components/textarea/test/read-only/textarea.e2e.ts

@@ -1,33 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/textarea/test/read-only/index.html';
+const componentName = 'tds-textarea';
+const testDescription = 'tds-textarea-read-only';
 
-test.describe.parallel('tds-textarea-read-only', () => {
-  test('renders read-only textarea correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const tdsTextarea = page.getByTestId('tds-textarea-testid');
-    await expect(tdsTextarea).toHaveCount(1);
+testConfigurations.withModeVariants.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
 
-    /* Expect the tds-textarea to have the read-only attribute */
-    await expect(tdsTextarea).toHaveAttribute('read-only');
+    test('renders read-only textarea correctly', async ({ page }) => {
+      const tdsTextarea = page.getByTestId('tds-textarea-testid');
+      await expect(tdsTextarea).toHaveCount(1);
 
-    /* Expect no diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
-  });
+      /* Expect the tds-textarea to have the read-only attribute */
+      await expect(tdsTextarea).toHaveAttribute('read-only');
 
-  test('read-only textarea - native textarea should have readonly attribute', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const textarea = page.getByRole('textbox');
+      /* Expect no diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
 
-    /* Expect the textarea within tds-textarea to have the readonly attribute */
-    await expect(textarea).toHaveAttribute('readonly');
-  });
+    test('read-only textarea - native textarea should have readonly attribute', async ({
+      page,
+    }) => {
+      const textarea = page.getByRole('textbox');
+
+      /* Expect the textarea within tds-textarea to have the readonly attribute */
+      await expect(textarea).toHaveAttribute('readonly');
+    });
 
-  test('be able to find label if "outside" is set', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const textareaLabel = page.getByText('Label');
-    await expect(textareaLabel).toHaveCount(1);
-    await expect(textareaLabel).toBeVisible();
+    test('be able to find label if "outside" is set', async ({ page }) => {
+      const textareaLabel = page.getByText('Label');
+      await expect(textareaLabel).toHaveCount(1);
+      await expect(textareaLabel).toBeVisible();
+    });
   });
 });