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 new file mode 100644 index 000000000..c4d124593 --- /dev/null +++ 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/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png new file mode 100644 index 000000000..7f54b1957 Binary files /dev/null and b/packages/core/src/components/button/test/secondary/primary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-primary-darkmode-renders-secondary-button-correctly-1-linux.png differ 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 new file mode 100644 index 000000000..442c234f2 --- /dev/null +++ b/packages/core/src/components/button/test/secondary/primary/darkmode/index.html @@ -0,0 +1,23 @@ + + + + + Button - Secondary + + + + + + + + + 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 new file mode 100644 index 000000000..3b1b8adf0 --- /dev/null +++ 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/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png new file mode 100644 index 000000000..8f1547ffb Binary files /dev/null and b/packages/core/src/components/button/test/secondary/primary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-primary-lightmode-renders-secondary-button-correctly-1-linux.png differ 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 new file mode 100644 index 000000000..21feb9538 --- /dev/null +++ b/packages/core/src/components/button/test/secondary/primary/lightmode/index.html @@ -0,0 +1,23 @@ + + + + + Button - Secondary + + + + + + + + + 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 new file mode 100644 index 000000000..09bd2c551 --- /dev/null +++ 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/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png new file mode 100644 index 000000000..2e341f541 Binary files /dev/null and b/packages/core/src/components/button/test/secondary/secondary/darkmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-darkmode-renders-secondary-button-correctly-1-linux.png differ 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 new file mode 100644 index 000000000..3ec0e8b03 --- /dev/null +++ b/packages/core/src/components/button/test/secondary/secondary/darkmode/index.html @@ -0,0 +1,23 @@ + + + + + Button - Secondary + + + + + + + + + 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 new file mode 100644 index 000000000..aa1aa4bee --- /dev/null +++ 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/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png new file mode 100644 index 000000000..f0e426cc5 Binary files /dev/null and b/packages/core/src/components/button/test/secondary/secondary/lightmode/button.e2e.ts-snapshots/tds-button-secondary-secondary-lightmode-renders-secondary-button-correctly-1-linux.png differ 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 new file mode 100644 index 000000000..dca1481ae --- /dev/null +++ b/packages/core/src/components/button/test/secondary/secondary/lightmode/index.html @@ -0,0 +1,23 @@ + + + + + Button - Secondary + + + + + + + + + diff --git a/packages/core/src/components/button/test/secondary/button.e2e.ts b/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts similarity index 91% rename from packages/core/src/components/button/test/secondary/button.e2e.ts rename to packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts index 52c4c3a4a..cbbd0ae87 100644 --- a/packages/core/src/components/button/test/secondary/button.e2e.ts +++ b/packages/core/src/components/button/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/packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png b/packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png similarity index 100% rename from packages/core/src/components/button/test/secondary/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png rename to packages/core/src/components/button/test/secondary/unspecified/button.e2e.ts-snapshots/tds-button-secondary-renders-secondary-button-correctly-1-linux.png diff --git a/packages/core/src/components/button/test/secondary/index.html b/packages/core/src/components/button/test/secondary/unspecified/index.html similarity index 100% rename from packages/core/src/components/button/test/secondary/index.html rename to packages/core/src/components/button/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 new file mode 100644 index 000000000..d780ee288 --- /dev/null +++ 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/packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-expect-to-render-a-horizontal-divider-1-linux.png b/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png similarity index 70% rename from packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-expect-to-render-a-horizontal-divider-1-linux.png rename to packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png index 88935139c..7766febba 100644 Binary files a/packages/core/src/components/divider/test/horizontal/divider.e2e.ts-snapshots/tds-divider-expect-to-render-a-horizontal-divider-1-linux.png and b/packages/core/src/components/checkbox/test/default/darkmode/checkbox.e2e.ts-snapshots/tds-checkbox-darkmode-renders-basic-checkbox-correctly-1-linux.png differ diff --git a/packages/core/src/components/checkbox/test/default/darkmode/index.html b/packages/core/src/components/checkbox/test/default/darkmode/index.html new file mode 100644 index 000000000..e0e1d5fc5 --- /dev/null +++ b/packages/core/src/components/checkbox/test/default/darkmode/index.html @@ -0,0 +1,19 @@ + + + + + Checkbox - Default + + + + + + + + Label + + + diff --git a/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts similarity index 88% rename from packages/core/src/components/checkbox/test/default/checkbox.e2e.ts rename to packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts index b0426c6ab..1d412f214 100644 --- a/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts +++ b/packages/core/src/components/checkbox/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/packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-renders-basic-checkbox-correctly-1-linux.png b/packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png similarity index 100% rename from packages/core/src/components/checkbox/test/default/checkbox.e2e.ts-snapshots/tds-checkbox-renders-basic-checkbox-correctly-1-linux.png rename to packages/core/src/components/checkbox/test/default/lightmode/checkbox.e2e.ts-snapshots/tds-checkbox-lightmode-renders-basic-checkbox-correctly-1-linux.png diff --git a/packages/core/src/components/checkbox/test/default/index.html b/packages/core/src/components/checkbox/test/default/lightmode/index.html similarity index 71% rename from packages/core/src/components/checkbox/test/default/index.html rename to packages/core/src/components/checkbox/test/default/lightmode/index.html index aeebf8d87..4672162a2 100644 --- a/packages/core/src/components/checkbox/test/default/index.html +++ b/packages/core/src/components/checkbox/test/default/lightmode/index.html @@ -4,9 +4,9 @@ Checkbox - Default - + diff --git a/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts b/packages/core/src/components/checkbox/test/disabled/checkbox.e2e.ts index 4fdd3488f..07123a5b1 100644 --- 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 index bbefff321..07a525b9a 100644 --- 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/packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts b/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts similarity index 61% rename from packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts rename to packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts index 0a24acc20..23bdf1b3a 100644 --- a/packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts +++ b/packages/core/src/components/divider/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/packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts-snapshots/tds-divider-expect-to-render-a-divider-in-darkmode-1-linux.png b/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-in-darkmode-1-linux.png similarity index 82% rename from packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts-snapshots/tds-divider-expect-to-render-a-divider-in-darkmode-1-linux.png rename to packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-in-darkmode-1-linux.png index b5558363e..ca411e349 100644 Binary files a/packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts-snapshots/tds-divider-expect-to-render-a-divider-in-darkmode-1-linux.png and b/packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts-snapshots/tds-divider-darkmode-expect-to-render-a-divider-in-darkmode-1-linux.png differ diff --git a/packages/core/src/components/divider/test/darkmode/index.html b/packages/core/src/components/divider/test/horizontal/darkmode/index.html similarity index 52% rename from packages/core/src/components/divider/test/darkmode/index.html rename to packages/core/src/components/divider/test/horizontal/darkmode/index.html index aa0c7d117..82e1fb230 100644 --- a/packages/core/src/components/divider/test/darkmode/index.html +++ b/packages/core/src/components/divider/test/horizontal/darkmode/index.html @@ -2,16 +2,16 @@ - Divider - Horizontal, dark mode + Divider - Horizontal, darkmode - + - + diff --git a/packages/core/src/components/divider/test/horizontal/divider.e2e.ts b/packages/core/src/components/divider/test/horizontal/divider.e2e.ts deleted file mode 100644 index a4b714290..000000000 --- a/packages/core/src/components/divider/test/horizontal/divider.e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { test } from 'stencil-playwright'; -import { expect } from '@playwright/test'; - -const componentTestPath = 'src/components/divider/test/horizontal/index.html'; - -test.describe.parallel('tds-divider', () => { - test('expect to render a horizontal divider', async ({ page }) => { - await page.goto(componentTestPath); - - // expect width to be greater than height - const divider = page.getByTestId('divider').locator('div.divider').first(); - const box = await divider.boundingBox(); - expect(box.width).toBeGreaterThan(box.height); - - /* Check diff on screenshot */ - await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); - }); -}); 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 new file mode 100644 index 000000000..438cd9995 --- /dev/null +++ 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/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png b/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png new file mode 100644 index 000000000..9dd2725e5 Binary files /dev/null and b/packages/core/src/components/divider/test/horizontal/lightmode/divider.e2e.ts-snapshots/tds-divider-lightmode-expect-to-render-a-divider-in-lightmode-1-linux.png differ diff --git a/packages/core/src/components/divider/test/horizontal/index.html b/packages/core/src/components/divider/test/horizontal/lightmode/index.html similarity index 57% rename from packages/core/src/components/divider/test/horizontal/index.html rename to packages/core/src/components/divider/test/horizontal/lightmode/index.html index 70c74ef4c..826721f20 100644 --- a/packages/core/src/components/divider/test/horizontal/index.html +++ b/packages/core/src/components/divider/test/horizontal/lightmode/index.html @@ -2,16 +2,16 @@ - Divider - Horizontal + Divider - Horizontal, lightmode - + - + diff --git a/packages/core/src/components/divider/test/vertical/divider.e2e.ts b/packages/core/src/components/divider/test/vertical/divider.e2e.ts index acf327279..2e9eb07ef 100644 --- a/packages/core/src/components/divider/test/vertical/divider.e2e.ts +++ b/packages/core/src/components/divider/test/vertical/divider.e2e.ts @@ -4,9 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/divider/test/vertical/index.html'; test.describe.parallel('tds-divider', () => { - test('expect to render a vertical divider', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + test('expect to render a vertical divider', async ({ page }) => { // expect height to be greater than width const divider = page.getByTestId('divider').locator('div.divider').first(); const box = await divider.boundingBox(); diff --git a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts index a3ff9916b..ed305ae29 100644 --- a/packages/core/src/components/dropdown/test/basic/dropdown.e2e.ts +++ b/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(); diff --git a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts index 94561ae3e..eec920162 100644 --- a/packages/core/src/components/dropdown/test/default/disabled/dropdown.e2e.ts +++ b/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 */ diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts new file mode 100644 index 000000000..056528eb2 --- /dev/null +++ b/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 }); + }); +}); diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png new file mode 100644 index 000000000..92ff43973 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-e1a7e--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..c94a82d29 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..fae1c4c87 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png new file mode 100644 index 000000000..72d8259c0 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-darkmode-renders-default-dropdown-correctly-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html b/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html new file mode 100644 index 000000000..6bbc38b71 --- /dev/null +++ b/packages/core/src/components/dropdown/test/default/primary/darkmode/index.html @@ -0,0 +1,32 @@ + + + + + Dropdown - Default + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts new file mode 100644 index 000000000..4b954f02d --- /dev/null +++ b/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 }); + }); +}); diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png new file mode 100644 index 000000000..571de187b Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clickin-65615--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..617aca6ea Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..0ac02ffbb Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png new file mode 100644 index 000000000..abb042f08 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/primary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-primary-lightmode-renders-default-dropdown-correctly-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html b/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html new file mode 100644 index 000000000..941481925 --- /dev/null +++ b/packages/core/src/components/dropdown/test/default/primary/lightmode/index.html @@ -0,0 +1,32 @@ + + + + + Dropdown - Default + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts new file mode 100644 index 000000000..f941e8c35 --- /dev/null +++ b/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 }); + }); +}); diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png new file mode 100644 index 000000000..5db76cffd Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicki-e1e41--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..cf32e489e Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..109e0c6dc Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png new file mode 100644 index 000000000..37913672a Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/darkmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-darkmode-renders-default-dropdown-correctly-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html b/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html new file mode 100644 index 000000000..ef8edc749 --- /dev/null +++ b/packages/core/src/components/dropdown/test/default/secondary/darkmode/index.html @@ -0,0 +1,32 @@ + + + + + Dropdown - Default + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts new file mode 100644 index 000000000..951e0370f --- /dev/null +++ b/packages/core/src/components/dropdown/test/default/secondary/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/secondary/lightmode/index.html'; + +test.describe.parallel('tds-dropdown-default-secondary-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 }); + }); +}); diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png new file mode 100644 index 000000000..b91a774d8 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-click-ec84f--opens-the-dropdown-list-then-click-Option-1-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..93461fd52 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png new file mode 100644 index 000000000..b29c17644 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png new file mode 100644 index 000000000..bca1ac5a6 Binary files /dev/null and b/packages/core/src/components/dropdown/test/default/secondary/lightmode/dropdown.e2e.ts-snapshots/tds-dropdown-default-secondary-lightmode-renders-default-dropdown-correctly-1-linux.png differ diff --git a/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html b/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html new file mode 100644 index 000000000..ae7a93e99 --- /dev/null +++ b/packages/core/src/components/dropdown/test/default/secondary/lightmode/index.html @@ -0,0 +1,32 @@ + + + + + Dropdown - Default + + + + + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts similarity index 93% rename from packages/core/src/components/dropdown/test/default/dropdown.e2e.ts rename to packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts index fcaa30b45..43dd2b7f7 100644 --- a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts @@ -1,11 +1,14 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; -const componentTestPath = 'src/components/dropdown/test/default/index.html'; +const componentTestPath = 'src/components/dropdown/test/default/unspecified/index.html'; test.describe.parallel('tds-dropdown-default', () => { - test('renders default dropdown correctly', async ({ page }) => { + 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); @@ -14,25 +17,21 @@ test.describe.parallel('tds-dropdown-default', () => { }); test('should find label and be visible', async ({ page }) => { - await page.goto(componentTestPath); const labelText = page.getByText(/Label text/); await expect(labelText).toBeVisible(); }); test('find helper text and check if visible', async ({ page }) => { - await page.goto(componentTestPath); const helperText = page.getByText(/Helper text/); await expect(helperText).toBeVisible(); }); test('have the placeholder="Placeholder" text', async ({ page }) => { - await page.goto(componentTestPath); const dropdownButton = page.getByRole('button', { name: 'Placeholder' }); await expect(dropdownButton).toBeVisible(); }); test('clicking the dropdown button opens the dropdown-list', async ({ page }) => { - await page.goto(componentTestPath); const dropdownButton = page.getByRole('button', { name: 'Placeholder' }); const dropdownListElementOne = page .locator('tds-dropdown-option') @@ -49,8 +48,6 @@ test.describe.parallel('tds-dropdown-default', () => { }); test('clicking the dropdown opens the dropdown-list, then click Option 1', async ({ page }) => { - await page.goto(componentTestPath); - /* click the dropdown button */ const dropdownButton = page.getByRole('button', { name: 'Placeholder' }); await dropdownButton.click(); @@ -73,7 +70,6 @@ test.describe.parallel('tds-dropdown-default', () => { test('clicking the dropdown opens the dropdown-list, then click an option 2 that is disabled should not close it', async ({ page, }) => { - await page.goto(componentTestPath); const dropdownListElementTwoButton = page .locator('tds-dropdown-option') .filter({ hasText: /Option 2/ }); @@ -94,7 +90,6 @@ test.describe.parallel('tds-dropdown-default', () => { await expect(dropdownListElementTwoButton).toBeVisible(); }); test('focusElement() method focus and opens the dropdown-list', async ({ page }) => { - await page.goto(componentTestPath); const dropdownButton = page.getByRole('button').first(); const dropdownListElementOne = page .locator('tds-dropdown-option') diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png similarity index 100% rename from packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png rename to packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-button-opens-the-dropdown-list-1-linux.png diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png similarity index 100% rename from packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png rename to packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-clicking-the-dropdown-opens-the-dropdown-list-then-click-Option-1-1-linux.png diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png similarity index 100% rename from packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png rename to packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-focusElement-method-focus-and-opens-the-dropdown-list-1-linux.png diff --git a/packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png b/packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png similarity index 100% rename from packages/core/src/components/dropdown/test/default/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png rename to packages/core/src/components/dropdown/test/default/unspecified/dropdown.e2e.ts-snapshots/tds-dropdown-default-renders-default-dropdown-correctly-1-linux.png diff --git a/packages/core/src/components/dropdown/test/default/index.html b/packages/core/src/components/dropdown/test/default/unspecified/index.html similarity index 84% rename from packages/core/src/components/dropdown/test/default/index.html rename to packages/core/src/components/dropdown/test/default/unspecified/index.html index 910905d34..79cbf84bc 100644 --- a/packages/core/src/components/dropdown/test/default/index.html +++ b/packages/core/src/components/dropdown/test/default/unspecified/index.html @@ -4,9 +4,9 @@ Dropdown - Default - + diff --git a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts index 740aee41e..a0f1f3c93 100644 --- a/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/error/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/error/index.html'; test.describe.parallel('tds-dropdown-error', () => { - test('renders error dropdown correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders error dropdown correctly', async ({ page }) => { const dropdown = page.getByTestId('tds-dropdown-testid'); await expect(dropdown).toHaveCount(1); @@ -14,7 +17,6 @@ test.describe.parallel('tds-dropdown-error', () => { }); test('find helper text and check if visible and have icon', async ({ page }) => { - await page.goto(componentTestPath); const helperText = page.getByText(/Helper text/); await expect(helperText).toBeVisible(); const helperTextIcon = helperText.getByRole('img'); @@ -22,7 +24,6 @@ test.describe.parallel('tds-dropdown-error', () => { }); test('clicking the dropdown opens the dropdown-list', async ({ page }) => { - await page.goto(componentTestPath); const dropdownListElementOneButton = page .locator('tds-dropdown-option') .filter({ hasText: /Option 1/ }) diff --git a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts index 1c0d84072..7547fb14c 100644 --- a/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/filter/disabled/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/filter/disabled/index.html'; test.describe('tds-dropdown-filter-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('.menu-icon'); const dropdownListElementOne = page @@ -24,7 +27,6 @@ test.describe('tds-dropdown-filter-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('textbox').first(); /* check that the icon is inside of a disabled element */ diff --git a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts index 2a417af88..1a30f576d 100644 --- a/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/filter/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/filter/index.html'; test.describe.parallel('tds-dropdown-filter', () => { - test('renders filter dropdown correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders filter dropdown correctly', async ({ page }) => { const dropdown = page.getByTestId('tds-dropdown-testid'); await expect(dropdown).toHaveCount(1); @@ -16,8 +19,6 @@ test.describe.parallel('tds-dropdown-filter', () => { test('clicking the dropdown opens the dropdown-list, then start typing "iles" to only show that option in the dropdown list', async ({ page, }) => { - await page.goto(componentTestPath); - const inputElement = page.getByRole('textbox'); const dropdownListElementOneButton = page .locator('tds-dropdown-option') @@ -75,8 +76,6 @@ test.describe.parallel('tds-dropdown-filter', () => { }); test('reset button icon appears when typing in the filter input', async ({ page }) => { - await page.goto(componentTestPath); - const inputElement = page.getByRole('textbox'); const resetButton = page.locator('tds-icon[name="cross"]'); @@ -98,8 +97,6 @@ test.describe.parallel('tds-dropdown-filter', () => { }); test('toggle dropdown visibility and select option two', async ({ page }) => { - await page.goto(componentTestPath); - const inputElement = page.getByRole('textbox'); const dropdownListElementTwoButton = page .locator('tds-dropdown-option') diff --git a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts index 243218ab0..005b5998c 100644 --- a/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/filter/hide-no-result-message/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/filter/hide-no-result-message/index.html'; test.describe('tds-dropdown-filter', () => { - test('renders filter dropdown correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders filter dropdown correctly', async ({ page }) => { const dropdown = page.getByTestId('tds-dropdown-testid'); await expect(dropdown).toHaveCount(1); @@ -14,8 +17,6 @@ test.describe('tds-dropdown-filter', () => { }); test('typing non existing value does not show "No results!" message', async ({ page }) => { - await page.goto(componentTestPath); - const inputElement = page.getByRole('textbox'); /* Add text and only Option 1 should be visible */ diff --git a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts index a04401976..fe164793c 100644 --- a/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/filter/normalize-text-false/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/filter/normalize-text-false/index.html'; test.describe('tds-dropdown-filter', () => { - test('renders filter dropdown correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders filter dropdown correctly', async ({ page }) => { const dropdown = page.getByTestId('tds-dropdown-testid'); await expect(dropdown).toHaveCount(1); @@ -16,8 +19,6 @@ test.describe('tds-dropdown-filter', () => { test('typing "iles" should not show anything in dropdown with normalize text set to false', async ({ page, }) => { - await page.goto(componentTestPath); - const inputElement = page.getByRole('textbox'); const dropdownListElementOneButton = page .locator('tds-dropdown-option') diff --git a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts index d79678822..f1448f6f3 100644 --- a/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/multiselect-filter/dropdown.e2e.ts @@ -4,9 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/multiselect-filter/index.html'; test.describe.parallel('tds-dropdown-multiselect-filter', () => { - test('When focusing on the input it should clear itself', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + test('When focusing on the input it should clear itself', async ({ page }) => { // Click the dropdown button const dropdownButton = page.locator('tds-icon[aria-label="Open/Close dropdown"]'); await dropdownButton.click(); diff --git a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts index 83e9ac4a7..58d4c431c 100644 --- a/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/multiselect/disabled/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/multiselect/disabled/index.html'; test.describe('tds-dropdown-multiselect-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('tds-dropdown-multiselect-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 */ diff --git a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts index 88cefa2cd..e38e2d285 100644 --- a/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts +++ b/packages/core/src/components/dropdown/test/multiselect/dropdown.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/dropdown/test/multiselect/index.html'; test.describe.parallel('tds-dropdown-multiselect', () => { - test('renders multiselect dropdown correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders multiselect dropdown correctly', async ({ page }) => { const dropdown = page.getByTestId('tds-dropdown-testid'); await expect(dropdown).toHaveCount(1); @@ -16,8 +19,6 @@ test.describe.parallel('tds-dropdown-multiselect', () => { test('clicking the dropdown opens the dropdown-list, then click Option 1, should not close it', async ({ page, }) => { - await page.goto(componentTestPath); - /* click the dropdown button */ const dropdownButton = page.getByRole('button', { name: 'Placeholder' }); await dropdownButton.click(); @@ -39,8 +40,6 @@ test.describe.parallel('tds-dropdown-multiselect', () => { test('clicking the dropdown opens the dropdown-list, then click on all the options', async ({ page, }) => { - await page.goto(componentTestPath); - /* click the button */ const dropdownButton = page.getByRole('button', { name: 'Placeholder' }); await dropdownButton.click();