Skip to content

Commit 58e9641

Browse files
WesCossickWesCossick
authored
Merge pull request #16 from sparksuite/set-up-browser-testing
Set up browser testing
2 parents 0d97b23 + da1ce38 commit 58e9641

16 files changed

+2679
-27
lines changed

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@ node_modules/
22
coverage/
33
dist/
44
babel.config.js
5+
jest-puppeteer.config.js
6+
test/puppeteer/node_modules/
7+
test/puppeteer/dist/

‎.eslintrc.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
],
1010
"env": {
1111
"es6": true,
12-
"node": true
12+
"node": true,
13+
"browser": true
1314
},
1415
"parser": "@typescript-eslint/parser",
1516
"parserOptions": {

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules/
22
coverage/
33
dist/
4+
test/puppeteer/node_modules/
5+
test/puppeteer/dist/

‎.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules/
22
coverage/
33
dist/
4+
test/puppeteer/node_modules/
5+
test/puppeteer/dist/

‎jest-puppeteer.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
server: {
3+
command: 'node ./test/puppeteer/server.js',
4+
port: 8080,
5+
},
6+
};

‎package.json

+20-5
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"dist/"
99
],
1010
"scripts": {
11-
"test": "jest",
11+
"test": "yarn --frozen-lockfile --check-files && yarn compile && yarn link && cd test/puppeteer && yarn --frozen-lockfile --check-files && yarn link \"w3c-css-validator\" && npx webpack && cd ../../ && jest",
1212
"lint": "eslint --ext .js,.ts . && prettier --check '**/*.{ts,js,json,yml}'",
1313
"format": "eslint --fix --ext .js,.ts . && prettier --write '**/*.{ts,js,json,yml}'",
1414
"clean": "rm -rf node_modules/ coverage/ dist/",
@@ -36,13 +36,16 @@
3636
"@babel/preset-env": "^7.12.13",
3737
"@babel/preset-typescript": "^7.12.13",
3838
"@types/jest": "^26.0.20",
39+
"@types/jest-environment-puppeteer": "^4.4.1",
3940
"@types/node": "^14.14.25",
4041
"@typescript-eslint/eslint-plugin": "^4.14.2",
4142
"@typescript-eslint/parser": "^4.14.2",
4243
"eslint": "^7.19.0",
4344
"eslint-config-prettier": "^7.2.0",
4445
"jest": "^26.6.3",
46+
"jest-puppeteer": "^4.4.0",
4547
"prettier": "^2.2.1",
48+
"puppeteer": "^7.1.0",
4649
"typescript": "^4.1.3"
4750
},
4851
"jest": {
@@ -51,9 +54,21 @@
5154
"collectCoverageFrom": [
5255
"<rootDir>/src/**"
5356
],
54-
"testMatch": [
55-
"<rootDir>/test/*.test.ts"
56-
],
57-
"verbose": true
57+
"verbose": true,
58+
"projects": [
59+
{
60+
"displayName": "Jest",
61+
"testMatch": [
62+
"<rootDir>/test/*.test.ts"
63+
]
64+
},
65+
{
66+
"displayName": "Puppeteer",
67+
"preset": "jest-puppeteer",
68+
"testMatch": [
69+
"<rootDir>/test/puppeteer/*.test.ts"
70+
]
71+
}
72+
]
5873
}
5974
}

‎test/puppeteer/babel.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
'@babel/preset-env',
5+
{
6+
targets: {
7+
node: 'current',
8+
},
9+
},
10+
],
11+
'@babel/preset-typescript',
12+
],
13+
};

‎test/puppeteer/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<link rel="icon" href="data:,">
6+
<script src="/test/puppeteer/dist/bundle.js"></script>
7+
</head>
8+
9+
<body>
10+
<h1 id='is-valid'></h1>
11+
<button id='make-call'></button>
12+
</body>
13+
</html>

‎test/puppeteer/index.test.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Setup work before each test
2+
beforeEach(async () => {
3+
await jestPuppeteer.resetPage();
4+
5+
await page.goto(`http://localhost:8080/`, {
6+
waitUntil: 'load',
7+
});
8+
});
9+
10+
// Tests
11+
it('Loads', async () => {
12+
await expect(page.title()).resolves.toMatch('Hello world!');
13+
});

‎test/puppeteer/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"devDependencies": {
3+
"@babel/core": "^7.12.17",
4+
"@babel/preset-env": "^7.12.17",
5+
"@babel/preset-typescript": "^7.12.17",
6+
"babel-loader": "^8.2.2",
7+
"typescript": "^4.1.5",
8+
"webpack": "^5.23.0",
9+
"webpack-cli": "^4.5.0"
10+
}
11+
}

‎test/puppeteer/server.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var http = require('http');
2+
var fs = require('fs');
3+
4+
http
5+
.createServer(function (req, res) {
6+
if (req.url === '/') {
7+
fs.readFile('./test/puppeteer/index.html', function (_, content) {
8+
res.writeHead(200, { 'Content-Type': 'text/html' });
9+
res.end(content, 'utf-8');
10+
});
11+
} else {
12+
fs.readFile(`.${req.url || ''}`, function (_, content) {
13+
res.writeHead(200, { 'Content-Type': 'text/javascript' });
14+
res.end(content, 'utf-8');
15+
});
16+
}
17+
})
18+
.listen(8080);

‎test/puppeteer/src/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Imports
2+
import helloWorld from 'w3c-css-validator';
3+
4+
// Wait until DOM content is available to attempt to make changes
5+
document.addEventListener('DOMContentLoaded', () => {
6+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
7+
document.title = helloWorld();
8+
});

‎test/puppeteer/tsconfig.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"declaration": true,
4+
"declarationMap": true,
5+
"esModuleInterop": true,
6+
"module": "commonjs",
7+
"moduleResolution": "node",
8+
"noImplicitAny": true,
9+
"noUnusedLocals": true,
10+
"outDir": "./dist",
11+
"removeComments": true,
12+
"resolveJsonModule": true,
13+
"rootDir": "src",
14+
"sourceMap": true,
15+
"strict": true,
16+
"strictNullChecks": true,
17+
"target": "es6"
18+
},
19+
"include": ["src/**/*"],
20+
"exclude": ["node_modules"]
21+
}

‎test/puppeteer/webpack.config.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
entry: './src/index.ts',
5+
module: {
6+
rules: [
7+
{
8+
test: /\.ts$/,
9+
use: 'babel-loader',
10+
exclude: /node_modules/,
11+
},
12+
],
13+
},
14+
resolve: {
15+
extensions: ['.ts', '.js'],
16+
},
17+
output: {
18+
filename: 'bundle.js',
19+
path: path.resolve(__dirname, 'dist'),
20+
},
21+
};

0 commit comments

Comments
 (0)