Merge pull request #68 from developit/perf-test-harness

Perf test harness

Author: developit

package.json

@@ -13,6 +13,7 @@
     "build:babel": "cd packages/babel-plugin-htm && npm run build",
     "build:babel-transform-jsx": "cd packages/babel-plugin-transform-jsx-to-htm && npm run build",
     "test": "eslint src/**/*.mjs test/**/*.mjs && npm run build && jest test",
+    "test:perf": "v8 test/__perftest.mjs",
     "release": "npm t && git commit -am \"$npm_package_version\" && git tag $npm_package_version && git push && git push --tags && npm publish"
   },
   "files": [

test/__d8.mjs

@@ -0,0 +1,134 @@
+/*global globalThis*/
+
+const queue = [];
+let stack = [];
+let index = 0;
+
+async function process() {
+	const id = index++;
+	if (id === queue.length) {
+		queue.length = index = 0;
+		return;
+	}
+	const [op, name, fn, extra] = queue[id];
+	queue[id] = undefined;
+	await processors[op](name, fn, extra);
+	await process();
+}
+
+const processors = {
+	async describe(name, fn, path) {
+		stack.push(name);
+		log('INFO', name);
+		await fn();
+		stack.pop();
+	},
+	async test(name, fn, path) {
+		let stackBefore = stack;
+		stack = path.concat(name);
+		logBuffer = [];
+		await new Promise(resolve => {
+			let calls = 0;
+			const done = () => {
+				if (calls++) throw Error(`Callback called multiple times\n\t${name}`);
+				log('INFO', `✅  ${name}`);
+				resolve();
+			};
+			Promise.resolve(done)
+				.then(fn)
+				.then(() => calls || done())
+				.catch(err => {
+					log('ERROR', `🚨  ${name}`);
+					log('ERROR', '\t' + String(err.stack || err.message || err));
+					resolve();
+				});
+		});
+		for (let i=0; i<logBuffer.length; i++) log(...logBuffer[i]);
+		logBuffer = undefined;
+		stack = stackBefore;
+	}
+};
+
+
+let logBuffer;
+
+function wrap(obj, method) {
+	obj[method] = function() {
+		let out = '  ';
+		for (let i=0; i<arguments.length; i++) {
+			let val = arguments[i];
+			if (typeof val === 'object' && val) {
+				val = JSON.stringify(val);
+			}
+			if (out) out += ' ';
+			out += val;
+		}
+		if (method!=='error') out = `\u001b[37m${out}\u001b[0m`;
+		if (logBuffer) {
+			logBuffer.push([method.toUpperCase(), out]);
+		}
+		else {
+			log(method.toUpperCase(), out);
+		}
+	};
+}
+wrap(console, 'log');
+wrap(console, 'info');
+wrap(console, 'warn');
+wrap(console, 'error');
+
+function log(type, msg) {
+	if (type === 'ERROR') {
+		msg = `\u001b[31m${msg}\u001b[39m`;
+	}
+	if (type === 'SUCCESS') {
+		msg = `\u001b[32m${msg}\u001b[39m`;
+	}
+	print(Array.from({ length: stack.length }).fill('  ').join('') + msg);
+}
+
+function push(op, name, fn, extra) {
+	if (queue.push([op, name, fn, extra]) === 1) {
+		setTimeout(process);
+	}
+}
+
+globalThis.describe = (name, fn) => {
+	push('describe', name, fn, stack.slice());
+};
+
+globalThis.test = (name, fn) => {
+	push('test', name, fn, stack.slice());
+};
+
+globalThis.expect = (subject) => new Expect(subject);
+
+const SUBJECT = Symbol.for('subject');
+const NEGATED = Symbol.for('negated');
+class Expect {
+	constructor(subject) {
+		this[SUBJECT] = subject;
+	}
+	get not() {
+		this[NEGATED] = true;
+		return this;
+	}
+	toBeGreaterThan(value) {
+		const subject = this[SUBJECT];
+		const negated = this[NEGATED];
+
+		const isOver = subject > value;
+		let msg = `Expected ${subject}${negated?' not':''} to be greater than ${value}`;
+		if (logBuffer) {
+			for (let i=logBuffer.length; i-- > -1; ) {
+				if (i<0 || logBuffer[i][2] === 1) {
+					logBuffer.splice(i+1, 0, [isOver !== negated ? 'SUCCESS' : 'ERROR', '  ' + msg, 1]);
+					break;
+				}
+			}
+		}
+		else {
+			log(isOver !== negated ? 'SUCCESS' : 'ERROR', '  ' + msg);
+		}
+	}
+}

test/__perftest.mjs

@@ -0,0 +1,2 @@
+import './__d8.mjs';
+import './perf.test.mjs';

test/perf.test.mjs

@@ -20,17 +20,17 @@ describe('performance', () => {
 	test('creation', () => {
 		const results = [];
 		const Foo = ({ name }) => html`<div class="foo">${name}</div>`;
-		const statics = [
-			'\n<div id=app data-loading="true">\n\t<h1>Hello World</h1>\n\t<ul class="items" id=', '>\n\t',
-			'\n\t</ul>\n\t\n\t<', ' name="foo" />\n\t<', ' name="other">content</', '>\n\n</div>'
-		];
 		let count = 0;
 		function go(count) {
+			const statics = [
+				'\n<div id=app'+(++count)+' data-loading="true">\n\t<h1>Hello World</h1>\n\t<ul class="items" id=', '>\n\t',
+				'\n\t</ul>\n\t\n\t<', ' name="foo" />\n\t<', ' name="other">content<//>\n\n</div>'
+			];
 			return html(
-				statics.concat(['count:', count]),
+				statics,
 				`id${count}`,
-				html(['<li data-id="','">', '</li>'], 'i'+count, 'some text #'+count),
-				Foo, Foo, Foo
+				html`<li data-id="${'i' + count}">${'some text #' + count}</li>`,
+				Foo, Foo
 			);
 		}
 		let now = performance.now();
@@ -50,18 +50,18 @@ describe('performance', () => {
 	test('usage', () => {
 		const results = [];
 		const Foo = ({ name }) => html`<div class="foo">${name}</div>`;
-		const statics = [
-			'\n<div id=app data-loading="true">\n\t<h1>Hello World</h1>\n\t<ul class="items" id=', '>\n\t',
-			'\n\t</ul>\n\t\n\t<', ' name="foo" />\n\t<', ' name="other">content</', '>\n\n</div>'
-		];
 		let count = 0;
 		function go(count) {
-			return html(
-				statics,
-				`id${count}`,
-				html(['<li data-id="','">', '</li>'], 'i'+count, 'some text #'+count),
-				Foo, Foo, Foo
-			);
+			return html`
+				<div id="app" data-loading="true">
+					<h1>Hello World</h1>
+					<ul class="items" id=${`id${count}`}>
+						${html`<li data-id="${'i' + count}">${'some text #' + count}</li>`}
+					</ul>
+					<${Foo} name="foo" />
+					<${Foo} name="other">content<//>
+				</div>
+			`;
 		}
 		let now = performance.now();
 		const start = now;