test(spinner): add darkmode and lightmode tests, refactor and modify …

…existing tests
scania-digital-design-system · Dec 17, 2024 · 4dcf97e · 4dcf97e
1 parent 34583ce
commit 4dcf97e
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 10 deletions.
diff --git a/packages/core/src/components/spinner/test/inverted/darkmode/index.html b/packages/core/src/components/spinner/test/inverted/darkmode/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spinner - Standard</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-spinner size="lg" variant="inverted"></tds-spinner>
+    <tds-spinner size="md" variant="inverted"></tds-spinner>
+    <tds-spinner size="sm" variant="inverted"></tds-spinner>
+    <tds-spinner size="xs" variant="inverted"></tds-spinner>
+  </body>
+</html>
diff --git a/...ents/spinner/test/inverted/spinner.e2e.ts → ...ner/test/inverted/darkmode/spinner.e2e.ts b/...ents/spinner/test/inverted/spinner.e2e.ts → ...ner/test/inverted/darkmode/spinner.e2e.ts
@@ -1,9 +1,9 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/spinner/test/inverted/index.html';
+const componentTestPath = 'src/components/spinner/test/inverted/darkmode/index.html';
 
-test.describe.parallel('tds-spinner-inverted', () => {
+test.describe.parallel('tds-spinner-inverted-darkmode', () => {
   test('renders inverted spinner correctly', async ({ page }) => {
     await page.goto(componentTestPath);
 

diff --git a/...rs-inverted-spinner-correctly-1-linux.png → ...rs-inverted-spinner-correctly-1-linux.png b/...rs-inverted-spinner-correctly-1-linux.png → ...rs-inverted-spinner-correctly-1-linux.png
diff --git a/...mponents/spinner/test/inverted/index.html → ...pinner/test/inverted/lightmode/index.html b/...mponents/spinner/test/inverted/index.html → ...pinner/test/inverted/lightmode/index.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <title>Spinner - Standard</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">
+  <body style="background-color: var(--tds-grey-50)">
     <tds-spinner size="lg" variant="inverted"></tds-spinner>
     <tds-spinner size="md" variant="inverted"></tds-spinner>
     <tds-spinner size="sm" variant="inverted"></tds-spinner>

diff --git a/packages/core/src/components/spinner/test/inverted/lightmode/spinner.e2e.ts b/packages/core/src/components/spinner/test/inverted/lightmode/spinner.e2e.ts
@@ -0,0 +1,13 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/spinner/test/inverted/lightmode/index.html';
+
+test.describe.parallel('tds-spinner-inverted-lightmode', () => {
+  test('renders inverted spinner correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...s/tds-spinner-inverted-lightmode-renders-inverted-spinner-correctly-1-linux.png b/...s/tds-spinner-inverted-lightmode-renders-inverted-spinner-correctly-1-linux.png
diff --git a/packages/core/src/components/spinner/test/standard/darkmode/index.html b/packages/core/src/components/spinner/test/standard/darkmode/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Spinner - Standard</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-spinner size="lg" variant="standard"></tds-spinner>
+    <tds-spinner size="md" variant="standard"></tds-spinner>
+    <tds-spinner size="sm" variant="standard"></tds-spinner>
+    <tds-spinner size="xs" variant="standard"></tds-spinner>
+  </body>
+</html>
diff --git a/packages/core/src/components/spinner/test/standard/darkmode/spinner.e2e.ts b/packages/core/src/components/spinner/test/standard/darkmode/spinner.e2e.ts
@@ -0,0 +1,13 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/spinner/test/standard/darkmode/index.html';
+
+test.describe.parallel('tds-spinner-standard-darkmode', () => {
+  test('renders basic spinner correctly', async ({ page }) => {
+    await page.goto(componentTestPath);
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});
diff --git a/...shots/tds-spinner-standard-darkmode-renders-basic-spinner-correctly-1-linux.png b/...shots/tds-spinner-standard-darkmode-renders-basic-spinner-correctly-1-linux.png
diff --git a/...mponents/spinner/test/standard/index.html → ...pinner/test/standard/lightmode/index.html b/...mponents/spinner/test/standard/index.html → ...pinner/test/standard/lightmode/index.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <title>Spinner - Standard</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>
+  <body style="background-color: var(--tds-grey-50)">
     <tds-spinner size="lg" variant="standard"></tds-spinner>
     <tds-spinner size="md" variant="standard"></tds-spinner>
     <tds-spinner size="sm" variant="standard"></tds-spinner>

diff --git a/...ents/spinner/test/standard/spinner.e2e.ts → ...er/test/standard/lightmode/spinner.e2e.ts b/...ents/spinner/test/standard/spinner.e2e.ts → ...er/test/standard/lightmode/spinner.e2e.ts
@@ -1,9 +1,9 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/spinner/test/standard/index.html';
+const componentTestPath = 'src/components/spinner/test/standard/lightmode/index.html';
 
-test.describe.parallel('tds-spinner-standard', () => {
+test.describe.parallel('tds-spinner-standard-lightmode', () => {
   test('renders basic spinner correctly', async ({ page }) => {
     await page.goto(componentTestPath);
 

diff --git a/...hots/tds-spinner-standard-lightmode-renders-basic-spinner-correctly-1-linux.png b/...hots/tds-spinner-standard-lightmode-renders-basic-spinner-correctly-1-linux.png
diff --git a/...e.ts-snapshots/tds-spinner-standard-renders-basic-spinner-correctly-1-linux.png b/...e.ts-snapshots/tds-spinner-standard-renders-basic-spinner-correctly-1-linux.png