test(chip): add darkmode screenshot test and refactor folder structure

packages/core/src/components/chip/test/checkbox/chip.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/chip/test/checkbox/index.html';
 
 test.describe.parallel('tds-chip-checkbox', () => {
-  test('renders checkbox chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders checkbox chips correctly', async ({ page }) => {
     const chip1 = page.getByText('Label 1', { exact: true });
     await expect(chip1).toHaveCount(1);
 
@@ -20,13 +23,11 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('expect chips to be of the role checkbox', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chipRole = page.getByRole('checkbox');
     await expect(chipRole).toHaveCount(3);
   });
 
   test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height);
     expect(chipHeight1).toBe('32px');
@@ -41,7 +42,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 1 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -53,7 +53,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -65,7 +64,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -77,14 +75,12 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('1st chip is checked', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkedLabel1Chip = page.locator('input[id="option-1"]');
     const isChecked = await checkedLabel1Chip.evaluate((node: HTMLInputElement) => node.checked);
     expect(isChecked).toBeTruthy();
   });
 
   test('Clicking "Label 2" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
     const labelText2 = page.locator('text=Label 2');
     await labelText2.click();
     const chip1 = page.locator('input[id="option-1"]');
@@ -107,7 +103,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   test('Clicking "Label 2" and "Label 3" chips changes checked state appropriately', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const labelText2 = page.locator('text=Label 2');
     await labelText2.click();
     const labelText3 = page.locator('text=Label 3');
@@ -132,7 +127,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   test('Clicking "Label 1", "Label 2" and "Label 3" chips changes checked state appropriately', async ({
     page,
   }) => {
-    await page.goto(componentTestPath);
     const labelText1 = page.locator('text=Label 1');
     await labelText1.click();
     const labelText2 = page.locator('text=Label 2');

packages/core/src/components/chip/test/default/darkmode/chip.e2e.ts

@@ -0,0 +1,21 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/chip/test/default/darkmode/index.html';
+
+test.describe.parallel('tds-chip-default-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default chip correctly', async ({ page }) => {
+    const chip = page.locator('tds-chip');
+    await expect(chip).toHaveCount(1);
+
+    const labelElement = page.locator('tds-chip label'); // Target label underneath chip
+    expect(labelElement).toHaveText('Label');
+
+    /* Check diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

packages/core/src/components/chip/test/default/darkmode/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - 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); padding: 20px">
+    <tds-chip type="button" size="lg">
+      <span slot="label">Label</span>
+    </tds-chip>
+  </body>
+</html>

packages/core/src/components/chip/test/default/chip.e2e.ts → packages/core/src/components/chip/test/default/lightmode/chip.e2e.ts

@@ -1,11 +1,14 @@
 import { test } from 'stencil-playwright';
 import { expect } from '@playwright/test';
 
-const componentTestPath = 'src/components/chip/test/default/index.html';
+const componentTestPath = 'src/components/chip/test/default/lightmode/index.html';
 
-test.describe.parallel('tds-chip-default', () => {
-  test('renders default chip correctly', async ({ page }) => {
+test.describe.parallel('tds-chip-default-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders default chip correctly', async ({ page }) => {
     const chip = page.locator('tds-chip');
     await expect(chip).toHaveCount(1);
 
@@ -17,7 +20,6 @@ test.describe.parallel('tds-chip-default', () => {
   });
 
   test('expect chip to be of the role button', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chipRole = page.getByRole('button');
     await expect(chipRole).toHaveCount(1);
   });
@@ -30,7 +32,6 @@ test.describe.parallel('tds-chip-default', () => {
   });
 
   test('Chip is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label');
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);

packages/core/src/components/chip/test/default/index.html → packages/core/src/components/chip/test/default/lightmode/index.html

@@ -4,16 +4,16 @@
     <meta charset="UTF-8" />
     <title>Chip - 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>
 
   <body>
     <tds-chip type="button" size="lg">
-        <span slot="label">Label</span>
+      <span slot="label">Label</span>
     </tds-chip>
   </body>
-</html>
+</html>

packages/core/src/components/chip/test/disabled/chip.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/chip/test/disabled/index.html';
 
 test.describe.parallel('tds-chip-checkbox', () => {
-  test('renders checkbox chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders checkbox chips correctly', async ({ page }) => {
     const chip1 = page.getByText('Label 1', { exact: true });
     await expect(chip1).toHaveCount(1);
 
@@ -20,7 +23,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 1 is disabled and not clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip1 = page.locator('tds-chip[chip-id="option-1"]');
 
     const isDisabled = await chip1.evaluate((el) => el.hasAttribute('disabled'));
@@ -35,7 +37,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkboxLabel2 = page.locator('tds-chip[type="checkbox"] >> text=Label 2');
     checkboxLabel2.hover();
     const chipCursorStyle = await checkboxLabel2.evaluate(
@@ -49,7 +50,6 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 
   test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkboxLabel3 = page.locator('tds-chip[type="checkbox"] >> text=Label 2');
     checkboxLabel3.hover();
     const chipCursorStyle = await checkboxLabel3.evaluate(
@@ -63,8 +63,11 @@ test.describe.parallel('tds-chip-checkbox', () => {
   });
 });
 test.describe.parallel('tds-chip-radio', () => {
-  test('renders radio chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders radio chips correctly', async ({ page }) => {
     const chip1 = page.getByText('Label 1 for radio', { exact: true });
     await expect(chip1).toHaveCount(1);
 
@@ -79,7 +82,6 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('Radio Chip 1 is disabled and not clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const radioChip1 = page.locator('tds-chip[chip-id="radio-option-1"]');
 
     const isDisabled = await radioChip1.evaluate((el) => el.hasAttribute('disabled'));
@@ -95,8 +97,11 @@ test.describe.parallel('tds-chip-radio', () => {
 });
 
 test.describe.parallel('tds-chip-button', () => {
-  test('renders button chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders button chips correctly', async ({ page }) => {
     const chip1 = page.getByText('Label 1 for button', { exact: true });
     await expect(chip1).toHaveCount(1);
 
@@ -111,7 +116,6 @@ test.describe.parallel('tds-chip-button', () => {
   });
 
   test('Button Chip 1 is disabled and not clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const buttonChip1 = page.locator('tds-chip[chip-id="button-option-1"]');
 
     const isDisabled = await buttonChip1.evaluate((el) => el.hasAttribute('disabled'));

packages/core/src/components/chip/test/icon/chip.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/chip/test/icon/index.html';
 
 test.describe.parallel('tds-chip-default', () => {
-  test('renders default chip correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders default chip correctly', async ({ page }) => {
     const chip = page.locator('tds-chip');
     await expect(chip).toHaveCount(1);
 
@@ -17,13 +20,11 @@ test.describe.parallel('tds-chip-default', () => {
   });
 
   test('expect chip to be of the role button', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chipRole = page.getByRole('button');
     await expect(chipRole).toHaveCount(1);
   });
 
   test('Check so that the chip contains an icon', async ({ page }) => {
-    await page.goto(componentTestPath);
     const icon = page.locator('tds-icon');
     await expect(icon).toBeVisible();
     await expect(icon).toHaveAttribute('name', 'star');

packages/core/src/components/chip/test/radio/chip.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/chip/test/radio/index.html';
 
 test.describe.parallel('tds-chip-radio', () => {
-  test('renders radio chips correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders radio chips correctly', async ({ page }) => {
     const chip1 = page.getByText('Label 1', { exact: true });
     await expect(chip1).toHaveCount(1);
 
@@ -20,13 +23,11 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('expect chips to be of the role radio', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chipRole = page.getByRole('radio');
     await expect(chipRole).toHaveCount(3);
   });
 
   test('Check so that height is correct to lg/default measurements', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip1 = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     const chipHeight1 = await chip1.evaluate((style) => getComputedStyle(style).height);
     expect(chipHeight1).toBe('32px');
@@ -41,7 +42,6 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('Chip 1 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 1` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -53,7 +53,6 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('Chip 2 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 2` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -65,7 +64,6 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('Chip 3 is clickable', async ({ page }) => {
-    await page.goto(componentTestPath);
     const chip = page.locator('tds-chip label').filter({ hasText: `Label 3` });
     chip.hover();
     const chipCursorStyle = await chip.evaluate((style) => getComputedStyle(style).cursor);
@@ -77,14 +75,12 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('2nd chip is checked', async ({ page }) => {
-    await page.goto(componentTestPath);
     const checkedLabel2Chip = page.locator('input[id="option-2"]');
     const isChecked = await checkedLabel2Chip.evaluate((node: HTMLInputElement) => node.checked);
     expect(isChecked).toBeTruthy();
   });
 
   test('Clicking "Label 1" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
     const labelText1 = page.locator('text=Label 1');
     await labelText1.click();
     const chip1 = page.locator('input[id="option-1"]');
@@ -105,7 +101,6 @@ test.describe.parallel('tds-chip-radio', () => {
   });
 
   test('Clicking "Label 3" chip changes checked state appropriately', async ({ page }) => {
-    await page.goto(componentTestPath);
     const labelText3 = page.locator('text=Label 3');
     await labelText3.click();
     const chip1 = page.locator('input[id="option-1"]');