test(checkbox): add darkmode screenshot test and refactor folder stru…

…cture (#909) * test(checkbox): add darkmode screenshot test * test(checkbox): refactor tests to use beforeEach for page navigation * test(checkbox): update href in html files
scania-digital-design-system · Dec 16, 2024 · 89cff41 · 89cff41
1 parent 7783cb9
commit 89cff41
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 8 deletions.
diff --git a/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/checkbox/test/default/darkmode/index.html';
+
+test.describe.parallel('tds-checkbox-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders basic checkbox correctly', async ({ page }) => {
+    const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
+
+    expect(labelElement).toHaveText('Label'); // Check label text
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png b/...ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png
diff --git a/packages/core/src/components/checkbox/test/default/darkmode/index.html b/packages/core/src/components/checkbox/test/default/darkmode/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - 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-checkbox>
+      <span slot="label">Label</span>
+    </tds-checkbox>
+  </body>
+</html>
diff --git a/...nts/checkbox/test/default/checkbox.e2e.ts → ...ox/test/default/lightmode/checkbox.e2e.ts b/...nts/checkbox/test/default/checkbox.e2e.ts → ...ox/test/default/lightmode/checkbox.e2e.ts
@@ -1,11 +1,14 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/checkbox/test/default/index.html';
+const componentTestPath = 'src/components/checkbox/test/default/lightmode/index.html';
 
-test.describe.parallel('tds-checkbox', () => {
-  test('renders basic checkbox correctly', async ({ page }) => {
+test.describe.parallel('tds-checkbox-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders basic checkbox correctly', async ({ page }) => {
     const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox
 
     expect(labelElement).toHaveText('Label'); // Check label text
@@ -14,7 +17,6 @@ test.describe.parallel('tds-checkbox', () => {
   });
 
   test('Hover and click on checkbox -> should become checked', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkbox = page.locator('tds-checkbox');
     // Hover over the checkbox
     await checkbox.hover();

diff --git a/...ders-basic-checkbox-correctly-1-linux.png → ...ders-basic-checkbox-correctly-1-linux.png b/...ders-basic-checkbox-correctly-1-linux.png → ...ders-basic-checkbox-correctly-1-linux.png
diff --git a/...mponents/checkbox/test/default/index.html → ...heckbox/test/default/lightmode/index.html b/...mponents/checkbox/test/default/index.html → ...heckbox/test/default/lightmode/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <title>Checkbox - 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" />
+    <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>

diff --git a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts
@@ -4,9 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/checkbox/test/disabled/index.html';
 
 test.describe('tds-checkbox', () => {
-  test('Hover over checkbox and label -> cursor should become inactive', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('Hover over checkbox and label -> cursor should become inactive', async ({ page }) => {
     // Find the checkbox and label elements
     const checkbox = page.locator('tds-checkbox');
     const input = page.locator('tds-checkbox input');

diff --git a/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts
@@ -4,9 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/checkbox/test/indeterminate/index.html';
 
 test.describe('tds-checkbox', () => {
-  test('Checkbox indeterminate state', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('Checkbox indeterminate state', async ({ page }) => {
     // Find the checkbox and label elements
     const checkbox = page.locator('tds-checkbox');
     const labelElement = page.locator('tds-checkbox label'); // Target label underneath checkbox