Skip to content

Commit d2a5318

Browse files
ScriptedAlchemyScriptedAlchemy
committed
test: adding puppeteer tests
1 parent a0f7009 commit d2a5318

File tree

14 files changed

+1093
-352
lines changed

14 files changed

+1093
-352
lines changed

‎jest-puppeteer.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
module.exports = {
2+
}

‎jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module.exports = {
22
testURL: 'http://localhost/',
3+
"preset": "jest-puppeteer",
34
transformIgnorePatterns: ['/node_modules/', '<rootDir>/dist/'],
45
watchPathIgnorePatterns: ['<rootDir>/test/js'],
56
};

‎package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"node": ">= 6.9.0"
3636
},
3737
"scripts": {
38+
"commit": "git-cz",
3839
"start": "npm run build -- -w",
3940
"prebuild": "npm run clean",
4041
"build": "cross-env NODE_ENV=production babel src -d dist --ignore \"src/**/*.test.js\" --copy-files",
@@ -50,7 +51,7 @@
5051
"test:only": "cross-env NODE_ENV=test jest --updateSnapshot",
5152
"test:watch": "cross-env NODE_ENV=test jest --watch",
5253
"test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
53-
"test:manual": "npm run build && webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
54+
"test:manual": "webpack-dev-server test/manual/src/index.js --config test/manual/webpack.config.js",
5455
"pretest": "npm run lint",
5556
"test": "cross-env NODE_ENV=test npm run test:coverage",
5657
"defaults": "webpack-defaults",
@@ -80,9 +81,12 @@
8081
"@webpack-contrib/eslint-config-webpack": "^3.0.0",
8182
"babel-eslint": "^10.0.2",
8283
"babel-jest": "^24.8.0",
84+
"commitizen": "^4.0.3",
8385
"commitlint-azure-pipelines-cli": "^1.0.2",
86+
"copy-webpack-plugin": "^5.1.1",
8487
"cross-env": "^5.2.0",
8588
"css-loader": "^3.3.2",
89+
"cz-conventional-changelog": "^3.0.2",
8690
"del": "^4.1.1",
8791
"del-cli": "^1.1.0",
8892
"es-check": "^5.0.0",
@@ -94,13 +98,16 @@
9498
"husky": "^3.0.0",
9599
"jest": "^24.8.0",
96100
"jest-junit": "^10.0.0",
101+
"jest-puppeteer": "^4.4.0",
97102
"lint-staged": "^9.5.0",
98103
"memfs": "^3.0.2",
99104
"npm-run-all": "^4.1.5",
100105
"prerender-loader": "^1.3.0",
101106
"prettier": "^1.19.1",
107+
"puppeteer": "^2.0.0",
108+
"serve": "^11.3.0",
102109
"standard-version": "^7.0.1",
103-
"webpack": "^4.41.4",
110+
"webpack": "^4.41.5",
104111
"webpack-cli": "^3.3.6",
105112
"webpack-dev-server": "^3.7.2"
106113
}

‎test/cases/insert-function/index.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎test/cases/insert-function/webpack.config.js

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎test/cases/insert-string/README.md

Whitespace-only changes.

‎test/cases/insert-string/index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>extract-css-chunks-webpack-plugin testcase</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="stylesheet" type="text/css" href="/preloaded1.css" />
9+
<style>
10+
.test {
11+
background: lightcoral;
12+
}
13+
.errors {
14+
font-weight: bold;
15+
color: darkred;
16+
}
17+
.preloaded-css1 {
18+
background: lightgreen;
19+
}
20+
</style>
21+
<style data-href="preloaded2.css">
22+
.preloaded-css2 {
23+
background: lightgreen;
24+
}
25+
</style>
26+
<link rel="stylesheet" type="text/css" href="/main.css" />
27+
</head>
28+
<body>
29+
<div class="test initial-css">
30+
Initial CSS: Must be green
31+
</div>
32+
<div class="hot-reload">
33+
<p>Hot Module Replacement</p>
34+
<div class="r">RED</div>
35+
<div class="g">GREEN</div>
36+
<div class="b">BLUE</div>
37+
</div>
38+
<div class="hot-reload">
39+
<p>Hot Module Replacement + CSS modules</p>
40+
<div class="rr">RED</div>
41+
<div class="gg">GREEN</div>
42+
<div class="bb">BLUE</div>
43+
</div>
44+
<div class="test lazy-css">
45+
<p>
46+
Lazy CSS: Must be red, but turn green when
47+
<button class="lazy-button">pressing this button</button>.
48+
</p>
49+
<p>
50+
But turn orange, when
51+
<button class="lazy-button2">pressing this button</button>. Additional
52+
clicks have no effect.
53+
</p>
54+
<p>
55+
Refresh and press buttons in reverse order: This should turn green
56+
instead.
57+
</p>
58+
</div>
59+
<div class="test lazy-failure-css">
60+
<p>
61+
Lazy CSS: Turn off the network and
62+
<button class="lazy-failure-button">press this button</button>.
63+
</p>
64+
<p>An error should have appeared.</p>
65+
<p>
66+
Now if you turn the network back on and click it again, it should turn
67+
aqua.
68+
</p>
69+
</div>
70+
<div class="test preloaded-css1">
71+
<p>Preloaded CSS: Must be green.</p>
72+
<p>
73+
<button class="preloaded-button1">Pressing this button</button> displays
74+
an alert and should turn red.
75+
</p>
76+
</div>
77+
<div class="test preloaded-css2">
78+
<p>Preloaded inlined CSS: Must be green.</p>
79+
<p>
80+
<button class="preloaded-button2">Pressing this button</button> displays
81+
an alert and should turn red.
82+
</p>
83+
</div>
84+
<div class="test crossorigin">
85+
<p>CrossOriginLoading Option: Must be red.</p>
86+
<p>
87+
<button>Pressing this button</button> loads chunks with crossorigin
88+
attribute and should turn green.
89+
</p>
90+
</div>
91+
<div class="errors"></div>
92+
<script async defer src="/main.js"></script>
93+
</body>
94+
zack
95+
</html>

