test: Preact CLI tests

.gitignore

@@ -1,7 +1,10 @@
 /node_modules
 /lib
 /examples/*/build
+/tests/output
 .DS_Store
 npm-debug.log
 key.pem
 cert.pem
+lighthouse.*/
+tmp-*.json

.travis.yml

@@ -1,3 +1,22 @@
+dist: trusty
+sudo: required
+addons:
+  chrome: stable
+  apt:
+    packages: libnss3-tools
+
 language: node_js
 node_js:
-- "7.0"
+  - "6"
+  - "7"
+  - "8"
+cache:
+  npm: true
+
+before_script:
+- export LIGHTHOUSE_CHROMIUM_PATH=`which google-chrome-stable`
+- google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
+
+script:
+- npm run lint
+- npm run test

package.json

@@ -10,8 +10,9 @@
     "build": "babel src -d lib -D",
     "prepublish": "npm run -s build",
     "dev": "babel-node src",
-    "lint": "eslint src",
-    "test": "npm run -s lint",
+    "lint": "eslint src tests",
+    "pretest": "npm run -s build",
+    "test": "tape -r babel-register tests/*.test.js",
     "test:build": "babel-node src build --cwd examples/root",
     "test:serve": "npm run -s test:build && babel-node src serve --port 3000 --cwd examples/root",
     "test:serve:config": "npm run -s test:build && babel-node src serve --server config --cwd examples/root",
