Merge branch 'develop' into test/link-screenshot-tests

scania-digital-design-system · Dec 16, 2024 · 33e18ee · 33e18ee
2 parents 29f0648 + 34583ce
commit 33e18ee
Show file tree

Hide file tree

Showing 71 changed files with 721 additions and 88 deletions.
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/primary/darkmode/index.html';
+
+test.describe.parallel('tds-button-secondary-primary-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...utton-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png b/...utton-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png
diff --git a/packages/core/src/components/button/test/secondary/primary/darkmode/index.html b/packages/core/src/components/button/test/secondary/primary/darkmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Secondary</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); padding: 20px">
+    <tds-button
+      text="Button"
+      variant="secondary"
+      mode-variant="primary"
+      size="md"
+      data-testid="tds-button-testid"
+    ></tds-button>
+  </body>
+</html>
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/primary/lightmode/index.html';
+
+test.describe.parallel('tds-button-secondary-primary-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...tton-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png b/...tton-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png
diff --git a/packages/core/src/components/button/test/secondary/primary/lightmode/index.html b/packages/core/src/components/button/test/secondary/primary/lightmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Secondary</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 style="padding: 20px">
+    <tds-button
+      text="Button"
+      variant="secondary"
+      mode-variant="primary"
+      size="md"
+      data-testid="tds-button-testid"
+    ></tds-button>
+  </body>
+</html>
diff --git a/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/secondary/darkmode/index.html';
+
+test.describe.parallel('tds-button-secondary-secondary-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...ton-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png b/...ton-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png
diff --git a/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html b/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Secondary</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-900); padding: 20px">
+    <tds-button
+      text="Button"
+      variant="secondary"
+      mode-variant="secondary"
+      size="md"
+      data-testid="tds-button-testid"
+    ></tds-button>
+  </body>
+</html>
diff --git a/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts b/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts
@@ -0,0 +1,18 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/button/test/secondary/secondary/lightmode/index.html';
+
+test.describe.parallel('tds-button-secondary-secondary-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
+    const button = page.getByTestId('tds-button-testid');
+    await expect(button).toHaveCount(1);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...on-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png b/...on-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png
diff --git a/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html b/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Button - Secondary</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 style="background-color: var(--tds-grey-50); padding: 20px">
+    <tds-button
+      text="Button"
+      variant="secondary"
+      mode-variant="secondary"
+      size="md"
+      data-testid="tds-button-testid"
+    ></tds-button>
+  </body>
+</html>
diff --git a/...nents/button/test/secondary/button.e2e.ts → .../test/secondary/unspecified/button.e2e.ts b/...nents/button/test/secondary/button.e2e.ts → .../test/secondary/unspecified/button.e2e.ts
@@ -1,11 +1,14 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/button/test/secondary/index.html';
+const componentTestPath = 'src/components/button/test/secondary/unspecified/index.html';
 
 test.describe.parallel('tds-button-secondary', () => {
-  test('renders secondary button correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders secondary button correctly', async ({ page }) => {
     const button = page.getByTestId('tds-button-testid');
     await expect(button).toHaveCount(1);
 
@@ -14,7 +17,6 @@ test.describe.parallel('tds-button-secondary', () => {
   });
 
   test('Check so that height is correct to md measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const button = page.getByText('Button', { exact: true });
     const buttonHeight = await button.evaluate((style) => getComputedStyle(style).height);
     expect(buttonHeight).toBe('48px');

diff --git a/...rs-secondary-button-correctly-1-linux.png → ...rs-secondary-button-correctly-1-linux.png b/...rs-secondary-button-correctly-1-linux.png → ...rs-secondary-button-correctly-1-linux.png
diff --git a/...mponents/button/test/secondary/index.html → ...ton/test/secondary/unspecified/index.html b/...mponents/button/test/secondary/index.html → ...ton/test/secondary/unspecified/index.html
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/...o-render-a-horizontal-divider-1-linux.png → ...ders-basic-checkbox-correctly-1-linux.png b/...o-render-a-horizontal-divider-1-linux.png → ...ders-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

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/...shots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png b/...shots/tds-divider-lightmode-expect-to-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>