‎test/cases/insert-string/index.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎test/cases/insert-string/inject-string.test.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const { setup: setupDevServer } = require('jest-dev-server');
2+
3+
describe('insert-string', () => {
4+
beforeAll(async () => {
5+
jest.setTimeout(30000);
6+
7+
async function globalSetup() {
8+
await setupDevServer({
9+
command:
10+
'webpack test/cases/in/index.js --config test/manual/webpack.config.js',
11+
port: 5000,
12+
launchTimeout: 10000,
13+
});
14+
// Your global setup
15+
}
16+
await globalSetup();
17+
await page.goto('http://localhost:5000/');
18+
});
19+
20+
it('stylesheet was injected into body', async () => {
21+
await page.waitFor(4000);
22+
const bodyHTML = await page.evaluate(() => document.body.innerHTML);
23+
24+
await expect(bodyHTML.indexOf('type="text/css"') > 0).toBe(true);
25+
});
26+
27+
it('body background style set correctly', async () => {
28+
await page.waitFor(4000);
29+
const bodyStyle = await page.evaluate(() =>
30+
getComputedStyle(document.body).getPropertyValue('background-color')
31+
);
32+
33+
await expect(bodyStyle).toBe('rgb(255, 0, 0)');
34+
});
35+
});

‎test/cases/insert-string/src/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/* eslint-env browser */
2+
3+
import('./inject.css');

‎test/cases/insert-string/expected/main.css renamed to ‎test/cases/insert-string/src/inject.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
body {
22
background: red;
33
}
4-

‎test/cases/insert-string/webpack.config.js

Lines changed: 69 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,84 @@
1-
import Self from '../../../src';
1+
const path = require('path');
2+
3+
const CopyPlugin = require('copy-webpack-plugin');
4+
5+
const Self = require('../../');
6+
7+
const ENABLE_HMR =
8+
typeof process.env.ENABLE_HMR !== 'undefined'
9+
? Boolean(process.env.ENABLE_HMR)
10+
: false;
11+
12+
const ENABLE_ES_MODULE =
13+
typeof process.env.ES_MODULE !== 'undefined'
14+
? Boolean(process.env.ES_MODULE)
15+
: false;
216

317
module.exports = {
4-
entry: './index.js',
18+
mode: 'development',
19+
output: {
20+
path: path.resolve(__dirname, 'dist'),
21+
chunkFilename: '[contenthash].js',
22+
publicPath: '/',
23+
crossOriginLoading: 'anonymous',
24+
},
525
module: {
626
rules: [
727
{
828
test: /\.css$/,
9-
use: [Self.loader, 'css-loader'],
29+
exclude: [/\.module\.css$/i],
30+
use: [
31+
{
32+
loader: Self.loader,
33+
options: {
34+
hmr: ENABLE_HMR,
35+
},
36+
},
37+
{
38+
loader: 'css-loader',
39+
options: {
40+
esModule: ENABLE_ES_MODULE,
41+
},
42+
},
43+
],
44+
},
45+
{
46+
test: /\.module\.css$/i,
47+
use: [
48+
{
49+
loader: Self.loader,
50+
options: {
51+
hmr: ENABLE_HMR,
52+
},
53+
},
54+
{
55+
loader: 'css-loader',
56+
options: {
57+
modules: true,
58+
esModule: ENABLE_ES_MODULE,
59+
},
60+
},
61+
],
1062
},
1163
],
1264
},
1365
plugins: [
1466
new Self({
1567
filename: '[name].css',
16-
insert: 'head',
68+
chunkFilename: '[contenthash].css',
69+
insert: 'body',
1770
}),
71+
new CopyPlugin([
72+
{
73+
from: path.resolve(__dirname, 'test/cases/insert-string/index.html'),
74+
to: path.resolve(__dirname, 'test/cases/insert-string/dist'),
75+
},
76+
]),
1877
],
78+
devServer: {
79+
contentBase: __dirname,
80+
headers: {
81+
'Access-Control-Allow-Origin': '*',
82+
},
83+
},
1984
};

0 commit comments

Comments
 (0)