test: Preact CLI tests

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /lib
 /examples/*/build
+/tests/output
 .DS_Store
 npm-debug.log

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-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",
+    "lighthouse": "^2.1.0",
+    "lodash": "^4.17.4",
+    "tape": "^4.6.3",
+    "uuid": "^3.0.1"
   },
   "dependencies": {
     "@webpack-blocks/babel6": "^0.4.1",
@@ -98,7 +105,6 @@
     "css-modules-require-hook": "^4.0.6",
     "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
 		}
 	},
 
@@ -112,34 +117,36 @@ export default asyncCommand({
 
 		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'
-		]);
+		if (argv.install) {
+			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');
 

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,25 @@
+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';
+
+test('preact build - before', async () => {
+	await setup();
+});
+
+['empty', 'simple', 'root', 'default'].forEach(template =>
+	test(`preact build - should produce output. Veryfing ${template}`, 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();
+});

tests/lib/chrome.js

@@ -0,0 +1,83 @@
+import { Launcher } from 'lighthouse/chrome-launcher';
+import chrome from 'chrome-remote-interface';
+
+export default async () => {
+	let launcher = new Launcher({
+		port: 9222,
+		autoSelectChrome: true,
+		additionalFlags: [
+			'--window-size=1024,768',
+			'--disable-gpu',
+			'--headless'
+		]
+	});
+	await launcher.launch();
+	let protocol = await setup();
+	return { launcher, protocol };
+};
+
+export const waitUntil = async (Runtime, expression, retryCount = 10, retryInterval = 500) => {
+	if (retryCount < 0) {
+		throw new Error(`Wait until: '${expression}' timed out.`);
+	}
+
+	let { result } = await Runtime.evaluate({ expression });
+
+	if (!result || !result.value) {
+		await delay(retryInterval);
+		await waitUntil(Runtime, expression, retryCount - 1, retryInterval);
+	}
+};
+
+export const loadPage = async (chrome, url, retryCount = 10, retryInterval = 500) => {
+	let result = await openPage(chrome, url, retryCount, retryInterval);
+	await chrome.Page.loadEventFired();
+	return result;
+};
+
+const openPage = async (chrome, url, retryCount, retryInterval) => {
+	if (retryCount < 0) {
+		throw new Error('Page could not be loaded!');
+	}
+
+	let { Network, Page } = chrome;
+	Page.navigate({ url });
+
+	let result;
+
+	try {
+		result = await new Promise((resolve, reject) => {
+			Network.responseReceived((result) => {
+				let { status, url: responseUrl } = result.response;
+				if (responseUrl === url && status === 200) {
+					resolve(result);
+				}
+			});
+
+			setTimeout(() => {
+				reject();
+			}, retryInterval);
+		});
+	} catch (e) {
+		result = await openPage(chrome, url, retryCount - 1, retryInterval);
+	}
+
+	return result;
+};
+
+const delay = time => new Promise(r => setTimeout(() => r(), time));
+
+const setup = () => new Promise((resolve, reject) => {
+	chrome(protocol => {
+		const { Page, Runtime, Network } = protocol;
+
+		Promise.all([
+			Page.enable(),
+			Runtime.enable(),
+			Network.enable(),
+		]).then(() => {
+			resolve(protocol);
+		})
+		.catch(reject);
+		}).on('error', err =>  reject(new Error('Cannot connect to Chrome:' + err)));
+});