Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(side-menu): add darkmode screenshot tests and refactor folder structure #922

Closed
wants to merge 2 commits into from
Closed

test(side-menu): add darkmode screenshot tests and refactor folder structure #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
386cf92
test(side-menu): add darkmode screenshot test, refactor folder structure
max-umain Dec 16, 2024
a6b87a8
test(side-menu): refactor tests to use beforeEach for page navigation
max-umain Dec 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/core/src/components/side-menu/test/collapsible/side-menu.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);
Expand Down
51 changes: 51 additions & 0 deletions packages/core/src/components/side-menu/test/default/darkmode/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Side Menu - 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)">
<tds-side-menu aria-label="Side menu" id="demo-side-menu" persistent>
<tds-side-menu-item>
<button>
<tds-icon name="timer" size="24px"></tds-icon>
About us
</button>
</tds-side-menu-item>

<tds-side-menu-item>
<button>
<tds-icon name="truck" size="24px"></tds-icon>
Trucks
</button>
</tds-side-menu-item>

<tds-side-menu-dropdown default-open selected>
<tds-icon slot="icon" name="profile" size="24px"></tds-icon>
<span slot="label">Wheel types</span>
<tds-side-menu-dropdown-list>
<tds-side-menu-dropdown-list-item>
<a href="https://www.scania.com">Hub-centric wheel</a>
</tds-side-menu-dropdown-list-item>
<tds-side-menu-dropdown-list-item selected>
<a href="https://www.scania.com" aria-current="page">Rim wheel</a>
</tds-side-menu-dropdown-list-item>
</tds-side-menu-dropdown-list>
</tds-side-menu-dropdown>

<tds-side-menu-item>
<button>
<tds-icon name="star" size="24px"></tds-icon>
Values
</button>
</tds-side-menu-item>
</tds-side-menu>
</body>
</html>
19 changes: 19 additions & 0 deletions packages/core/src/components/side-menu/test/default/darkmode/side-menu.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 });
});
});
Binary file added .../tds-side-menu-default-darkmode-renders-default-side-menu-correctly-1-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ponents/side-menu/test/default/index.html → ...de-menu/test/default/lightmode/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<meta charset="UTF-8" />
<title>Side Menu - Default</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
<link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
<script type="module">
import { defineCustomElements } from '../../../../../loader/index.es2017.js';
import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
defineCustomElements();
</script>
</head>
Expand Down
12 changes: 6 additions & 6 deletions ...s/side-menu/test/default/side-menu.e2e.ts → ...u/test/default/lightmode/side-menu.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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 = [];
Expand All @@ -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')
Expand Down
0 ...s-default-side-menu-correctly-1-linux.png → ...s-default-side-menu-correctly-1-linux.png
View file
Open in desktop
File renamed without changes
6 changes: 3 additions & 3 deletions packages/core/src/components/side-menu/test/expand-toggle/expand-toggle.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/);

Expand All @@ -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');
Expand Down
Loading