Run and show test results in the editor (#8)

Author: jacobmendoza

keymaps/ava.json

@@ -0,0 +1,6 @@
+{
+  "atom-workspace": {
+    "ctrl-alt-r": "ava:run",
+    "ctrl-alt-a": "ava:toggle"
+  }
+}

lib/html-renderer-helper.js

@@ -0,0 +1,23 @@
+/** @babel */
+
+class HtmlRendererHelper {
+	createContainer(cssClass = null, textContent = null) {
+		const element = document.createElement('div');
+		if (cssClass) {
+			element.classList.add(cssClass);
+		}
+		if (textContent) {
+			element.textContent = textContent;
+		}
+		return element;
+	}
+
+	createImage(src, cssClass = null) {
+		const img = document.createElement('img');
+		img.src = src;
+		img.classList.add(cssClass);
+		return img;
+	}
+}
+
+module.exports = HtmlRendererHelper;

lib/main.js

@@ -0,0 +1,68 @@
+/** @babel */
+
+import path from 'path';
+import {CompositeDisposable} from 'atom';
+import Panel from './panel.js';
+import TestRunnerProcess from './test-runner-process';
+
+module.exports = {
+	activate(state) {
+		this.initRunnerProcess();
+		this.initUI(state);
+
+		this.subscriptions = new CompositeDisposable();
+
+		this.subscriptions.add(
+			atom.commands.add('atom-workspace', 'ava:toggle', () => this.toggle()));
+
+		this.subscriptions.add(
+			atom.commands.add('atom-workspace', 'ava:run', () => this.run()));
+	},
+	initRunnerProcess() {
+		this.testRunnerProcess = new TestRunnerProcess();
+		this.testRunnerProcess.on('assert', result => this.panel.renderAssert(result));
+		this.testRunnerProcess.on('complete', results => this.panel.renderFinalReport(results));
+	},
+	initUI() {
+		this.panel = new Panel(this);
+		this.panel.renderBase();
+		this.atomPanel = atom.workspace.addRightPanel({item: this.panel, visible: false});
+	},
+	canRun() {
+		return (atom.workspace.getActiveTextEditor() && this.testRunnerProcess.canRun());
+	},
+	run() {
+		if (!this.atomPanel.isVisible()) {
+			this.toggle();
+		}
+		if (!this.canRun()) {
+			return;
+		}
+
+		const editor = atom.workspace.getActiveTextEditor();
+		const currentFileName = editor.buffer.file.path;
+		const folder = path.dirname(currentFileName);
+		const file = path.basename(currentFileName);
+
+		this.panel.renderStartProcess(file);
+		this.testRunnerProcess.run(folder, file);
+	},
+	toggle() {
+		if (this.atomPanel.isVisible()) {
+			this.atomPanel.hide();
+		} else {
+			this.atomPanel.show();
+			this.run();
+		}
+	},
+	closePanel() {
+		this.atomPanel.hide();
+	},
+	deactivate() {
+		this.subscriptions.dispose();
+		this.panel.destroy();
+	},
+	serialize() {
+		this.atomAva = this.panel.serialize();
+	}
+};

lib/panel.js

@@ -0,0 +1,96 @@
+/** @babel */
+/* global __dirname */
+
+import path from 'path';
+import fs from 'fs';
+import HtmlRendererHelper from './html-renderer-helper';
+
+class Panel {
+	constructor(pluginInstance, htmlRendererHelper = new HtmlRendererHelper()) {
+		this.htmlRendererHelper = htmlRendererHelper;
+		this.pluginInstance = pluginInstance;
+		this.loadingSelector = 'sk-three-bounce';
+	}
+
+	renderBase() {
+		this.element = document.createElement('div');
+		this.element.classList.add('ava');
+
+		const resolvedPath = path.resolve(__dirname, '../views/panel.html');
+		this.element.innerHTML = fs.readFileSync(resolvedPath);
+
+		this.testsContainer = this.element.getElementsByClassName('tests-container')[0];
+		const closeIcon = this.element.getElementsByClassName('close-icon')[0];
+		closeIcon.addEventListener('click', e => this.pluginInstance.closePanel(e), false);
+	}
+
+	renderAssert(assertResult) {
+		const assert = assertResult.assert;
+
+		const newTest = this.htmlRendererHelper.createContainer('test');
+		newTest.classList.add(this._getCssClassForAssert(assert));
+		newTest.textContent = `${assert.name}`;
+		this.testsContainer.appendChild(newTest);
+
+		this._updateTestStatisticSection(assertResult);
+	}
+
+	_getCssClassForAssert(assert) {
+		if (assert.ok) {
+			return (assert.skip) ? 'skipped' : 'ok';
+		}
+		return (assert.todo) ? 'todo' : 'ko';
+	}
+
+	renderFinalReport(results) {
+		this.hideExecutingIndicator();
+
+		const summary = this.htmlRendererHelper.createContainer('summary');
+		const passed = results.pass - (results.skip ? results.skip : 0);
+		const percentage = Math.round((passed / results.count) * 100);
+		summary.textContent = `${results.count} total - ${percentage}% passed`;
+
+		this.testsContainer.appendChild(summary);
+	}
+
+	cleanTestsContainer() {
+		this.testsContainer.innerHTML = '';
+	}
+
+	renderStartProcess(fileName) {
+		const fileHeader = document.getElementById('file-header');
+		fileHeader.textContent = fileName;
+
+		this.displayExecutingIndicator();
+		this.cleanTestsContainer();
+	}
+
+	displayExecutingIndicator() {
+		const executing = document.getElementById(this.loadingSelector);
+		if (executing) {
+			executing.style.display = 'block';
+		}
+	}
+
+	hideExecutingIndicator() {
+		const executing = document.getElementById(this.loadingSelector);
+		if (executing) {
+			executing.style.display = 'none';
+		}
+	}
+
+	_updateTestStatisticSection(assertResult) {
+		const passedContainer = document.getElementById('passed');
+		const failedContainer = document.getElementById('failed');
+		passedContainer.textContent = assertResult.currentExecution.passed;
+		failedContainer.textContent = assertResult.currentExecution.failed;
+	}
+
+	serialize() { }
+
+	destroy() {
+		this.element.remove();
+	}
+}
+
+module.exports = Panel;

lib/parser-factory.js

@@ -0,0 +1,11 @@
+/** @babel */
+
+import parser from 'tap-parser';
+
+class ParserFactory {
+	getParser() {
+		return parser();
+	}
+}
+
+module.exports = ParserFactory;

lib/terminal-command-executor.js

@@ -0,0 +1,47 @@
+/** @babel */
+
+import EventEmitter from 'events';
+import ChildProcess from 'child_process';
+
+class TerminalCommandExecutor extends EventEmitter {
+	constructor() {
+		super();
+		EventEmitter.call(this);
+
+		this.dataReceivedEventName = 'dataReceived';
+		this.dataFinishedEventName = 'dataFinished';
+	}
+
+	run(command, destinyFolder = null) {
+		this.command = command;
+		this.destinyFolder = destinyFolder;
+
+		const spawn = ChildProcess.spawn;
+
+		this.terminal = spawn('bash', ['-l']);
+		this.terminal.on('close', statusCode => this._streamClosed(statusCode));
+		this.terminal.stdout.on('data', data => this._stdOutDataReceived(data));
+		this.terminal.stderr.on('data', data => this._stdErrDataReceived(data));
+
+		const terminalCommand = this.destinyFolder ?
+			`cd \"${this.destinyFolder}\" && ${this.command}\n` :
+			`${this.command}\n`;
+
+		this.terminal.stdin.write(terminalCommand);
+		this.terminal.stdin.write('exit\n');
+	}
+
+	_stdOutDataReceived(newData) {
+		this.emit(this.dataReceivedEventName, newData.toString());
+	}
+
+	_stdErrDataReceived(newData) {
+		this.emit(this.dataReceivedEventName, newData.toString());
+	}
+
+	_streamClosed(code) {
+		this.emit(this.dataFinishedEventName, code);
+	}
+}
+
+module.exports = TerminalCommandExecutor;

lib/test-runner-process.js

@@ -0,0 +1,81 @@
+/** @babel */
+
+import EventEmitter from 'events';
+import TerminalCommandExecutor from './terminal-command-executor';
+import ParserFactory from './parser-factory';
+
+class TestRunnerProcess extends EventEmitter {
+	constructor(
+		executor = new TerminalCommandExecutor(),
+		parserFactory = new ParserFactory()) {
+		super();
+
+		this.eventHandlers = {};
+		this.terminalCommandExecutor = executor;
+		this.parserFactory = parserFactory;
+
+		this.terminalCommandExecutor.on('dataReceived', data => this._addAvaOutput(data));
+		this.terminalCommandExecutor.on('dataFinished', () => this._endAvaOutput());
+
+		EventEmitter.call(this);
+	}
+
+	canRun() {
+		return !this.isRunning;
+	}
+
+	run(folder, file) {
+		if (!this.canRun()) {
+			return;
+		}
+
+		this.isRunning = true;
+		this.currentExecution = {passed: 0, failed: 0};
+
+		this.parser = this.parserFactory.getParser();
+		this._setHandlersOnParser(this.parser);
+
+		const command = `ava ${file} --tap`;
+
+		this.terminalCommandExecutor.run(command, folder);
+	}
+
+	_setHandlersOnParser(parser) {
+		const instance = this;
+		parser.on('assert', assert => {
+			instance._updateCurrentExecution(assert);
+			const result = {
+				currentExecution: this.currentExecution, assert
+			};
+			instance.emit('assert', result);
+		});
+
+		parser.on('complete', results => this.emit('complete', results));
+	}
+
+	_updateCurrentExecution(assert) {
+		if (assert.ok) {
+			if (!assert.skip) {
+				this.currentExecution.passed++;
+			}
+		} else if (!assert.todo) {
+			this.currentExecution.failed++;
+		}
+	}
+
+	_addAvaOutput(data) {
+		this.parser.write(data);
+	}
+
+	_endAvaOutput() {
+		this.parser.end();
+		this.isRunning = false;
+	}
+
+	destroy() {
+		this.isRunning = false;
+		this.terminalCommandExecutor.destroy();
+	}
+}
+
+module.exports = TestRunnerProcess;

media/logo.png

@@ -2,6 +2,7 @@
   "name": "ava",
   "version": "0.3.2",
   "description": "Snippets for AVA",
+  "main": "./lib/main",
   "license": "MIT",
   "repository": "sindresorhus/atom-ava",
   "private": true,
@@ -28,17 +29,33 @@
   "scripts": {
     "test": "xo"
   },
+  "activationCommands": {
+    "atom-workspace": [
+      "ava:toggle",
+      "ava:run"
+    ]
+  },
   "keywords": [
     "snippets",
     "test",
     "runner",
     "ava",
     "mocha"
   ],
+  "dependencies": {
+    "tap-parser": "^1.2.2",
+    "ava": "^0.13.0"
+  },
   "devDependencies": {
     "xo": "*"
   },
   "xo": {
+    "envs": [
+      "browser",
+      "node",
+      "jasmine",
+      "atomtest"
+    ],
     "esnext": true,
     "globals": [
       "atom"