test(button): add secondary variant darkmode and lightmode screenshot…

… tests (#900) * test(button): move existing secondary test to unspecified * test(button): add primary and secondary mode variant tests for secondary variant * test(button): refactor secondary variant tests to use beforeEach for page navigation * test(button): add padding for new secondary variant tests * test(button): fix imports of css variables for secondary variant * test(button): improve structure for secondary variant
scania-digital-design-system · Dec 16, 2024 · 34583ce · 34583ce
1 parent e5cef39
commit 34583ce
Show file tree

Hide file tree

Showing 15 changed files with 169 additions and 3 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