test(message): add screenshot tests using reusable test code (#948)

scania-digital-design-system · Jan 15, 2025 · 2c87518 · 2c87518
1 parent 416d572
commit 2c87518
Show file tree

Hide file tree

Showing 29 changed files with 92 additions and 29 deletions.
diff --git a/packages/core/src/components/message/test/basic/message.e2e.ts b/packages/core/src/components/message/test/basic/message.e2e.ts
@@ -1,18 +1,34 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/basic/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-basic';
 
-test.describe.parallel('tds-message-basic', () => {
-  test('is basic message rendered correctly', 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);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is basic message rendered correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('has icon', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('has icon', async ({ page }) => {
     const messageIcon = page.getByRole('img');
     await expect(messageIcon).toHaveCount(1);
     await expect(messageIcon).toBeVisible();

diff --git a/...-message-basic-primary-darkmode-is-basic-message-rendered-correctly-1-linux.png b/...-message-basic-primary-darkmode-is-basic-message-rendered-correctly-1-linux.png
diff --git a/...message-basic-primary-lightmode-is-basic-message-rendered-correctly-1-linux.png b/...message-basic-primary-lightmode-is-basic-message-rendered-correctly-1-linux.png
diff --git a/...essage-basic-secondary-darkmode-is-basic-message-rendered-correctly-1-linux.png b/...essage-basic-secondary-darkmode-is-basic-message-rendered-correctly-1-linux.png
diff --git a/...ic-message-rendered-correctly-1-linux.png → ...ic-message-rendered-correctly-1-linux.png b/...ic-message-rendered-correctly-1-linux.png → ...ic-message-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/message/test/error/message.e2e.ts b/packages/core/src/components/message/test/error/message.e2e.ts
@@ -1,32 +1,46 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/error/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-error';
 
-test.describe.parallel('tds-message-error', () => {
-  test('is error message rendered correctly', 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);
+    });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is error message rendered correctly', async ({ page }) => {
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
+});
 
-  test('has header text', async ({ page }) => {
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('has header text', async ({ page }) => {
     const messageComponentHeader = page.getByText('Message header', { exact: true });
     await expect(messageComponentHeader).toHaveCount(1);
     await expect(messageComponentHeader).toBeVisible();
   });
 
   test('has subheader text', async ({ page }) => {
-    await page.goto(componentTestPath);
     const messageComponentSubHeader = page.getByText('Longer Message text can be placed here.');
     await expect(messageComponentSubHeader).toHaveCount(1);
     await expect(messageComponentSubHeader).toBeVisible();
   });
 
   test('has error icon', async ({ page }) => {
-    await page.goto(componentTestPath);
     const messageIcon = page.getByRole('img');
     await expect(messageIcon).toHaveCount(1);
     await expect(messageIcon).toBeVisible();

diff --git a/....ts-snapshots/tds-message-error-is-error-message-rendered-correctly-1-linux.png b/....ts-snapshots/tds-message-error-is-error-message-rendered-correctly-1-linux.png
diff --git a/...-message-error-primary-darkmode-is-error-message-rendered-correctly-1-linux.png b/...-message-error-primary-darkmode-is-error-message-rendered-correctly-1-linux.png
diff --git a/...message-error-primary-lightmode-is-error-message-rendered-correctly-1-linux.png b/...message-error-primary-lightmode-is-error-message-rendered-correctly-1-linux.png
diff --git a/...essage-error-secondary-darkmode-is-error-message-rendered-correctly-1-linux.png b/...essage-error-secondary-darkmode-is-error-message-rendered-correctly-1-linux.png
diff --git a/...ssage-error-secondary-lightmode-is-error-message-rendered-correctly-1-linux.png b/...ssage-error-secondary-lightmode-is-error-message-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/message/test/information/message.e2e.ts b/packages/core/src/components/message/test/information/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/information/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-information';
 
-test.describe('tds-message-information', () => {
-  test('is information message rendered correctly', 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);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is information message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/...s/tds-message-information-is-information-message-rendered-correctly-1-linux.png b/...s/tds-message-information-is-information-message-rendered-correctly-1-linux.png
diff --git a/...ormation-primary-darkmode-is-information-message-rendered-correctly-1-linux.png b/...ormation-primary-darkmode-is-information-message-rendered-correctly-1-linux.png
diff --git a/...rmation-primary-lightmode-is-information-message-rendered-correctly-1-linux.png b/...rmation-primary-lightmode-is-information-message-rendered-correctly-1-linux.png
diff --git a/...mation-secondary-darkmode-is-information-message-rendered-correctly-1-linux.png b/...mation-secondary-darkmode-is-information-message-rendered-correctly-1-linux.png
diff --git a/...ation-secondary-lightmode-is-information-message-rendered-correctly-1-linux.png b/...ation-secondary-lightmode-is-information-message-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/message/test/success/message.e2e.ts b/packages/core/src/components/message/test/success/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/success/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-success';
 
-test.describe('tds-message-success', () => {
-  test('is success message rendered correctly', 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);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is success message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/...snapshots/tds-message-success-is-success-message-rendered-correctly-1-linux.png b/...snapshots/tds-message-success-is-success-message-rendered-correctly-1-linux.png
diff --git a/...sage-success-primary-darkmode-is-success-message-rendered-correctly-1-linux.png b/...sage-success-primary-darkmode-is-success-message-rendered-correctly-1-linux.png
diff --git a/...age-success-primary-lightmode-is-success-message-rendered-correctly-1-linux.png b/...age-success-primary-lightmode-is-success-message-rendered-correctly-1-linux.png
diff --git a/...ge-success-secondary-darkmode-is-success-message-rendered-correctly-1-linux.png b/...ge-success-secondary-darkmode-is-success-message-rendered-correctly-1-linux.png
diff --git a/...e-success-secondary-lightmode-is-success-message-rendered-correctly-1-linux.png b/...e-success-secondary-lightmode-is-success-message-rendered-correctly-1-linux.png
diff --git a/packages/core/src/components/message/test/warning/message.e2e.ts b/packages/core/src/components/message/test/warning/message.e2e.ts
@@ -1,13 +1,24 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/message/test/warning/index.html';
+const componentName = 'tds-message';
+const testDescription = 'tds-message-warning';
 
-test.describe('tds-message-warning', () => {
-  test('is warning message rendered correctly', 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);
+    });
 
-    /* Take screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    test('is warning message rendered correctly', async ({ page }) => {
+      /* Take screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+    });
   });
 });
diff --git a/...snapshots/tds-message-warning-is-warning-message-rendered-correctly-1-linux.png b/...snapshots/tds-message-warning-is-warning-message-rendered-correctly-1-linux.png
diff --git a/...sage-warning-primary-darkmode-is-warning-message-rendered-correctly-1-linux.png b/...sage-warning-primary-darkmode-is-warning-message-rendered-correctly-1-linux.png
diff --git a/...age-warning-primary-lightmode-is-warning-message-rendered-correctly-1-linux.png b/...age-warning-primary-lightmode-is-warning-message-rendered-correctly-1-linux.png
diff --git a/...ge-warning-secondary-darkmode-is-warning-message-rendered-correctly-1-linux.png b/...ge-warning-secondary-darkmode-is-warning-message-rendered-correctly-1-linux.png
diff --git a/...e-warning-secondary-lightmode-is-warning-message-rendered-correctly-1-linux.png b/...e-warning-secondary-lightmode-is-warning-message-rendered-correctly-1-linux.png