diff --git a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts index 1f5526931..e7fea520f 100644 --- a/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts +++ b/packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts @@ -4,8 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/side-menu/test/collapsible/index.html'; test.describe.parallel('tds-side-menu-collapsible', () => { - test('renders collapsible side-menu correctly', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders collapsible side-menu correctly', async ({ page }) => { const sideMenuNavigation = page.getByRole('navigation'); await expect(sideMenuNavigation).toHaveCount(1); await expect(sideMenuNavigation).toBeVisible(); @@ -15,14 +18,12 @@ test.describe.parallel('tds-side-menu-collapsible', () => { }); test('collapse button exists on the bottom of side menu', async ({ page }) => { - await page.goto(componentTestPath); const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ }); await expect(sideMenuCollapseButton).toHaveCount(1); await expect(sideMenuCollapseButton).toBeVisible(); }); test('click collapse button to close the menu', async ({ page }) => { - await page.goto(componentTestPath); const sideMenuCollapseButton = page.getByRole('button').filter({ hasText: /Collapse/ }); await sideMenuCollapseButton.click(); await expect(sideMenuCollapseButton).toHaveCount(1); diff --git a/packages/core/src/components/side-menu/test/default/darkmode/index.html b/packages/core/src/components/side-menu/test/default/darkmode/index.html new file mode 100644 index 000000000..22e5a4afc --- /dev/null +++ b/packages/core/src/components/side-menu/test/default/darkmode/index.html @@ -0,0 +1,51 @@ + + + + + Side Menu - Default + + + + + + + + + + + + + + + + + + Wheel types + + + Hub-centric wheel + + + Rim wheel + + + + + + + + + + diff --git a/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts b/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts new file mode 100644 index 000000000..8e7b44cb8 --- /dev/null +++ b/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts @@ -0,0 +1,19 @@ +import { test } from 'stencil-playwright'; +import { expect } from '@playwright/test'; + +const componentTestPath = 'src/components/side-menu/test/default/darkmode/index.html'; + +test.describe.parallel('tds-side-menu-default-darkmode', () => { + test.beforeEach(async ({ page }) => { + await page.goto(componentTestPath); + }); + + test('renders default side-menu correctly', async ({ page }) => { + const sideMenuNavigation = page.getByRole('navigation'); + await expect(sideMenuNavigation).toHaveCount(1); + await expect(sideMenuNavigation).toBeVisible(); + + /* Check diff on screenshot */ + await expect(page).toHaveScreenshot({ maxDiffPixels: 0 }); + }); +}); diff --git a/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png new file mode 100644 index 000000000..401e57e29 Binary files /dev/null and b/packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts-snapshots/tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png differ diff --git a/packages/core/src/components/side-menu/test/default/index.html b/packages/core/src/components/side-menu/test/default/lightmode/index.html similarity index 90% rename from packages/core/src/components/side-menu/test/default/index.html rename to packages/core/src/components/side-menu/test/default/lightmode/index.html index 21d236902..e60b44ff0 100644 --- a/packages/core/src/components/side-menu/test/default/index.html +++ b/packages/core/src/components/side-menu/test/default/lightmode/index.html @@ -4,9 +4,9 @@ Side Menu - Default - + diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts b/packages/core/src/components/side-menu/test/default/lightmode/side-menu.e2e.ts similarity index 91% rename from packages/core/src/components/side-menu/test/default/side-menu.e2e.ts rename to packages/core/src/components/side-menu/test/default/lightmode/side-menu.e2e.ts index 3a94d06c7..a137a0234 100644 --- a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts +++ b/packages/core/src/components/side-menu/test/default/lightmode/side-menu.e2e.ts @@ -1,11 +1,14 @@ import { test } from 'stencil-playwright'; import { expect } from '@playwright/test'; -const componentTestPath = 'src/components/side-menu/test/default/index.html'; +const componentTestPath = 'src/components/side-menu/test/default/lightmode/index.html'; -test.describe.parallel('tds-side-menu-default', () => { - test('renders default side-menu correctly', async ({ page }) => { +test.describe.parallel('tds-side-menu-default-lightmode', () => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + + test('renders default side-menu correctly', async ({ page }) => { const sideMenuNavigation = page.getByRole('navigation'); await expect(sideMenuNavigation).toHaveCount(1); await expect(sideMenuNavigation).toBeVisible(); @@ -15,7 +18,6 @@ test.describe.parallel('tds-side-menu-default', () => { }); test('all side menu buttons to be visible', async ({ page }) => { - await page.goto(componentTestPath); const sideMenuButtons = page.getByRole('button'); await expect(sideMenuButtons).toHaveCount(4); const promises = []; @@ -30,8 +32,6 @@ test.describe.parallel('tds-side-menu-default', () => { test('wheel type list is open by default and under Wheel types there are two sublink', async ({ page, }) => { - await page.goto(componentTestPath); - /* Make sure first list item is there and visible */ const sideMenuWheelTypeListItemOne = page .getByRole('listitem') diff --git a/packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-renders-default-side-menu-correctly-1-linux.png b/packages/core/src/components/side-menu/test/default/lightmode/side-menu.e2e.ts-snapshots/tds-side-menu-default-lightmode-renders-default-side-menu-correctly-1-linux.png similarity index 100% rename from packages/core/src/components/side-menu/test/default/side-menu.e2e.ts-snapshots/tds-side-menu-default-renders-default-side-menu-correctly-1-linux.png rename to packages/core/src/components/side-menu/test/default/lightmode/side-menu.e2e.ts-snapshots/tds-side-menu-default-lightmode-renders-default-side-menu-correctly-1-linux.png diff --git a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts index 0a3dd40d0..14140b656 100644 --- a/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts +++ b/packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts @@ -4,9 +4,11 @@ import { expect } from '@playwright/test'; const componentTestPath = 'src/components/side-menu/test/expand-toggle/index.html'; test.describe.parallel('tds-side-menu-toggle-expand', () => { - test('toggle collapse and expand programmatically', async ({ page }) => { + test.beforeEach(async ({ page }) => { await page.goto(componentTestPath); + }); + test('toggle collapse and expand programmatically', async ({ page }) => { const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper'); await expect(wrapper).toHaveClass(/state-open/); @@ -25,8 +27,6 @@ test.describe.parallel('tds-side-menu-toggle-expand', () => { }); test('collapse programmatically and expand on the UI', async ({ page }) => { - await page.goto(componentTestPath); - const wrapper = await page.locator('tds-side-menu-dropdown > .wrapper'); const dropdown = await page.locator('tds-side-menu-dropdown');