test(dropdown): add darkmode and lightmode screenshot tests (#913)

* test(dropdown): move existing default test to unspecified

* test(dropdown): add lightmode and darkmode tests for mode variants

* test(dropdown): refactor tests to use beforeEach for page navigation

packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/dropdown/test/basic/index.html';
 
 test.describe.parallel('tds-dropdown-basic', () => {
-  test('renders basic dropdown correctly', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('renders basic dropdown correctly', async ({ page }) => {
     const dropdown = page.getByTestId('tds-dropdown-testid');
     await expect(dropdown).toHaveCount(1);
 
@@ -14,25 +17,21 @@ test.describe.parallel('tds-dropdown-basic', () => {
   });
 
   test('should find label and not exist', async ({ page }) => {
-    await page.goto(componentTestPath);
     const labelText = page.getByText(/Label text/);
     await expect(labelText).toHaveCount(0);
   });
 
   test('find helper text and check not exist', async ({ page }) => {
-    await page.goto(componentTestPath);
     const helperText = page.getByText(/Helper text/);
     await expect(helperText).toHaveCount(0);
   });
 
   test('have the button to be visible', async ({ page }) => {
-    await page.goto(componentTestPath);
     const dropdownButton = page.getByRole('button').first();
     await expect(dropdownButton).toBeVisible();
   });
 
   test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
     const dropdownButton = page.getByRole('button').first();
     const dropdownListElementOne = page
       .locator('tds-dropdown-option')
@@ -48,8 +47,6 @@ test.describe.parallel('tds-dropdown-basic', () => {
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
   test('reset() method resets the dropdown', async ({ page }) => {
-    await page.goto(componentTestPath);
-
     const dropdown = page.getByTestId('tds-dropdown-testid');
 
     const dropdownButton = dropdown.getByRole('button').first();

packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts

@@ -4,8 +4,11 @@ import { expect } from '@playwright/test';
 const componentTestPath = 'src/components/dropdown/test/default/disabled/index.html';
 
 test.describe.parallel('tds-dropdown-disabled', () => {
-  test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto(componentTestPath);
+  });
+
+  test('clicking the dropdown icon does not open the dropdown-list', async ({ page }) => {
     const dropdownButtonIcon = page.locator('tds-icon');
 
     const dropdownListElementOne = page
@@ -24,7 +27,6 @@ test.describe.parallel('tds-dropdown-disabled', () => {
     await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
   });
   test('clicking the dropdown button does not open the dropdown-list', async ({ page }) => {
-    await page.goto(componentTestPath);
     const dropdownButton = page.getByRole('button').first();
 
     /* check that the icon is inside of a disabled element */

packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts

@@ -0,0 +1,74 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/dropdown/test/default/primary/darkmode/index.html';
+
+test.describe.parallel('tds-dropdown-default-primary-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default dropdown correctly', async ({ page }) => {
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+
+    /* check diff in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+    await dropdownButton.click();
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
+    /* click the dropdown button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+
+    /* Click the Option 1 button */
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ })
+      .getByRole('button');
+    await dropdownListElementOneButton.click();
+
+    await expect(dropdownListElementOneButton).toBeHidden();
+    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+
+    /* also check screenshot diff to make sure it says Option 1 */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button').first();
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+
+    await page.evaluate(() => {
+      const dropdownnew = document.querySelector('tds-dropdown');
+      dropdownnew.focusElement();
+    });
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

packages/core/src/components/dropdown/test/default/primary/darkmode/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dropdown - 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-dropdown
+      name="dropdown"
+      label="Label text"
+      label-position="outside"
+      placeholder="Placeholder"
+      helper="Helper text"
+      size="lg"
+      open-direction="auto"
+      data-testid="tds-dropdown-testid"
+      mode-variant="primary"
+    >
+      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
+      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
+      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
+      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
+    </tds-dropdown>
+  </body>
+</html>

packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts

@@ -0,0 +1,74 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/dropdown/test/default/primary/lightmode/index.html';
+
+test.describe.parallel('tds-dropdown-default-primary-lightmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default dropdown correctly', async ({ page }) => {
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+
+    /* check diff in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+    await dropdownButton.click();
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
+    /* click the dropdown button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+
+    /* Click the Option 1 button */
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ })
+      .getByRole('button');
+    await dropdownListElementOneButton.click();
+
+    await expect(dropdownListElementOneButton).toBeHidden();
+    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+
+    /* also check screenshot diff to make sure it says Option 1 */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button').first();
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+
+    await page.evaluate(() => {
+      const dropdownnew = document.querySelector('tds-dropdown');
+      dropdownnew.focusElement();
+    });
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

packages/core/src/components/dropdown/test/default/primary/lightmode/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dropdown - 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 style="padding: 20px">
+    <tds-dropdown
+      name="dropdown"
+      label="Label text"
+      label-position="outside"
+      placeholder="Placeholder"
+      helper="Helper text"
+      size="lg"
+      open-direction="auto"
+      data-testid="tds-dropdown-testid"
+      mode-variant="primary"
+    >
+      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
+      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
+      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
+      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
+    </tds-dropdown>
+  </body>
+</html>

packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts

@@ -0,0 +1,74 @@
+import { test } from 'stencil-playwright';
+import { expect } from '@playwright/test';
+
+const componentTestPath = 'src/components/dropdown/test/default/secondary/darkmode/index.html';
+
+test.describe.parallel('tds-dropdown-default-secondary-darkmode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(componentTestPath);
+  });
+
+  test('renders default dropdown correctly', async ({ page }) => {
+    const dropdown = page.getByTestId('tds-dropdown-testid');
+    await expect(dropdown).toHaveCount(1);
+
+    /* check diff in screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown button opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+    await dropdownButton.click();
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => {
+    /* click the dropdown button */
+    const dropdownButton = page.getByRole('button', { name: 'Placeholder' });
+    await dropdownButton.click();
+
+    /* Click the Option 1 button */
+    const dropdownListElementOneButton = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: /Option 1/ })
+      .getByRole('button');
+    await dropdownListElementOneButton.click();
+
+    await expect(dropdownListElementOneButton).toBeHidden();
+    const dropdownButtonWithOption1 = page.getByRole('button', { name: 'Option 1' });
+    await expect(dropdownButtonWithOption1.first()).toBeVisible();
+
+    /* also check screenshot diff to make sure it says Option 1 */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+
+  test('focusElement() method focus and opens the dropdown-list', async ({ page }) => {
+    const dropdownButton = page.getByRole('button').first();
+    const dropdownListElementOne = page
+      .locator('tds-dropdown-option')
+      .filter({ hasText: 'Option 1' });
+    await expect(dropdownListElementOne).toBeHidden();
+
+    await page.evaluate(() => {
+      const dropdownnew = document.querySelector('tds-dropdown');
+      dropdownnew.focusElement();
+    });
+
+    /* before clicking dropdownlist should not be visible, the button should be */
+    await expect(dropdownButton).toBeVisible();
+    await expect(dropdownListElementOne).toBeVisible();
+
+    /* checks diff on screenshot */
+    await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
+  });
+});

packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dropdown - 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-900); padding: 20px">
+    <tds-dropdown
+      name="dropdown"
+      label="Label text"
+      label-position="outside"
+      placeholder="Placeholder"
+      helper="Helper text"
+      size="lg"
+      open-direction="auto"
+      data-testid="tds-dropdown-testid"
+      mode-variant="secondary"
+    >
+      <tds-dropdown-option value="option-1">Option 1</tds-dropdown-option>
+      <tds-dropdown-option disabled value="option-2">Option 2</tds-dropdown-option>
+      <tds-dropdown-option value="option-3">Option 3</tds-dropdown-option>
+      <tds-dropdown-option value="option-4">Option 4</tds-dropdown-option>
+    </tds-dropdown>
+  </body>
+</html>