Merge pull request #16 from sparksuite/set-up-browser-testing

WesCossick · web-flow · commit 58e96413a80e · 2021-02-19T13:45:37.000-06:00
Set up browser testing
diff --git a/.eslintignore b/.eslintignore
@@ -2,3 +2,6 @@ node_modules/
 coverage/
 dist/
 babel.config.js
+jest-puppeteer.config.js
+test/puppeteer/node_modules/
+test/puppeteer/dist/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,7 +9,8 @@
 	],
 	"env": {
 		"es6": true,
-		"node": true
+		"node": true,
+		"browser": true
 	},
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
 coverage/
 dist/
+test/puppeteer/node_modules/
+test/puppeteer/dist/
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,5 @@
 node_modules/
 coverage/
 dist/
+test/puppeteer/node_modules/
+test/puppeteer/dist/
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	server: {
+		command: 'node ./test/puppeteer/server.js',
+		port: 8080,
+	},
+};
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
 		"dist/"
 	],
 	"scripts": {
-		"test": "jest",
+		"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",
 		"lint": "eslint --ext .js,.ts . && prettier --check '**/*.{ts,js,json,yml}'",
 		"format": "eslint --fix --ext .js,.ts . && prettier --write '**/*.{ts,js,json,yml}'",
 		"clean": "rm -rf node_modules/ coverage/ dist/",
@@ -36,13 +36,16 @@
 		"@babel/preset-env": "^7.12.13",
 		"@babel/preset-typescript": "^7.12.13",
 		"@types/jest": "^26.0.20",
+		"@types/jest-environment-puppeteer": "^4.4.1",
 		"@types/node": "^14.14.25",
 		"@typescript-eslint/eslint-plugin": "^4.14.2",
 		"@typescript-eslint/parser": "^4.14.2",
 		"eslint": "^7.19.0",
 		"eslint-config-prettier": "^7.2.0",
 		"jest": "^26.6.3",
+		"jest-puppeteer": "^4.4.0",
 		"prettier": "^2.2.1",
+		"puppeteer": "^7.1.0",
 		"typescript": "^4.1.3"
 	},
 	"jest": {
@@ -51,9 +54,21 @@
 		"collectCoverageFrom": [
 			"<rootDir>/src/**"
 		],
-		"testMatch": [
-			"<rootDir>/test/*.test.ts"
-		],
-		"verbose": true
+		"verbose": true,
+		"projects": [
+			{
+				"displayName": "Jest",
+				"testMatch": [
+					"<rootDir>/test/*.test.ts"
+				]
+			},
+			{
+				"displayName": "Puppeteer",
+				"preset": "jest-puppeteer",
+				"testMatch": [
+					"<rootDir>/test/puppeteer/*.test.ts"
+				]
+			}
+		]
 	}
 }
diff --git a/test/puppeteer/babel.config.js b/test/puppeteer/babel.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				targets: {
+					node: 'current',
+				},
+			},
+		],
+		'@babel/preset-typescript',
+	],
+};
diff --git a/test/puppeteer/index.html b/test/puppeteer/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <link rel="icon" href="data:,">
+        <script src="/test/puppeteer/dist/bundle.js"></script>
+    </head>
+
+    <body>
+        <h1 id='is-valid'></h1>
+        <button id='make-call'></button>
+    </body>
+</html>
diff --git a/test/puppeteer/index.test.ts b/test/puppeteer/index.test.ts
@@ -0,0 +1,13 @@
+// Setup work before each test
+beforeEach(async () => {
+	await jestPuppeteer.resetPage();
+
+	await page.goto(`http://localhost:8080/`, {
+		waitUntil: 'load',
+	});
+});
+
+// Tests
+it('Loads', async () => {
+	await expect(page.title()).resolves.toMatch('Hello world!');
+});
diff --git a/test/puppeteer/package.json b/test/puppeteer/package.json
@@ -0,0 +1,11 @@
+{
+	"devDependencies": {
+		"@babel/core": "^7.12.17",
+		"@babel/preset-env": "^7.12.17",
+		"@babel/preset-typescript": "^7.12.17",
+		"babel-loader": "^8.2.2",
+		"typescript": "^4.1.5",
+		"webpack": "^5.23.0",
+		"webpack-cli": "^4.5.0"
+	}
+}
diff --git a/test/puppeteer/server.js b/test/puppeteer/server.js
@@ -0,0 +1,18 @@
+var http = require('http');
+var fs = require('fs');
+
+http
+	.createServer(function (req, res) {
+		if (req.url === '/') {
+			fs.readFile('./test/puppeteer/index.html', function (_, content) {
+				res.writeHead(200, { 'Content-Type': 'text/html' });
+				res.end(content, 'utf-8');
+			});
+		} else {
+			fs.readFile(`.${req.url || ''}`, function (_, content) {
+				res.writeHead(200, { 'Content-Type': 'text/javascript' });
+				res.end(content, 'utf-8');
+			});
+		}
+	})
+	.listen(8080);
diff --git a/test/puppeteer/src/index.ts b/test/puppeteer/src/index.ts
@@ -0,0 +1,8 @@
+// Imports
+import helloWorld from 'w3c-css-validator';
+
+// Wait until DOM content is available to attempt to make changes
+document.addEventListener('DOMContentLoaded', () => {
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+	document.title = helloWorld();
+});
diff --git a/test/puppeteer/tsconfig.json b/test/puppeteer/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"compilerOptions": {
+		"declaration": true,
+		"declarationMap": true,
+		"esModuleInterop": true,
+		"module": "commonjs",
+		"moduleResolution": "node",
+		"noImplicitAny": true,
+		"noUnusedLocals": true,
+		"outDir": "./dist",
+		"removeComments": true,
+		"resolveJsonModule": true,
+		"rootDir": "src",
+		"sourceMap": true,
+		"strict": true,
+		"strictNullChecks": true,
+		"target": "es6"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules"]
+}
diff --git a/test/puppeteer/webpack.config.js b/test/puppeteer/webpack.config.js
@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+	entry: './src/index.ts',
+	module: {
+		rules: [
+			{
+				test: /\.ts$/,
+				use: 'babel-loader',
+				exclude: /node_modules/,
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.ts', '.js'],
+	},
+	output: {
+		filename: 'bundle.js',
+		path: path.resolve(__dirname, 'dist'),
+	},
+};
diff --git a/test/puppeteer/yarn.lock b/test/puppeteer/yarn.lock
diff --git a/yarn.lock b/yarn.lock
