test(breadcrumbs): add darkmode screenshot test and refactor folder s…

…tructure (#890) * test(breadcrumbs): add lightmode and darkmode tests * test(breadcrumbs): refactor tests to use beforeEach for page navigation * test(breadcrumbs): fix import of css variables
scania-digital-design-system · Dec 16, 2024 · 4b988e3 · 4b988e3
1 parent fafe9c7
commit 4b988e3
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 6 deletions.
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts b/packages/core/src/components/breadcrumbs/test/default/darkmode/breadcrumbs.e2e.ts
@@ -0,0 +1,23 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/breadcrumbs/test/default/darkmode/index.html';
+
+test.describe.parallel('tds-breadcrumbs-default-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default breadcrumbs correctly', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('page 3 item should be able to become focused', async ({ page }) => {
+    const pageThree = page.getByText(/Page 3/);
+    await pageThree.focus();
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...rumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png b/...rumbs-default-darkmode-page-3-item-should-be-able-to-become-focused-1-linux.png
diff --git a/...-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png b/...-breadcrumbs-default-darkmode-renders-default-breadcrumbs-correctly-1-linux.png
diff --git a/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html b/packages/core/src/components/breadcrumbs/test/default/darkmode/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Breadcrumbs - Default</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 class="tds-mode-dark" style="background-color: var(--tds-grey-958)">
+    <tds-breadcrumbs>
+      <tds-breadcrumb>
+        <a href="#">Page 1</a>
+      </tds-breadcrumb>
+      <tds-breadcrumb>
+        <a href="#">Page 2</a>
+      </tds-breadcrumb>
+      <tds-breadcrumb current>
+        <a href="#">Page 3</a>
+      </tds-breadcrumb>
+    </tds-breadcrumbs>
+  </body>
+</html>
diff --git a/...eadcrumbs/test/default/breadcrumbs.e2e.ts → ...test/default/lightmode/breadcrumbs.e2e.ts b/...eadcrumbs/test/default/breadcrumbs.e2e.ts → ...test/default/lightmode/breadcrumbs.e2e.ts
@@ -1,18 +1,19 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/breadcrumbs/test/default/index.html';
+const componentTestPath = 'src/components/breadcrumbs/test/default/lightmode/index.html';
 
-test.describe.parallel('tds-breadcrumbs-default', () => {
-  test('renders default breadcrumbs correctly', async ({ page }) => {
+test.describe.parallel('tds-breadcrumbs-default-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('renders default breadcrumbs correctly', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
 
   test('items Page 1, Page 2, Page 3 exist on the page', async ({ page }) => {
-    await page.goto(componentTestPath);
     const navigation = page.getByRole('navigation');
     await expect(navigation).toHaveCount(1);
     const listItems = page.getByRole('listitem');
@@ -32,8 +33,6 @@ test.describe.parallel('tds-breadcrumbs-default', () => {
   });
 
   test('page 3 item should be able to become focused', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const pageThree = page.getByText(/Page 3/);
     await pageThree.focus();
 

diff --git a/...uld-be-able-to-become-focused-1-linux.png → ...uld-be-able-to-become-focused-1-linux.png b/...uld-be-able-to-become-focused-1-linux.png → ...uld-be-able-to-become-focused-1-linux.png
diff --git a/...default-breadcrumbs-correctly-1-linux.png → ...default-breadcrumbs-correctly-1-linux.png b/...default-breadcrumbs-correctly-1-linux.png → ...default-breadcrumbs-correctly-1-linux.png
diff --git a/...nents/breadcrumbs/test/default/index.html → ...dcrumbs/test/default/lightmode/index.html b/...nents/breadcrumbs/test/default/index.html → ...dcrumbs/test/default/lightmode/index.html