test(divider): refactor and update horizontal screenshot tests (#912)

* test(divider): refactor and update existing horizontal lightmode and darkmode tests * test(divider): refactor tests to use beforeEach for page navigation
scania-digital-design-system · Dec 16, 2024 · e5cef39 · e5cef39
1 parent 5968ca7
commit e5cef39
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 30 deletions.
diff --git a/...nts/divider/test/darkmode/darkmode.e2e.ts → ...r/test/horizontal/darkmode/divider.e2e.ts b/...nts/divider/test/darkmode/darkmode.e2e.ts → ...r/test/horizontal/darkmode/divider.e2e.ts
@@ -1,12 +1,14 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/divider/test/darkmode/index.html';
+const componentTestPath = 'src/components/divider/test/horizontal/darkmode/index.html';
 
-test.describe.parallel('tds-divider', () => {
-  test('expect to render a divider in darkmode', async ({ page }) => {
+test.describe.parallel('tds-divider-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('expect to render a divider in darkmode', async ({ page }) => {
     /* Check diff on screenshot */
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });

diff --git a/...-render-a-divider-in-darkmode-1-linux.png → ...-render-a-divider-in-darkmode-1-linux.png b/...-render-a-divider-in-darkmode-1-linux.png → ...-render-a-divider-in-darkmode-1-linux.png
diff --git a/...mponents/divider/test/darkmode/index.html → ...vider/test/horizontal/darkmode/index.html b/...mponents/divider/test/darkmode/index.html → ...vider/test/horizontal/darkmode/index.html
@@ -2,16 +2,16 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Divider - Horizontal, dark mode</title>
+    <title>Divider - Horizontal, darkmode</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>
 
-  <body class="tds-mode-dark" style="padding: 20px; height: 300px;">
+  <body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
     <tds-divider data-testid="divider"></tds-divider>
   </body>
 </html>
diff --git a/packages/core/src/components/divider/test/horizontal/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts
diff --git a/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts
@@ -0,0 +1,15 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/divider/test/horizontal/lightmode/index.html';
+
+test.describe.parallel('tds-divider-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('expect to render a divider in lightmode', async ({ page }) => {
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...o-render-a-horizontal-divider-1-linux.png → ...render-a-divider-in-lightmode-1-linux.png b/...o-render-a-horizontal-divider-1-linux.png → ...render-a-divider-in-lightmode-1-linux.png
diff --git a/...onents/divider/test/horizontal/index.html → ...ider/test/horizontal/lightmode/index.html b/...onents/divider/test/horizontal/index.html → ...ider/test/horizontal/lightmode/index.html
@@ -2,16 +2,16 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>Divider - Horizontal</title>
+    <title>Divider - Horizontal, lightmode</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>
 
-  <body style="padding: 20px; width: 300px;">
+  <body style="padding: 20px">
     <tds-divider data-testid="divider"></tds-divider>
   </body>
 </html>
diff --git a/packages/core/src/components/divider/test/vertical/divider.e2e.ts b/packages/core/src/components/divider/test/vertical/divider.e2e.ts
@@ -4,9 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/divider/test/vertical/index.html';
 
 test.describe.parallel('tds-divider', () => {
-  test('expect to render a vertical divider', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
 
+  test('expect to render a vertical divider', async ({ page }) => {
     // expect height to be greater than width
     const divider = page.getByTestId('divider').locator('div.divider').first();
     const box = await divider.boundingBox();