Skip to content

Commit 2d568ee

Browse files
tkrotofftkrotoff
committed
E2E tests thx to Playwright
1 parent 5a2173b commit 2d568ee

16 files changed

Lines changed: 412 additions & 7 deletions

‎.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ module.exports = {
2525
browser: true,
2626
jest: true
2727
},
28+
globals: {
29+
// Jest Playwright, see https://github.com/smooth-code/jest-puppeteer/blob/v4.4.0/README.md#configure-eslint
30+
page: true
31+
},
2832

2933
rules: {
3034
'no-console': 'off',

‎.github/workflows/node.js.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ jobs:
66
build:
77
runs-on: ubuntu-latest
88

9+
# https://github.com/arjun27/playwright-github-actions
10+
container: arjun27/playwright-bionic:0.2.0
11+
912
strategy:
1013
matrix:
1114
node-version: [10.x, 12.x]
@@ -22,5 +25,6 @@ jobs:
2225
- run: npm run build:examples
2326
- run: npm run lint
2427
- run: npm run test:coverage
28+
- run: npm run test:examples
2529
env:
2630
CI: true

‎.github/workflows/npm-publish.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ on:
77
jobs:
88
build:
99
runs-on: ubuntu-latest
10+
11+
# https://github.com/arjun27/playwright-github-actions
12+
container: arjun27/playwright-bionic:0.2.0
13+
1014
steps:
1115
- uses: actions/checkout@v2
1216
- uses: actions/setup-node@v1
@@ -18,6 +22,7 @@ jobs:
1822
- run: npm run build:examples
1923
- run: npm run lint
2024
- run: npm run test:coverage
25+
- run: npm run test:examples
2126

2227
publish-npm:
2328
needs: build

‎examples/Bootstrap4.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66

77
<title>Bootstrap 4 example</title>
8+
9+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
10+
<style>
11+
* {
12+
/* Force Roboto font so Playwright works on all platforms: Mac, Linux, Windows and Docker */
13+
font-family: 'Roboto', sans-serif !important;
14+
}
15+
</style>
816
</head>
917

1018
<body>

‎examples/Bootstrap4.test.e2e.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import path from 'path';
2+
3+
const waitForResize = () => page.waitFor(100);
4+
5+
test('resize', async () => {
6+
await page.goto(`file:${path.join(__dirname, 'build/Bootstrap4.html')}`);
7+
8+
const height = 768;
9+
10+
const firstPersonChildren = await page.$('.people > .person:first-child > .wrap-children');
11+
const children = await firstPersonChildren?.$$(':scope > div')!;
12+
expect(children.length).toEqual(5);
13+
14+
{
15+
await page.setViewportSize({ width: /*1054*/ 1138, height });
16+
await waitForResize();
17+
18+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
19+
expect(classNames).toEqual([
20+
'mb-3 mr-2',
21+
'mb-3 mr-2 flex-fill',
22+
'mb-3 mr-2 flex-fill',
23+
'mb-3 mr-2',
24+
'mb-3 mr-2'
25+
]);
26+
}
27+
28+
{
29+
await page.setViewportSize({ width: 1038, height });
30+
await waitForResize();
31+
32+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
33+
expect(classNames).toEqual([
34+
'mb-3 mr-2',
35+
'mb-3 mr-2 flex-fill',
36+
'mb-3 mr-2 flex-fill',
37+
'mb-3 mr-2 next-is-wrapped',
38+
'mb-3 mr-2'
39+
]);
40+
}
41+
42+
{
43+
await page.setViewportSize({ width: 762 - 15, height });
44+
await waitForResize();
45+
46+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
47+
expect(classNames).toEqual([
48+
'mb-3 mr-2',
49+
'mb-3 mr-2 flex-fill',
50+
'mb-3 mr-2 flex-fill next-is-wrapped',
51+
'mb-3 mr-2',
52+
'mb-3 mr-2'
53+
]);
54+
}
55+
56+
{
57+
await page.setViewportSize({ width: 555 - 15, height });
58+
await waitForResize();
59+
60+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
61+
expect(classNames).toEqual([
62+
'mb-3 mr-2',
63+
'mb-3 mr-2 flex-fill next-is-wrapped',
64+
'mb-3 mr-2 flex-fill',
65+
'mb-3 mr-2 next-is-wrapped',
66+
'mb-3 mr-2'
67+
]);
68+
}
69+
70+
{
71+
await page.setViewportSize({ width: 444 - 15, height });
72+
await waitForResize();
73+
74+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
75+
expect(classNames).toEqual([
76+
'mb-3 mr-2',
77+
'mb-3 mr-2 flex-fill next-is-wrapped',
78+
'mb-3 mr-2 flex-fill next-is-wrapped',
79+
'mb-3 mr-2 next-is-wrapped',
80+
'mb-3 mr-2'
81+
]);
82+
}
83+
84+
{
85+
await page.setViewportSize({ width: 354 - 15, height });
86+
await waitForResize();
87+
88+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
89+
expect(classNames).toEqual([
90+
'mb-3 mr-2 next-is-wrapped',
91+
'mb-3 mr-2 flex-fill next-is-wrapped',
92+
'mb-3 mr-2 flex-fill next-is-wrapped',
93+
'mb-3 mr-2 next-is-wrapped',
94+
'mb-3 mr-2'
95+
]);
96+
}
97+
});

‎examples/Boxes.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66

77
<title>Boxes example</title>
8+
9+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
10+
<style>
11+
* {
12+
/* Force Roboto font so Playwright works on all platforms: Mac, Linux, Windows and Docker */
13+
font-family: 'Roboto', sans-serif !important;
14+
}
15+
</style>
816
</head>
917

1018
<body>

‎examples/Boxes.test.e2e.ts‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import path from 'path';
2+
3+
const waitForResize = () => page.waitFor(100);
4+
5+
test('resize', async () => {
6+
await page.goto(`file:${path.join(__dirname, 'build/Boxes.html')}`);
7+
8+
const height = 768;
9+
10+
const children = await page.$$('.wrap-children, .box');
11+
expect(children.length).toEqual(13);
12+
13+
{
14+
await page.setViewportSize({ width: 1037, height });
15+
await waitForResize();
16+
17+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
18+
expect(classNames).toEqual([
19+
'wrap-children',
20+
'wrap-children',
21+
'box blue',
22+
'box grey flex-fill',
23+
'box blue',
24+
'wrap-children flex-fill',
25+
'box green',
26+
'box grey flex-fill',
27+
'box green',
28+
'wrap-children',
29+
'box yellow',
30+
'box grey flex-fill',
31+
'box yellow'
32+
]);
33+
}
34+
35+
{
36+
await page.setViewportSize({ width: 1036, height });
37+
await waitForResize();
38+
39+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
40+
expect(classNames).toEqual([
41+
'wrap-children has-child-wrapped',
42+
'wrap-children',
43+
'box blue',
44+
'box grey flex-fill',
45+
'box blue',
46+
'wrap-children flex-fill next-is-wrapped',
47+
'box green',
48+
'box grey flex-fill',
49+
'box green',
50+
'wrap-children',
51+
'box yellow',
52+
'box grey flex-fill',
53+
'box yellow'
54+
]);
55+
}
56+
57+
{
58+
await page.setViewportSize({ width: 696, height });
59+
await waitForResize();
60+
61+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
62+
expect(classNames).toEqual([
63+
'wrap-children has-child-wrapped',
64+
'wrap-children next-is-wrapped',
65+
'box blue',
66+
'box grey flex-fill',
67+
'box blue',
68+
'wrap-children flex-fill next-is-wrapped',
69+
'box green',
70+
'box grey flex-fill',
71+
'box green',
72+
'wrap-children',
73+
'box yellow',
74+
'box grey flex-fill',
75+
'box yellow'
76+
]);
77+
}
78+
79+
{
80+
await page.setViewportSize({ width: 356, height });
81+
await waitForResize();
82+
83+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
84+
expect(classNames).toEqual([
85+
'wrap-children has-child-wrapped',
86+
'wrap-children next-is-wrapped',
87+
'box blue',
88+
'box grey flex-fill next-is-wrapped',
89+
'box blue',
90+
'wrap-children flex-fill next-is-wrapped',
91+
'box green',
92+
'box grey flex-fill next-is-wrapped',
93+
'box green',
94+
'wrap-children',
95+
'box yellow',
96+
'box grey flex-fill next-is-wrapped',
97+
'box yellow'
98+
]);
99+
}
100+
101+
{
102+
await page.setViewportSize({ width: 242, height });
103+
await waitForResize();
104+
105+
const classNames = await Promise.all(children.map(div => div.evaluate(el => el.className)));
106+
expect(classNames).toEqual([
107+
'wrap-children has-child-wrapped',
108+
'wrap-children next-is-wrapped',
109+
'box blue next-is-wrapped',
110+
'box grey flex-fill next-is-wrapped',
111+
'box blue',
112+
'wrap-children flex-fill next-is-wrapped',
113+
'box green next-is-wrapped',
114+
'box grey flex-fill next-is-wrapped',
115+
'box green',
116+
'wrap-children',
117+
'box yellow next-is-wrapped',
118+
'box grey flex-fill next-is-wrapped',
119+
'box yellow'
120+
]);
121+
}
122+
});

‎examples/Minimal.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66

77
<title>Minimal example</title>
8+
9+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
10+
<style>
11+
* {
12+
/* Force Roboto font so Playwright works on all platforms: Mac, Linux, Windows and Docker */
13+
font-family: 'Roboto', sans-serif !important;
14+
}
15+
</style>
816
</head>
917

1018
<body>

‎examples/Minimal.test.e2e.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import path from 'path';
2+
3+
import { nextIsWrappedClassName } from 'flex-wrap-layout';
4+
5+
const waitForResize = () => page.waitFor(100);
6+
7+
test('resize 1024px => 296px => 183px', async () => {
8+
await page.goto(`file:${path.join(__dirname, 'build/Minimal.html')}`);
9+
10+
const height = 768;
11+
12+
const parent = (await page.$('.wrap-children'))!;
13+
const children = await parent.$$('div');
14+
expect(children.length).toEqual(3);
15+
16+
{
17+
await page.setViewportSize({ width: 1024, height });
18+
await waitForResize();
19+
20+
const parentClassName = await parent.evaluate(el => el.className);
21+
const child0BoundingBox = await children[0].boundingBox();
22+
const child0ClassName = await children[0].evaluate(el => el.className);
23+
const child1BoundingBox = await children[1].boundingBox();
24+
const child1ClassName = await children[1].evaluate(el => el.className);
25+
const child2BoundingBox = await children[2].boundingBox();
26+
const child2ClassName = await children[2].evaluate(el => el.className);
27+
28+
expect((await page.$$('.next-is-wrapped')).length).toEqual(0);
29+
expect(parentClassName).toEqual('wrap-children');
30+
expect(child0BoundingBox).toEqual({ x: 13, y: 13, width: 48.265625, height: 72 });
31+
expect(child0ClassName).toEqual('');
32+
expect(child1BoundingBox).toEqual({ x: 71.265625, y: 13, width: 826.78125, height: 72 });
33+
expect(child1ClassName).toEqual('');
34+
expect(child2BoundingBox).toEqual({ x: 908.046875, y: 13, width: 102.953125, height: 72 });
35+
expect(child2ClassName).toEqual('');
36+
}
37+
38+
{
39+
await page.setViewportSize({ width: 296, height });
40+
await waitForResize();
41+
42+
const parentClassName = await parent.evaluate(el => el.className);
43+
const child0BoundingBox = await children[0].boundingBox();
44+
const child0ClassName = await children[0].evaluate(el => el.className);
45+
const child1BoundingBox = await children[1].boundingBox();
46+
const child1ClassName = await children[1].evaluate(el => el.className);
47+
const child2BoundingBox = await children[2].boundingBox();
48+
const child2ClassName = await children[2].evaluate(el => el.className);
49+
50+
expect((await page.$$('.next-is-wrapped')).length).toEqual(1);
51+
expect(parentClassName).toEqual('wrap-children has-child-wrapped');
52+
expect(child0BoundingBox).toEqual({ x: 13, y: 13, width: 48.265625, height: 72 });
53+
expect(child0ClassName).toEqual('');
54+
expect(child1BoundingBox).toEqual({ x: 71.265625, y: 13, width: 211.734375, height: 72 });
55+
expect(child1ClassName).toEqual(nextIsWrappedClassName);
56+
expect(child2BoundingBox).toEqual({ x: 13, y: 95, width: 270, height: 72 });
57+
expect(child2ClassName).toEqual('');
58+
}
59+
60+
{
61+
await page.setViewportSize({ width: 183, height });
62+
await waitForResize();
63+
64+
const parentClassName = await parent.evaluate(el => el.className);
65+
const child0BoundingBox = await children[0].boundingBox();
66+
const child0ClassName = await children[0].evaluate(el => el.className);
67+
const child1BoundingBox = await children[1].boundingBox();
68+
const child1ClassName = await children[1].evaluate(el => el.className);
69+
const child2BoundingBox = await children[2].boundingBox();
70+
const child2ClassName = await children[2].evaluate(el => el.className);
71+
72+
expect((await page.$$('.next-is-wrapped')).length).toEqual(2);
73+
expect(parentClassName).toEqual('wrap-children has-child-wrapped');
74+
expect(child0BoundingBox).toEqual({ x: 13, y: 13, width: 157, height: 72 });
75+
expect(child0ClassName).toEqual(nextIsWrappedClassName);
76+
expect(child1BoundingBox).toEqual({ x: 13, y: 95, width: 157, height: 72 });
77+
expect(child1ClassName).toEqual(nextIsWrappedClassName);
78+
expect(child2BoundingBox).toEqual({ x: 13, y: 177, width: 157, height: 72 });
79+
expect(child2ClassName).toEqual('');
80+
}
81+
});

0 commit comments

Comments
 (0)