Skip to content

Commit 9eeee12

Browse files
web-padawanweb-padawan
authored
test: add visual regression tests (#131)
1 parent 56389b3 commit 9eeee12

File tree

846 files changed

+11722
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

846 files changed

+11722
-103
lines changed

‎.github/workflows/lumo.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Lumo
2+
3+
on: pull_request
4+
5+
jobs:
6+
tests:
7+
name: Visual tests
8+
runs-on: ubuntu-latest
9+
if: github.repository_owner == 'vaadin'
10+
11+
steps:
12+
- uses: actions/checkout@v2
13+
with:
14+
fetch-depth: "0"
15+
16+
- name: Setup Node 14.x
17+
uses: actions/setup-node@v2
18+
with:
19+
node-version: 14.x
20+
21+
- uses: actions/cache@v2
22+
with:
23+
path: |
24+
node_modules
25+
*/*/node_modules
26+
key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
27+
28+
- name: Install Dependencies
29+
run: yarn --frozen-lockfile --no-progress --non-interactive
30+
31+
- name: Visual tests
32+
env:
33+
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
34+
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
35+
run: yarn test:lumo

‎.github/workflows/material.yml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Material
2+
3+
on: pull_request
4+
5+
jobs:
6+
tests:
7+
name: Visual tests
8+
runs-on: ubuntu-latest
9+
if: github.repository_owner == 'vaadin'
10+
11+
steps:
12+
- uses: actions/checkout@v2
13+
with:
14+
fetch-depth: "0"
15+
16+
- name: Setup Node 14.x
17+
uses: actions/setup-node@v2
18+
with:
19+
node-version: 14.x
20+
21+
- uses: actions/cache@v2
22+
with:
23+
path: |
24+
node_modules
25+
*/*/node_modules
26+
key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
27+
28+
- name: Install Dependencies
29+
run: yarn --frozen-lockfile --no-progress --non-interactive
30+
31+
- name: Visual tests
32+
env:
33+
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
34+
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
35+
run: yarn test:material

‎package.json‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,18 @@
2626
"preversion": "node scripts/updateVersion.js",
2727
"test": "web-test-runner --coverage",
2828
"test:firefox": "web-test-runner --config web-test-runner-firefox.config.js",
29-
"test:webkit": "web-test-runner --config web-test-runner-webkit.config.js"
29+
"test:lumo": "web-test-runner --config web-test-runner-lumo.config.js",
30+
"test:material": "web-test-runner --config web-test-runner-material.config.js",
31+
"test:webkit": "web-test-runner --config web-test-runner-webkit.config.js",
32+
"update:lumo": "TEST_ENV=update web-test-runner --config web-test-runner-lumo.config.js",
33+
"update:material": "TEST_ENV=update web-test-runner --config web-test-runner-material.config.js"
3034
},
3135
"devDependencies": {
32-
"@web/test-runner": "^0.12.14",
36+
"@vaadin/testing-helpers": "^0.1.3",
37+
"@web/test-runner": "^0.12.17",
3338
"@web/test-runner-playwright": "^0.8.4",
39+
"@web/test-runner-saucelabs": "^0.5.0",
40+
"@web/test-runner-visual-regression": "^0.5.1",
3441
"eslint": "^7.21.0",
3542
"eslint-config-prettier": "^8.1.0",
3643
"eslint-plugin-prettier": "^3.3.1",

‎packages/vaadin-accordion/test/visual/lumo/accordion.test.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/lumo/vaadin-accordion.js';
4+
5+
describe('accordion', () => {
6+
let div, element;
7+
8+
beforeEach(() => {
9+
div = document.createElement('div');
10+
div.style.padding = '10px';
11+
12+
element = fixtureSync(
13+
`
14+
<vaadin-accordion>
15+
<vaadin-accordion-panel>
16+
<div slot="summary">Panel 1</div>
17+
<div>Content 1</div>
18+
</vaadin-accordion-panel>
19+
<vaadin-accordion-panel>
20+
<div slot="summary">Panel 2</div>
21+
<div>Content 2</div>
22+
</vaadin-accordion-panel>
23+
<vaadin-accordion-panel>
24+
<div slot="summary">Panel 3</div>
25+
<div>Content 3</div>
26+
</vaadin-accordion-panel>
27+
</vaadin-accordion>
28+
`,
29+
div
30+
);
31+
});
32+
33+
it('opened-start', async () => {
34+
await visualDiff(div, 'accordion:opened-start');
35+
});
36+
37+
it('opened-middle', async () => {
38+
element.opened = 1;
39+
await visualDiff(div, 'accordion:opened-middle');
40+
});
41+
42+
it('opened-end', async () => {
43+
element.opened = 2;
44+
await visualDiff(div, 'accordion:opened-end');
45+
});
46+
47+
it('closed', async () => {
48+
element.opened = null;
49+
await visualDiff(div, 'accordion:closed');
50+
});
51+
});

‎packages/vaadin-accordion/test/visual/material/accordion.test.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/material/vaadin-accordion.js';
4+
5+
describe('accordion', () => {
6+
let div, element;
7+
8+
beforeEach(() => {
9+
div = document.createElement('div');
10+
div.style.padding = '10px';
11+
12+
element = fixtureSync(
13+
`
14+
<vaadin-accordion>
15+
<vaadin-accordion-panel>
16+
<div slot="summary">Panel 1</div>
17+
<div>Content 1</div>
18+
</vaadin-accordion-panel>
19+
<vaadin-accordion-panel>
20+
<div slot="summary">Panel 2</div>
21+
<div>Content 2</div>
22+
</vaadin-accordion-panel>
23+
<vaadin-accordion-panel>
24+
<div slot="summary">Panel 3</div>
25+
<div>Content 3</div>
26+
</vaadin-accordion-panel>
27+
</vaadin-accordion>
28+
`,
29+
div
30+
);
31+
});
32+
33+
it('opened-start', async () => {
34+
await visualDiff(div, 'accordion:opened-start');
35+
});
36+
37+
it('opened-middle', async () => {
38+
element.opened = 1;
39+
await visualDiff(div, 'accordion:opened-middle');
40+
});
41+
42+
it('opened-end', async () => {
43+
element.opened = 2;
44+
await visualDiff(div, 'accordion:opened-end');
45+
});
46+
47+
it('closed', async () => {
48+
element.opened = null;
49+
await visualDiff(div, 'accordion:closed');
50+
});
51+
});

‎packages/vaadin-app-layout/test/visual/lumo/app-layout.test.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/lumo/vaadin-app-layout.js';
4+
import '../../../theme/lumo/vaadin-drawer-toggle.js';
5+
6+
describe('app-layout', () => {
7+
let div, element;
8+
9+
beforeEach(() => {
10+
div = document.createElement('div');
11+
div.style.height = '100%';
12+
13+
element = fixtureSync(
14+
`
15+
<vaadin-app-layout>
16+
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
17+
<h2 slot="navbar">App Name</h2>
18+
<section slot="drawer">Drawer content</section>
19+
<main>Page content</main>
20+
</vaadin-app-layout>
21+
`,
22+
div
23+
);
24+
});
25+
26+
['ltr', 'rtl'].forEach((dir) => {
27+
describe(dir, () => {
28+
before(() => {
29+
document.documentElement.setAttribute('dir', dir);
30+
});
31+
32+
after(() => {
33+
document.documentElement.removeAttribute('dir');
34+
});
35+
36+
it('basic', async () => {
37+
await visualDiff(div, `app-layout:${dir}-basic`);
38+
});
39+
40+
it('primary-drawer', async () => {
41+
element.primarySection = 'drawer';
42+
await visualDiff(div, `app-layout:${dir}-primary-drawer`);
43+
});
44+
});
45+
});
46+
});

‎packages/vaadin-app-layout/test/visual/material/app-layout.test.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/material/vaadin-app-layout.js';
4+
import '../../../theme/material/vaadin-drawer-toggle.js';
5+
6+
describe('app-layout', () => {
7+
let div, element;
8+
9+
beforeEach(() => {
10+
div = document.createElement('div');
11+
div.style.height = '100%';
12+
13+
element = fixtureSync(
14+
`
15+
<vaadin-app-layout>
16+
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
17+
<h2 slot="navbar">App Name</h2>
18+
<section slot="drawer">Drawer content</section>
19+
<main>Page content</main>
20+
</vaadin-app-layout>
21+
`,
22+
div
23+
);
24+
});
25+
26+
['ltr', 'rtl'].forEach((dir) => {
27+
describe(dir, () => {
28+
before(() => {
29+
document.documentElement.setAttribute('dir', dir);
30+
});
31+
32+
after(() => {
33+
document.documentElement.removeAttribute('dir');
34+
});
35+
36+
it('basic', async () => {
37+
await visualDiff(div, `app-layout:${dir}-basic`);
38+
});
39+
40+
it('primary-drawer', async () => {
41+
element.primarySection = 'drawer';
42+
await visualDiff(div, `app-layout:${dir}-primary-drawer`);
43+
});
44+
});
45+
});
46+
});

‎packages/vaadin-avatar/test/visual/lumo/avatar-group.test.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/lumo/vaadin-avatar-group.js';
4+
5+
describe('avatar-group', () => {
6+
let div, element;
7+
8+
beforeEach(() => {
9+
div = document.createElement('div');
10+
div.style.display = 'inline-block';
11+
div.style.padding = '10px';
12+
element = fixtureSync('<vaadin-avatar-group></vaadin-avatar-group>', div);
13+
});
14+
15+
it('basic', async () => {
16+
element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
17+
await visualDiff(div, 'avatar-group:basic');
18+
});
19+
20+
it('max-items-visible', async () => {
21+
element.maxItemsVisible = 3;
22+
element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
23+
await visualDiff(div, 'avatar-group:max-items-visible');
24+
});
25+
26+
it('color-index', async () => {
27+
element.items = [
28+
{ colorIndex: 0 },
29+
{ abbr: '11', colorIndex: 1 },
30+
{ abbr: '22', colorIndex: 2 },
31+
{ abbr: '33', colorIndex: 3 },
32+
{ abbr: '44', colorIndex: 4 },
33+
{ abbr: '55', colorIndex: 5 },
34+
{ abbr: '66', colorIndex: 6 }
35+
];
36+
await visualDiff(div, 'avatar-group:color-index');
37+
});
38+
39+
it('opened', async () => {
40+
document.body.style.height = '200px';
41+
document.body.style.width = '220px';
42+
element.maxItemsVisible = 3;
43+
element.items = [{ name: 'Abc Def' }, { name: 'Ghi Jkl' }, { name: 'Mno Pqr' }, { name: 'Stu Vwx' }];
44+
element.$.overflow.click();
45+
await nextRender(element);
46+
await visualDiff(document.body, 'avatar-group:opened');
47+
});
48+
});

‎packages/vaadin-avatar/test/visual/lumo/avatar.test.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
2+
import { visualDiff } from '@web/test-runner-visual-regression';
3+
import '../../../theme/lumo/vaadin-avatar.js';
4+
5+
describe('avatar', () => {
6+
let div, element;
7+
8+
beforeEach(() => {
9+
div = document.createElement('div');
10+
div.style.display = 'inline-block';
11+
div.style.padding = '10px';
12+
element = fixtureSync('<vaadin-avatar></vaadin-avatar>', div);
13+
});
14+
15+
it('basic', async () => {
16+
await visualDiff(div, 'avatar:basic');
17+
});
18+
19+
it('name', async () => {
20+
element.name = 'Foo Bar';
21+
await visualDiff(div, 'avatar:name');
22+
});
23+
24+
it('name', async () => {
25+
element.abbr = 'YY';
26+
await visualDiff(div, 'avatar:abbr');
27+
});
28+
29+
it('img', async () => {
30+
/* prettier-ignore */
31+
element.img = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+PHBhdGggZmlsbD0iIzAyMDIwMSIgZD0iTTQ1NC40MjYgMzkyLjU4MmMtNS40MzktMTYuMzItMTUuMjk4LTMyLjc4Mi0yOS44MzktNDIuMzYyLTI3Ljk3OS0xOC41NzItNjAuNTc4LTI4LjQ3OS05Mi4wOTktMzkuMDg1LTcuNjA0LTIuNjY0LTE1LjMzLTUuNTY4LTIyLjI3OS05LjctNi4yMDQtMy42ODYtOC41MzMtMTEuMjQ2LTkuOTc0LTE3Ljg4Ni0uNjM2LTMuNTEyLTEuMDI2LTcuMTE2LTEuMjI4LTEwLjY2MSAyMi44NTctMzEuMjY3IDM4LjAxOS04Mi4yOTUgMzguMDE5LTEyNC4xMzYgMC02NS4yOTgtMzYuODk2LTgzLjQ5NS04Mi40MDItODMuNDk1LTQ1LjUxNSAwLTgyLjQwMyAxOC4xNy04Mi40MDMgODMuNDY4IDAgNDMuMzM4IDE2LjI1NSA5Ni41IDQwLjQ4OSAxMjcuMzgzLS4yMjEgMi40MzgtLjUxMSA0Ljg3Ni0uOTUgNy4zMDMtMS40NDQgNi42MzktMy43NyAxNC4wNTgtOS45NyAxNy43NDMtNi45NTcgNC4xMzMtMTQuNjgyIDYuNzU2LTIyLjI4NyA5LjQyLTMxLjUyMSAxMC42MDUtNjQuMTE5IDE5Ljk1Ny05Mi4wOTEgMzguNTI5LTE0LjU0OSA5LjU4LTI0LjQwMyAyNy4xNTktMjkuODM4IDQzLjQ3OS01LjU5NyAxNi45MzgtNy44ODYgMzcuOTE3LTcuNTQxIDU0LjkxN2g0MTEuOTMyYy4zNDgtMTYuOTk5LTEuOTQ2LTM3Ljk3OC03LjUzOS01NC45MTd6Ii8+PC9zdmc+Cg==';
32+
await visualDiff(div, 'avatar:img');
33+
});
34+
35+
it('color-index', async () => {
36+
element.colorIndex = '0';
37+
await visualDiff(div, 'avatar:color-index');
38+
});
39+
40+
it('theme-xlarge', async () => {
41+
element.setAttribute('theme', 'xlarge');
42+
await visualDiff(div, 'avatar:theme-xlarge');
43+
});
44+
45+
it('theme-large', async () => {
46+
element.setAttribute('theme', 'large');
47+
await visualDiff(div, 'avatar:theme-large');
48+
});
49+
50+
it('theme-small', async () => {
51+
element.setAttribute('theme', 'small');
52+
await visualDiff(div, 'avatar:theme-small');
53+
});
54+
55+
it('theme-xsmall', async () => {
56+
element.setAttribute('theme', 'xsmall');
57+
await visualDiff(div, 'avatar:theme-xsmall');
58+
});
59+
});

0 commit comments

Comments
 (0)