- {{!-- {{#if isEditingDescription}} --}}
{{title-input value=model.description}}
- {{!-- {{model.description}} --}}
{{saved-state-indicator model=model
unsaved=unsaved
}}
@@ -33,17 +31,27 @@
-
-
- {{file-editor-column col="1" file=col1File allFiles=model.files keyMap=settings.keyMap contentsChanged="contentsChanged"}}
-
-
-
- {{file-editor-column col="2" file=col2File allFiles=model.files keyMap=settings.keyMap contentsChanged="contentsChanged"}}
-
+ {{#each columns as |column|}}
+ {{#if column.show}}
+
+ {{file-editor-column col=column.col
+ file=column.file
+ allFiles=model.files
+ keyMap=settings.keyMap
+ numColumns=realNumColumns
+ contentsChanged="contentsChanged"
+ removeColumn=(action "removeColumn")
+ addColumn=(action "addColumn")
+ }}
+
+ {{/if}}
+ {{/each}}
{{#if file}}
diff --git a/app/utils/column.js b/app/utils/column.js
new file mode 100644
index 00000000..4f52f20f
--- /dev/null
+++ b/app/utils/column.js
@@ -0,0 +1,15 @@
+import Ember from "ember";
+
+const { computed } = Ember;
+
+export default Ember.Object.extend ({
+ col: "",
+ controller: null,
+ active: computed('controller.activeEditorCol', 'col', function() {
+ return this.get('controller.activeEditorCol') === this.get('col');
+ }),
+ show: computed('controller.realNumColumns', 'col', function() {
+ return this.get('controller.realNumColumns') >= this.get('col');
+ }),
+ file: null
+});
diff --git a/tests/acceptance/columns-test.js b/tests/acceptance/columns-test.js
new file mode 100644
index 00000000..d5532e55
--- /dev/null
+++ b/tests/acceptance/columns-test.js
@@ -0,0 +1,65 @@
+import Ember from 'ember';
+import { module, test } from 'qunit';
+import startApp from 'ember-twiddle/tests/helpers/start-app';
+
+module('Acceptance | columns', {
+ beforeEach: function() {
+ this.application = startApp();
+
+ server.create('user', 'octocat');
+ },
+
+ afterEach: function() {
+ Ember.run(this.application, 'destroy');
+ }
+});
+
+const columns = ".code";
+const firstColumn = ".code:first-of-type";
+const plusGlyph = ".code .glyphicon-plus";
+const removeGlyph = firstColumn + " .glyphicon-remove";
+const outputPlusGlyph = ".output .glyphicon-plus";
+
+test('you can add and remove columns', function(assert) {
+ visit('/');
+
+ andThen(function() {
+ assert.equal(currentURL(), '/', 'We are on the correct initial route');
+ assert.equal(find(columns).length, 2, 'There are two columns to start');
+
+ find(plusGlyph).click();
+ });
+
+ andThen(function() {
+ assert.equal(currentURL(), '/?numColumns=3', 'We are on the correct route for 3 columns');
+ assert.equal(find(columns).length, 3, 'There are now 3 columns');
+
+ find(removeGlyph).click();
+ });
+
+ andThen(function() {
+ assert.equal(currentURL(), '/', 'We are on the correct route for 2 columns');
+ assert.equal(find(columns).length, 2, 'There are now 2 columns');
+
+ find(removeGlyph).click();
+ });
+
+ andThen(function() {
+ assert.equal(currentURL(), '/?numColumns=1', 'We are on the correct route for 1 columns');
+ assert.equal(find(columns).length, 1, 'There are now 1 columns');
+
+ find(removeGlyph).click();
+ });
+
+ andThen(function() {
+ assert.equal(currentURL(), '/?numColumns=0', 'We are on the correct route for 0 columns');
+ assert.equal(find(columns).length, 0, 'There are now 0 columns');
+
+ find(outputPlusGlyph).click();
+ });
+
+ andThen(function() {
+ assert.equal(currentURL(), '/?numColumns=1', 'We are on the correct route for 1 columns');
+ assert.equal(find(columns).length, 1, 'There are now 1 columns');
+ });
+});
diff --git a/tests/integration/components/file-editor-column-test.js b/tests/integration/components/file-editor-column-test.js
new file mode 100644
index 00000000..6fee347b
--- /dev/null
+++ b/tests/integration/components/file-editor-column-test.js
@@ -0,0 +1,39 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('file-editor-column', 'Integration | Component | file editor column', {
+ integration: true,
+ beforeEach() {
+ this.addColumnCalled = false;
+ this.removeColumnCalled = false;
+
+ this.on('addColumn', () => { this.addColumnCalled = true; });
+ this.on('removeColumn', () => { this.removeColumnCalled = true; });
+
+ this.render(hbs`{{file-editor-column col="2"
+ file=null
+ allFiles=null
+ keyMap=null
+ numColumns=2
+ contentsChanged="contentsChanged"
+ addColumn=(action "addColumn")
+ removeColumn=(action "removeColumn")
+ }}`);
+ }
+});
+
+test('it calls addColumn when the add column glyph is clicked', function(assert) {
+ assert.expect(1);
+
+ this.$('.glyphicon-plus').click();
+
+ assert.ok(this.addColumnCalled, 'addColumn was called');
+});
+
+test('it calls removeColumn when the remove column glyph is clicked', function(assert) {
+ assert.expect(1);
+
+ this.$('.glyphicon-remove').click();
+
+ assert.ok(this.removeColumnCalled, 'removeColumn was called');
+});
diff --git a/tests/unit/utils/column-test.js b/tests/unit/utils/column-test.js
new file mode 100644
index 00000000..572e2bb9
--- /dev/null
+++ b/tests/unit/utils/column-test.js
@@ -0,0 +1,31 @@
+import Ember from "ember";
+import Column from '../../../utils/column';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | column');
+
+test('Active Column matches', function(assert) {
+ assert.expect(2);
+ var controller = Ember.Object.create({
+ activeEditorCol: '2',
+ realNumColumns: 3
+ });
+ var column1 = Column.create({ col: '1', controller: controller });
+ assert.ok(!column1.get('active'));
+ var column2 = Column.create({ col: '2', controller: controller });
+ assert.ok(column2.get('active'));
+});
+
+test('Show Column if less than or equal to realNumColumns', function(assert) {
+ assert.expect(3);
+ var controller = Ember.Object.create({
+ activeEditorCol: '3',
+ realNumColumns: 2
+ });
+ var column1 = Column.create({ col: '1', controller: controller });
+ assert.ok(column1.get('show'));
+ var column2 = Column.create({ col: '2', controller: controller });
+ assert.ok(column2.get('show'));
+ var column3 = Column.create({ col: '3', controller: controller });
+ assert.ok(!column3.get('show'));
+});