test: add screenshot tests for banner in light and dark modes

scania-digital-design-system · Dec 9, 2024 · 2ff5d66 · 2ff5d66
1 parent 388af60
commit 2ff5d66
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 0 deletions.
diff --git a/packages/core/src/components/banner/test/_screenshot_tests/banner.e2e.ts b/packages/core/src/components/banner/test/_screenshot_tests/banner.e2e.ts
@@ -0,0 +1,39 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const colorModes = ['lightmode', 'darkmode'];
+const bannerTypes = ['default', 'error', 'information'];
+
+colorModes.forEach((colorMode) => {
+  bannerTypes.forEach((bannerType) => {
+    const componentTestPath = 'src/components/banner/test/_screenshot_tests/index.html';
+
+    test.describe.parallel(`tds-banner-${bannerType}-${colorMode}`, () => {
+      test(`renders ${bannerType} banner with ${colorMode} correctly`, async ({ page }) => {
+        await page.goto(componentTestPath);
+
+        if (colorMode === 'darkmode') {
+          await page.evaluate(() => {
+            document.body.classList.add('tds-mode-dark');
+          });
+        }
+
+        await page.evaluate((mode) => {
+          document.body.setAttribute(
+            'style',
+            `background-color: ${mode === 'lightmode' ? 'white' : 'grey-958'}; padding: 10px`,
+          );
+        }, colorMode);
+
+        if (bannerType !== 'default') {
+          await page.evaluate((type) => {
+            document.getElementsByTagName('tds-banner')[0].setAttribute('variant', type);
+          }, bannerType);
+        }
+
+        /* Check diff on screenshot */
+        await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+      });
+    });
+  });
+});
diff --git a/...ner-default-darkmode-renders-default-banner-with-darkmode-correctly-1-linux.png b/...ner-default-darkmode-renders-default-banner-with-darkmode-correctly-1-linux.png
diff --git a/...r-default-lightmode-renders-default-banner-with-lightmode-correctly-1-linux.png b/...r-default-lightmode-renders-default-banner-with-lightmode-correctly-1-linux.png
diff --git a/...-banner-error-darkmode-renders-error-banner-with-darkmode-correctly-1-linux.png b/...-banner-error-darkmode-renders-error-banner-with-darkmode-correctly-1-linux.png
diff --git a/...anner-error-lightmode-renders-error-banner-with-lightmode-correctly-1-linux.png b/...anner-error-lightmode-renders-error-banner-with-lightmode-correctly-1-linux.png
diff --git a/...rmation-darkmode-renders-information-banner-with-darkmode-correctly-1-linux.png b/...rmation-darkmode-renders-information-banner-with-darkmode-correctly-1-linux.png
diff --git a/...ation-lightmode-renders-information-banner-with-lightmode-correctly-1-linux.png b/...ation-lightmode-renders-information-banner-with-lightmode-correctly-1-linux.png
diff --git a/packages/core/src/components/banner/test/_screenshot_tests/index.html b/packages/core/src/components/banner/test/_screenshot_tests/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Banner - General screenshot tests</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-banner header="This is a header text area" subheader="This is the subheader text area">
+      <tds-link slot="actions"><a href="/">Link example</a></tds-link>
+    </tds-banner>
+  </body>
+</html>