Use new Atom Docks API (#27)

lib/panel.js → lib/ava-panel.js

@@ -3,20 +3,36 @@ import path from 'path';
 import fs from 'fs';
 import HtmlRendererHelper from './html-renderer-helper';
 
-export default class Panel {
-	constructor(pluginInstance, htmlRendererHelper = new HtmlRendererHelper()) {
+export default class AvaPanel {
+	constructor(htmlRendererHelper = new HtmlRendererHelper()) {
 		this.htmlRendererHelper = htmlRendererHelper;
-		this.pluginInstance = pluginInstance;
 		this.loadingSelector = 'sk-three-bounce';
 	}
 
+	getTitle() {
+		return 'AVA';
+	}
+
+	getURI() {
+		return 'atom://ava/runner';
+	}
+
+	getDefaultLocation() {
+		return 'right';
+	}
+
+	getAllowedLocations() {
+		return ['left', 'right'];
+	}
+
+	getPreferredWidth() {
+		return 350;
+	}
+
 	renderBase() {
 		this.element = document.createElement('div');
 		this.element.classList.add('ava');
 		this.element.innerHTML = fs.readFileSync(path.resolve(__dirname, '../views/panel.html'));
-		const closeIcon = this.element.getElementsByClassName('close-icon')[0];
-		closeIcon.addEventListener('click', () => this.pluginInstance.hidePanel());
-
 		this.groupsContainer = this.element.getElementsByClassName('tests-groups-container')[0];
 	}
 

lib/index.js

@@ -1,7 +1,7 @@
 /** @babel */
 import path from 'path';
 import {CompositeDisposable} from 'atom';
-import Panel from './panel';
+import AvaPanel from './ava-panel';
 import TestRunnerProcess from './test-runner-process';
 
 export default {
@@ -14,38 +14,26 @@ export default {
 		this.subscriptions.add(
 			atom.commands.add('atom-workspace', 'ava:run-file', () => this.run()),
 			atom.commands.add('atom-workspace', 'ava:run', () => this.runAll()),
-			atom.commands.add('atom-workspace', 'core:cancel', ev => this.handleClosePanel(ev))
 		);
 	},
-	handleClosePanel({target}) {
-		const isFocusOnEditor = target.tagName && 'ATOM-TEXT-EDITOR' && !target.hasAttribute('mini');
-		if (isFocusOnEditor && this.atomPanel.isVisible()) {
-			this.hidePanel();
-		}
-	},
-	hidePanel() {
-		this.atomPanel.hide();
-	},
 	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 = new AvaPanel();
 		this.panel.renderBase();
-		this.atomPanel = atom.workspace.addRightPanel({
-			item: this.panel,
-			visible: false
-		});
+		this.openItem();
+	},
+	openItem() {
+		atom.workspace.open(this.panel);
 	},
 	canRun() {
 		return atom.workspace.getActiveTextEditor() && this.testRunnerProcess.canRun();
 	},
 	run() {
-		if (!this.atomPanel.isVisible()) {
-			this.atomPanel.show();
-		}
+		this.openItem();
 
 		if (!this.canRun()) {
 			return;
@@ -60,9 +48,7 @@ export default {
 		this.testRunnerProcess.run(folder, file);
 	},
 	runAll() {
-		if (!this.atomPanel.isVisible()) {
-			this.atomPanel.show();
-		}
+		this.openItem();
 
 		if (!this.canRun()) {
 			return;

spec/main-spec.js

@@ -1,4 +1,23 @@
 /** @babel */
+import AvaPanel from '../lib/ava-panel';
+
+const getDockGivenDefault = () => {
+	const panel = new AvaPanel();
+	const defaultLocation = panel.getDefaultLocation();
+
+	const workspace = atom.workspace;
+
+	switch (defaultLocation) {
+		case 'center':
+			return workspace.getCenter();
+		case 'left':
+			return workspace.getLeftDock();
+		case 'right':
+			return workspace.getRightDock();
+		default:
+			return workspace.getBottomDock();
+	}
+};
 
 describe('TestingForAva', () => {
 	const packageName = 'ava';
@@ -32,10 +51,8 @@ describe('TestingForAva', () => {
 			waitsForPromise(() => activationPromise);
 
 			runs(() => {
-				const mainElement = workspaceElement.querySelector(mainSelector);
-				expect(mainElement).toBeVisible();
-				atom.commands.dispatch(workspaceElement, 'core:cancel');
-				expect(mainElement).not.toBeVisible();
+				const dock = getDockGivenDefault();
+				expect(dock.isVisible()).toBeTruthy();
 			});
 		});
 	});

styles/ava.less

@@ -2,18 +2,10 @@
 @import 'loading-indicator.less';
 
 .ava {
-	width: 350px;
+	width: 100%;
 	font-size: 15px;
 	overflow: scroll;
 
-	.close-icon {
-		text-align: right;
-		margin-right: 10px;
-		margin-top: 10px;
-		font-size: 16px;
-		cursor: pointer;
-	}
-
 	.group-header {
 		background-color: @tab-bar-background-color;
 		color: #888;
@@ -27,6 +19,7 @@
 	}
 
 	.ava-logo-container {
+		padding-top: 15px;
 		text-align: center;
 
 		.ava-logo-image {

views/panel.html

@@ -1,4 +1,3 @@
-<div class="close-icon">✖</div>
 <div class="ava-logo-container">
 	<img class="ava-logo-image" src="atom://ava/media/logo.png">
 </div>