Skip to content

Commit 10b1438

Browse files
committed
test(divider): refactor and update existing horizontal lightmode and darkmode tests
1 parent fafe9c7 commit 10b1438

File tree

7 files changed

+23
-28
lines changed

7 files changed

+23
-28
lines changed

packages/core/src/components/divider/test/darkmode/darkmode.e2e.ts renamed to packages/core/src/components/divider/test/horizontal/darkmode/divider.e2e.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { test } from 'stencil-playwright';
22
import { expect } from '@playwright/test';
33

4-
const componentTestPath = 'src/components/divider/test/darkmode/index.html';
4+
const componentTestPath = 'src/components/divider/test/horizontal/darkmode/index.html';
55

6-
test.describe.parallel('tds-divider', () => {
6+
test.describe.parallel('tds-divider-darkmode', () => {
77
test('expect to render a divider in darkmode', async ({ page }) => {
88
await page.goto(componentTestPath);
99

packages/core/src/components/divider/test/darkmode/index.html renamed to packages/core/src/components/divider/test/horizontal/darkmode/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Divider - Horizontal, dark mode</title>
5+
<title>Divider - Horizontal, darkmode</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7-
<link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
7+
<link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
88
<script type="module">
9-
import { defineCustomElements } from '../../../../../loader/index.es2017.js';
9+
import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
1010
defineCustomElements();
1111
</script>
1212
</head>
1313

14-
<body class="tds-mode-dark" style="padding: 20px; height: 300px;">
14+
<body class="tds-mode-dark" style="background-color: var(--tds-grey-958); padding: 20px">
1515
<tds-divider data-testid="divider"></tds-divider>
1616
</body>
1717
</html>

packages/core/src/components/divider/test/horizontal/divider.e2e.ts

Lines changed: 0 additions & 18 deletions
This file was deleted.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { test } from 'stencil-playwright';
2+
import { expect } from '@playwright/test';
3+
4+
const componentTestPath = 'src/components/divider/test/horizontal/lightmode/index.html';
5+
6+
test.describe.parallel('tds-divider-lightmode', () => {
7+
test('expect to render a divider in lightmode', async ({ page }) => {
8+
await page.goto(componentTestPath);
9+
10+
/* Check diff on screenshot */
11+
await expect(page).toHaveScreenshot({ maxDiffPixels: 0 });
12+
});
13+
});

packages/core/src/components/divider/test/horizontal/index.html renamed to packages/core/src/components/divider/test/horizontal/lightmode/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Divider - Horizontal</title>
5+
<title>Divider - Horizontal, lightmode</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
7-
<link rel="stylesheet" href="../../../../../dist/tegel/tegel.css" />
7+
<link rel="stylesheet" href="../../../../../../dist/tegel/tegel.css" />
88
<script type="module">
9-
import { defineCustomElements } from '../../../../../loader/index.es2017.js';
9+
import { defineCustomElements } from '../../../../../../loader/index.es2017.js';
1010
defineCustomElements();
1111
</script>
1212
</head>
1313

14-
<body style="padding: 20px; width: 300px;">
14+
<body style="padding: 20px">
1515
<tds-divider data-testid="divider"></tds-divider>
1616
</body>
1717
</html>

0 commit comments

Comments
 (0)