test(popover-canvas): add screenshot tests using reusable test code (#…

…949)
scania-digital-design-system · Jan 15, 2025 · 416d572 · 416d572
1 parent 718499b
commit 416d572
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 29 deletions.
diff --git a/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/default/popover-canvas.e2e.ts
@@ -1,22 +1,39 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/default/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-default';
 
-test.describe.parallel('tds-popover-canvas-default', () => {
-  test('renders default popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders default popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
+
+      /* 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('make sure popover canvas shows after trigger button is pressed and content is displayed', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {
@@ -37,7 +54,6 @@ test.describe.parallel('tds-popover-canvas-default', () => {
   });
 
   test('activating close method should close the dialog', async ({ page }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     await triggerButton.click();
 

diff --git a/...er-canvas-default-darkmode-renders-default-popover-canvas-correctly-1-linux.png b/...er-canvas-default-darkmode-renders-default-popover-canvas-correctly-1-linux.png
diff --git a/...r-canvas-default-lightmode-renders-default-popover-canvas-correctly-1-linux.png b/...r-canvas-default-lightmode-renders-default-popover-canvas-correctly-1-linux.png
diff --git a/...tds-popover-canvas-default-renders-default-popover-canvas-correctly-1-linux.png b/...tds-popover-canvas-default-renders-default-popover-canvas-correctly-1-linux.png
diff --git a/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/show-false/popover-canvas.e2e.ts
@@ -1,22 +1,39 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/show-false/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-show-false';
 
-test.describe.parallel('tds-popover-canvas-show-false', () => {
-  test('renders show=false popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=false popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
 
-    /* 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('make sure popover canvas does not show after trigger button is pressed and content is not displayed before or after button click', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {

diff --git a/...vas-show-false-darkmode-renders-show-false-popover-canvas-correctly-1-linux.png b/...vas-show-false-darkmode-renders-show-false-popover-canvas-correctly-1-linux.png
diff --git a/...as-show-false-lightmode-renders-show-false-popover-canvas-correctly-1-linux.png b/...as-show-false-lightmode-renders-show-false-popover-canvas-correctly-1-linux.png
diff --git a/...pover-canvas-show-false-renders-show-false-popover-canvas-correctly-1-linux.png b/...pover-canvas-show-false-renders-show-false-popover-canvas-correctly-1-linux.png
diff --git a/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts b/packages/core/src/components/popover-canvas/test/show-true/popover-canvas.e2e.ts
@@ -1,28 +1,45 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
+import {
+  testConfigurations,
+  getTestDescribeText,
+  setupPage,
+} from '../../../../utils/testConfiguration';
 
 const componentTestPath = 'src/components/popover-canvas/test/show-true/index.html';
+const componentName = 'tds-popover-canvas';
+const testDescription = 'tds-popover-canvas-show-true';
 
-test.describe.parallel('tds-popover-canvas-show-true', () => {
-  test('renders show=true popover-canvas correctly', async ({ page }) => {
-    await page.goto(componentTestPath);
-    const triggerButton = page.getByRole('button');
-    await triggerButton.click();
+testConfigurations.basic.forEach((config) => {
+  test.describe.parallel(getTestDescribeText(config, testDescription), () => {
+    test.beforeEach(async ({ page }) => {
+      await setupPage(page, config, componentTestPath, componentName);
+    });
+
+    test('renders show=true popover-canvas correctly', async ({ page }) => {
+      const triggerButton = page.getByRole('button');
+      await triggerButton.click();
 
-    // get popover element
-    const popover = page.locator('tds-popover-core');
+      // get popover element
+      const popover = page.locator('tds-popover-core');
 
-    // wait for it to be visible
-    await popover.waitFor({ state: 'visible' });
+      // wait for it to be visible
+      await popover.waitFor({ state: 'visible' });
 
-    /* Check diff on screenshot */
-    await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+      /* Check diff on screenshot */
+      await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.05 });
+    });
+  });
+});
+
+test.describe.parallel(componentName, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
   });
 
   test('make sure the popover canvas content is displayed both before and after the trigger button is pressed', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const triggerButton = page.getByRole('button');
     const popoverCanvasHeader = page.getByRole('heading');
     const popoverCanvasBody = page.getByText('Where you can put anything you want!', {

diff --git a/...anvas-show-true-darkmode-renders-show-true-popover-canvas-correctly-1-linux.png b/...anvas-show-true-darkmode-renders-show-true-popover-canvas-correctly-1-linux.png
diff --git a/...nvas-show-true-lightmode-renders-show-true-popover-canvas-correctly-1-linux.png b/...nvas-show-true-lightmode-renders-show-true-popover-canvas-correctly-1-linux.png
diff --git a/...popover-canvas-show-true-renders-show-true-popover-canvas-correctly-1-linux.png b/...popover-canvas-show-true-renders-show-true-popover-canvas-correctly-1-linux.png