test(stepper): add darkmode screenshot test and refactor folder struc…

…ture
scania-digital-design-system · Dec 17, 2024 · e3453de · e3453de
1 parent 34583ce
commit e3453de
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 4 deletions.
diff --git a/packages/core/src/components/stepper/test/large-horizontal-text-below/darkmode/index.html b/packages/core/src/components/stepper/test/large-horizontal-text-below/darkmode/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Stepper - Large horizontal text below</title>
+    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
+    <script type="module">
+      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
+      defineCustomElements();
+    </script>
+  </head>
+
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958)">
+    <tds-stepper
+      data-testid="tds-stepper-testid"
+      size="lg"
+      label-position="below"
+      orientation="horizontal"
+    >
+      <tds-step state="success" index="1">
+        <div slot="label">Success step</div>
+      </tds-step>
+      <tds-step state="error" index="2">
+        <div slot="label">Error step</div>
+      </tds-step>
+      <tds-step state="current" index="3">
+        <div slot="label">Current step</div>
+      </tds-step>
+      <tds-step index="4">
+        <div slot="label">Upcoming step</div>
+      </tds-step>
+    </tds-stepper>
+  </body>
+</html>
diff --git a/...arge-horizontal-text-below/stepper.e2e.ts → ...zontal-text-below/darkmode/stepper.e2e.ts b/...arge-horizontal-text-below/stepper.e2e.ts → ...zontal-text-below/darkmode/stepper.e2e.ts
@@ -1,10 +1,11 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/stepper/test/large-horizontal-text-below/index.html';
+const componentTestPath =
+  'src/components/stepper/test/large-horizontal-text-below/darkmode/index.html';
 
 //Test if component renders and take a screenshot of the component
-test('Stepper - Large horizontal with text below', async ({ page }) => {
+test('Stepper - Large horizontal with text below - darkmode', async ({ page }) => {
   await page.goto(componentTestPath);
   const stepper = page.locator('[data-testid="tds-stepper-testid"]');
   await stepper.waitFor({ state: 'visible' });

diff --git a/....ts-snapshots/Stepper---Large-horizontal-with-text-below---darkmode-1-linux.png b/....ts-snapshots/Stepper---Large-horizontal-with-text-below---darkmode-1-linux.png
diff --git a/...st/large-horizontal-text-below/index.html → ...orizontal-text-below/lightmode/index.html b/...st/large-horizontal-text-below/index.html → ...orizontal-text-below/lightmode/index.html
@@ -8,12 +8,13 @@
     />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Stepper - Large horizontal text below</title>
-    <link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
+    <link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
     <script type="module">
-      import { defineCustomElements } from '../../../../../loader/index.es2017.js';
+      import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
       defineCustomElements();
     </script>
   </head>
+
   <body>
     <tds-stepper
       data-testid="tds-stepper-testid"

diff --git a/...ges/core/src/components/stepper/test/large-horizontal-text-below/lightmode/stepper.e2e.ts b/...ges/core/src/components/stepper/test/large-horizontal-text-below/lightmode/stepper.e2e.ts
@@ -0,0 +1,13 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath =
+  'src/components/stepper/test/large-horizontal-text-below/lightmode/index.html';
+
+//Test if component renders and take a screenshot of the component
+test('Stepper - Large horizontal with text below - lightmode', async ({ page }) => {
+  await page.goto(componentTestPath);
+  const stepper = page.locator('[data-testid="tds-stepper-testid"]');
+  await stepper.waitFor({ state: 'visible' });
+  await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+});
diff --git a/...ge-horizontal-with-text-below-1-linux.png → ...l-with-text-below---lightmode-1-linux.png b/...ge-horizontal-with-text-below-1-linux.png → ...l-with-text-below---lightmode-1-linux.png