fixed tests init and sidebars issue

package.json

@@ -63,7 +63,7 @@
     "build:dist": "rm -rf lib && webpack --config ./webpack.prod.js",
     "start": "webpack serve --config webpack.dev.js",
     "examples": "http-server ./ -p 3000 -o examples/index.html",
-    "debug": "karma start --timeout=28000 --browsers=Chrome --single-run=false",
+    "debug": "karma start --timeout=28000 --no-browsers --single-run=false",
     "test": "karma start",
     "release": "standard-version -a"
   }

src/diff-view.js

@@ -3,7 +3,6 @@ require('codemirror/addon/selection/mark-selection.js');
 
 const diff = require('./diff');
 const DiffParser = require('./diff-parser');
-const LCS = require('./lcs');
 const VDoc = require('./vdoc');
 
 /**
@@ -25,7 +24,7 @@ Removed `options.width`
 Removed `options.height`
 Removed `options.resized`
 Removed function `mergely.update`
-Remove styles `.mergely-resizer`, `.mergely-full-screen-0`, and `.mergely-full-screen-8`.
+Remove styles `.mergely-resizer`, `.mergely-full-screen-0`, and `.mergely-full-screen-8`. The mergely container now requires an explicit height. Child elements are added to it.
 Default for `options.change_timeout` changed to 50.
 No longer necessary to separately require codemirror/addon/search/searchcursor
 No longer necessary to separately require codemirror/addon/selection/mark-selection
@@ -254,23 +253,20 @@ CodeMirrorDiffView.prototype._setOptions = function(opts) {
 		...this.settings,
 		...opts
 	};
-	if (this.settings.hasOwnProperty('sidebar')) {
-		// dynamically enable sidebars
-		if (this.settings.sidebar) {
-			const divs = document.querySelectorAll(`#${this.id} .mergely-margin`);
-			for (const div of divs) {
-				div.style.visibility = 'visible';
-			}
-		}
-		else {
-			const divs = document.querySelectorAll(`#${this.id} .mergely-margin`);
-			for (const div of divs) {
-				div.style.visibility = 'hidden';
-			}
-		}
+	if (this.settings._debug) {
+		trace('api#_setOptions', opts);
 	}
+
 	// if options set after init
 	if (this.editor) {
+		if (opts.hasOwnProperty('sidebar')) {
+			const divs = document.querySelectorAll(`#${this.id} .mergely-margin`);
+			const visible = !!opts.sidebar;
+			for (const div of divs) {
+				div.style.visibility = visible ? 'visible' : 'hidden';
+			}
+		}
+
 		const le = this.editor.lhs;
 		const re = this.editor.rhs;
 		if (opts.hasOwnProperty('wrap_lines')) {
@@ -502,11 +498,8 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		el.append(canvasRhs);
 	}
 	if (!this.settings.sidebar) {
-		// it would be better if this just used this.options()
-		const divs = document.querySelectorAll(`#${this.id} .mergely-margin`);
-		for (const div of divs) {
-			div.style.visibility = 'hidden';
-		}
+		canvasLhs.style.visibility = 'hidden';
+		canvasRhs.style.visibility = 'hidden';
 	}
 	container.append(el);
 

test/mergely.spec.js

@@ -1,4 +1,3 @@
-const CodeMirror = require('CodeMirror');
 const simple = require('simple-mock');
 const Mergely = require('../src/mergely');
 const macbeth = require('./data/macbeth').join('\n');
@@ -28,24 +27,24 @@ const defaultOptions = {
 
 describe('mergely', function () {
 	let editor;
+	let editorId = 0;
 	function init(options) {
-		editor = new window.Mergely('#mergely', options);
+		editor = new window.Mergely(`#mergely-${editorId - 1}`, options);
 		return editor;
 	};
 
-	before(() => {
-		const container = document.createElement('div');
-		container.style.height = '275px';
+	beforeEach(() => {
 		const div = document.createElement('div');
-		div.id = 'mergely';
+		div.id = `mergely-${editorId++}`;
 		div.style.margin = '0px';
-		container.append(div);
-		document.querySelector('body').appendChild(container);
+		div.style.height = '275px';
+		document.querySelector('body').appendChild(div);
 	});
 
 	afterEach(() => {
 		editor && editor.unbind();
 		simple.restore();
+		editor.el.parentNode.removeChild(editor.el);
 	});
 
 	describe('initialization', () => {
@@ -53,7 +52,7 @@ describe('mergely', function () {
 			const editor = init();
 			expect(editor).to.exist;
 			editor.once('updated', () => {
-				const { children } = editor.el;
+				const { children } = editor.el.children[0];
 				const items = Array.from(children).map(a => a.className);
 				// NOTE: if running karma debug, these tests can fail because
 				// the debugger grabs the focus and the CodeMirror instance
@@ -82,7 +81,7 @@ describe('mergely', function () {
 			});
 			expect(editor).to.exist;
 			editor.once('updated', () => {
-				const { children } = editor.el;
+				const { children } = editor.el.children[0];
 				const items = Array.from(children).map(a => a.className);
 				// NOTE: if running karma debug, these tests can fail because
 				// the debugger grabs the focus and the CodeMirror instance
@@ -110,7 +109,7 @@ describe('mergely', function () {
 			});
 			expect(editor).to.exist;
 			editor.once('updated', () => {
-				const { children } = editor.el;
+				const { children } = editor.el.children[0];
 				const items = Array.from(children).map(a => a.className);
 				// NOTE: if running karma debug, these tests can fail because
 				// the debugger grabs the focus and the CodeMirror instance
@@ -160,8 +159,8 @@ describe('mergely', function () {
 			});
 		});
 
-		it.only('initializes with and set lhs/rhs on update', function (done) {
-			const editor = init({ _debug: true });
+		it('initializes with and set lhs/rhs on update', function (done) {
+			const editor = init();
 			expect(editor).to.exist;
 			const test = () => {
 				done();

webpack.prod.js

@@ -1,9 +1,6 @@
-const webpack = require('webpack');
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-// const dev = require('./webpack.dev');
-
 const dev = {
 	mode: 'development',
 	entry: {