@@ -72,8 +73,14 @@
   "devDependencies": {
     "babel-cli": "^6.24.0",
     "babel-eslint": "^7.2.1",
+    "chrome-launcher": "^0.1.1",
+    "chrome-remote-interface": "^0.23.2",
     "eslint": "^3.19.0",
-    "eslint-plugin-react": "^7.0.1"
+    "eslint-plugin-react": "^7.0.1",
+    "html-looks-like": "^1.0.2",
+    "lodash": "^4.17.4",
+    "tape": "^4.6.3",
+    "uuid": "^3.0.1"
   },
   "dependencies": {
     "@webpack-blocks/css-modules": "^0.4.0",
@@ -98,7 +105,6 @@
     "devcert-san": "^0.3.3",
     "ejs-loader": "^0.3.0",
     "es6-promisify": "^5.0.0",
-    "eslint": "^3.19.0",
     "file-loader": "^0.11.1",
     "fs.promised": "^3.0.0",
     "html-webpack-plugin": "^2.28.0",

src/commands/create.js

@@ -47,6 +47,11 @@ export default asyncCommand({
 			description: 'Pre-install SASS/SCSS support',
 			type: 'boolean',
 			default: false
+		},
+		install: {
+			description: 'Install dependencies',
+			type: 'boolean',
+			default: true
 		}
 	},
 
@@ -110,38 +115,40 @@ export default asyncCommand({
 
 		await fs.writeFile(path.resolve(target, 'package.json'), JSON.stringify(pkg, null, 2));
 
-		spinner.text = 'Installing dev dependencies';
-
-		await npm(target, [
-			'install', '--save-dev',
-			'preact-cli',
-			'if-env',
-			'eslint',
-			'eslint-config-synacor',
-
-			// install sass setup if --sass
-			...(argv.sass ? [
-				'node-sass',
-				'sass-loader'
-			] : []),
-
-			// install less setup if --less
-			...(argv.less ? [
-				'less',
-				'less-loader'
-			] : [])
-		].filter(Boolean));
-
-		spinner.text = 'Installing dependencies';
-
-		await npm(target, [
-			'install', '--save',
-			'preact',
-			'preact-compat',
-			'preact-router'
-		]);
-
-		spinner.succeed('Done!\n');
+		if (argv.install) {
+			spinner.text = 'Installing dev dependencies';
+
+			await npm(target, [
+				'install', '--save-dev',
+				'preact-cli',
+				'if-env',
+				'eslint',
+				'eslint-config-synacor',
+
+				// install sass setup if --sass
+				...(argv.sass ? [
+					'node-sass',
+					'sass-loader'
+				] : []),
+
+				// install less setup if --less
+				...(argv.less ? [
+					'less',
+					'less-loader'
+				] : [])
+			].filter(Boolean));
+
+			spinner.text = 'Installing dependencies';
+
+			await npm(target, [
+				'install', '--save',
+				'preact',
+				'preact-compat',
+				'preact-router'
+			]);
+
+			spinner.succeed('Done!\n');
+		}
 
 		return `
 			To get started, cd into the new directory:

tests/async-test.js

@@ -0,0 +1,39 @@
+import test from 'tape';
+
+const defaultTestTimeout = 10 * 1000;
+
+const asyncTest = (...args) => {
+	let { fn, tapeArgs, hasTimeout } = parseArgs(args);
+
+	test(...tapeArgs, (t) => {
+		if (!hasTimeout) t.timeoutAfter(defaultTestTimeout);
+		fn(t)
+			.then(() => t.end())
+			.catch(e => t.end(e));
+	});
+};
+
+asyncTest.only = (...args) => {
+	let { fn, tapeArgs, hasTimeout } = parseArgs(args);
+
+	test.only(...tapeArgs, t => {
+		if (!hasTimeout) t.timeoutAfter(defaultTestTimeout);
+		fn(t)
+			.then(() => t.end())
+			.catch(e => t.end(e));
+	});
+};
+
+export default asyncTest;
+
+const parseArgs = args => {
+	let fn = args[args.length - 1];
+	let tapeArgs = args.slice(0, args.length - 1);
+	let opts = tapeArgs[1];
+
+	return {
+		fn,
+		tapeArgs,
+		hasTimeout: opts && opts.timeout !== undefined
+	};
+};

tests/build.snapshot.js

@@ -0,0 +1,79 @@
+export const normalize = obj => {
+	let keys = Object.keys(obj);
+
+	if (keys.length === 1 && keys[0] === 'size' && typeof keys[0] === 'number') {
+		return { size: Math.round(obj.size / 10) * 10 };
+	}
+
+	return keys.reduce((agg, key) => {
+		let newKey = key.replace(/\.chunk\.\w+\./, '.chunk.*.');
+		agg[newKey] = normalize(obj[key]);
+		return agg;
+	}, {});
+};
+
+const smallBuildCommons = {
+	assets: {
+		'favicon.ico': { size: 15086 },
+		'icon.png': { size: 51484 }
+	},
+	'polyfills.chunk.*.js': { size: 4068 },
+	'favicon.ico': { size: 15086 },
+	'sw.js': { size: 3378 },
+	'manifest.json': { size: 298 },
+	'push-manifest.json': { size: 2 },
+};
+
+const fullBuildCommons = {
+	assets: {
+		'favicon.ico': { size: 15086 },
+		icons: {
+			'android-chrome-192x192.png': { size: 14058 },
+			'android-chrome-512x512.png': { size: 51484 },
+			'apple-touch-icon.png': { size: 12746 },
+			'favicon-16x16.png': { size: 626 },
+			'favicon-32x32.png': { size: 1487 },
+			'mstile-150x150.png': { size: 9050 }
+		}
+	},
+	'polyfills.chunk.*.js': { size: 4066 },
+	'push-manifest.json': { size: 303 },
+	'favicon.ico': { size: 15086 },
+	'manifest.json': { size: 426 },
+	'sw.js': { size: 3905 }
+};
+
+export const expectedOutputs = normalize({
+	empty: {
+		...smallBuildCommons,
+		'bundle.js': { size: 10694 },
+		'index.html': { size: 534 },
+		'style.css': { size: 131 },
+		'style.css.map': { size: 359 },
+	},
+	simple: {
+		...smallBuildCommons,
+		'bundle.js': { size: 11336 },
+		'index.html': { size: 548 },
+		'style.css': { size: 296},
+		'style.css.map': { size: 621 },
+	},
+	root: {
+		...fullBuildCommons,
+		'bundle.js': { size: 18739 },
+		'route-home.chunk.*.js': { size: 959 },
+		'route-profile.chunk.*.js': { size: 1595 },
+		'index.html': { size: 775 },
+		'style.css': { size: 1065 },
+		'style.css.map': { size: 2246 },
+	},
+	'default': {
+		...fullBuildCommons,
+		'bundle.js': { size: 19661 },
+		'route-home.chunk.*.js': { size: 961 },
+		'route-profile.chunk.*.js': { size: 1597 },
+		'index.html': { size: 775 },
+		'style.css': { size: 1065 },
+		'style.css.map': { size: 2345 },
+	}
+});

tests/build.test.js

@@ -0,0 +1,27 @@
+import test from './async-test';
+import { resolve } from 'path';
+import { create, build } from './lib/cli';
+import lsr from './lib/lsr';
+import { setup, clean } from './lib/output';
+import { normalize, expectedOutputs } from './build.snapshot';
+
+const options = { timeout: 45 * 1000 };
+
+test('preact build - before', async () => {
+	await setup();
+});
+
+['empty', 'simple', 'root', 'default'].forEach(template =>
+	test(`preact build - should produce output. Veryfing ${template}`, options, async t => {
+		let app = await create('app', template);
+		await build(app);
+
+		let output = await lsr(resolve(app, 'build'));
+
+		t.isEquivalent(normalize(output), expectedOutputs[template]);
+	})
+);
+
+test('preact build - after', async () => {
+	await clean();
+});

tests/create.test.js

@@ -0,0 +1,34 @@
+import test from './async-test';
+import { resolve } from 'path';
+import { create } from './lib/cli';
+import lsr from './lib/lsr';
+import { setup, clean } from './lib/output';
+
+const listTemplate = async dir => await lsr(resolve(__dirname, '../examples', dir), ['.gitkeep', 'package.json']);
+const listOutput = async dir => await lsr(dir, ['.gitkeep', 'package.json']);
+
+test('preact create - before', async () => {
+	await setup();
+});
+
+test('preact create - should create project using full template by default.', async t => {
+	let fullExample = await listTemplate('full');
+	let app = await create('app');
+	let generated = await listOutput(app);
+
+	t.isEquivalent(generated, fullExample);
+});
+
+['root', 'simple', 'empty'].forEach(template =>
+	test(`preact create - should create project using provided template. Verifying ${template}`, async t => {
+		let example = await listTemplate(template);
+		let app = await create('app', template);
+		let generated = await listOutput(app);
+
+		t.isEquivalent(generated, example);
+	})
+);
+
+test('preact build - after', async () => {
+	await clean();
+});