Extract File menu into a component

app/components/file-menu.js

@@ -0,0 +1,33 @@
+import Ember from "ember";
+
+export default Ember.Component.extend({
+  tagName: 'ul',
+  classNames: ['nav', 'nav-pills', 'file-menu'],
+
+  actions: {
+    addFile(type) {
+      this.attrs.addFile(type);
+    },
+    renameFile(file) {
+      this.attrs.renameFile(file);
+    },
+    removeFile(file) {
+      this.attrs.removeFile(file);
+    },
+    saveGist(model) {
+      this.sendAction('saveGist', model);
+    },
+    share() {
+      prompt('Ctrl + C ;-)', window.location.href);
+    },
+    fork(model) {
+      this.attrs.fork(model);
+    },
+    deleteGist(model) {
+      this.attrs.deleteGist(model);
+    },
+    signInViaGithub() {
+      this.sendAction('signInViaGithub');
+    }
+  }
+});

app/gist/controller.js

@@ -112,10 +112,6 @@ export default Ember.Controller.extend({
       }
     },
 
-    share () {
-      prompt('Ctrl + C ;-)', window.location.href);
-    },
-
     /**
      * Add a new file to the model
      * @param {String|null} type Blueprint name or null for empty file

app/gist/template.hbs

@@ -1,44 +1,16 @@
 <div class="row toolbar">
-  <ul class="nav nav-pills file-menu">
-    <li class="dropdown">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-        File <b class="caret"></b>
-      </a>
-      <ul class="dropdown-menu">
-        <li>{{#link-to 'gist.new'}}New Twiddle{{/link-to}}</li>
-        <li role="presentation" class="divider"></li>
-        <li class="dropdown-submenu">
-          <a tabindex="-1" href="#">Add...</a>
-          <ul class="dropdown-menu">
-            <li><a {{action 'addFile' ''}}>Other (empty file)</a></li>
-            <li><a {{action 'addFile' 'component-hbs'}}>Component (hbs)</a></li>
-            <li><a {{action 'addFile' 'component-js'}}>Component (js)</a></li>
-            <li><a {{action 'addFile' 'model'}}>Model</a></li>
-            <li><a {{action 'addFile' 'controller'}}>Controller</a></li>
-            <li><a {{action 'addFile' 'route'}}>Route</a></li>
-            <li><a {{action 'addFile' 'template'}} class="test-template-action">Template</a></li>
-            <li><a {{action 'addFile' 'router'}}>Router</a></li>
-            <li><a {{action 'addFile' 'css'}}>CSS</a></li>
-          </ul>
-        </li>
-        {{#if activeEditorCol}}
-        <li><a {{action 'renameFile' activeFile}}>Move {{activeFile.filePath}}</a></li>
-        <li><a {{action 'removeFile' activeFile}}>Delete {{activeFile.filePath}}</a></li>
-        {{/if}}
-        {{#if session.isAuthenticated}}
-        <li role="presentation" class="divider"></li>
-        <li><a {{action 'saveGist' model}}>Save to Github Gist</a></li>
-        {{#unless model.isNew}}
-        <li><a {{action 'share'}}>Share Twiddle</a></li>
-        <li><a {{action 'fork' model}}>Fork Twiddle</a></li>
-        <li><a {{action 'deleteGist' model}}>Delete Twiddle</a></li>
-        {{/unless}}
-        {{else}}
-        <li><a {{action 'signInViaGithub'}}>Sign in with Github to Save</a></li>
-        {{/if}}
-      </ul>
-    </li>
-  </ul>
+  {{file-menu model=model
+              session=session
+              activeEditorCol=activeEditorCol
+              activeFile=activeFile
+              addFile=(action "addFile")
+              renameFile=(action "renameFile")
+              removeFile=(action "removeFile")
+              saveGist="saveGist"
+              fork=(action "fork")
+              deleteGist=(action "deleteGist")
+              signInViaGithub="signInViaGithub"
+  }}
 
   <div class="title">
     {{!-- {{#if isEditingDescription}} --}}

app/templates/components/file-menu.hbs

@@ -0,0 +1,38 @@
+<li class="dropdown">
+  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+    File <b class="caret"></b>
+  </a>
+  <ul class="dropdown-menu">
+    <li>{{#link-to 'gist.new'}}New Twiddle{{/link-to}}</li>
+    <li role="presentation" class="divider"></li>
+    <li class="dropdown-submenu">
+      <a tabindex="-1" href="#">Add...</a>
+      <ul class="dropdown-menu">
+        <li><a {{action 'addFile' ''}}>Other (empty file)</a></li>
+        <li><a {{action 'addFile' 'component-hbs'}}>Component (hbs)</a></li>
+        <li><a {{action 'addFile' 'component-js'}}>Component (js)</a></li>
+        <li><a {{action 'addFile' 'model'}}>Model</a></li>
+        <li><a {{action 'addFile' 'controller'}}>Controller</a></li>
+        <li><a {{action 'addFile' 'route'}}>Route</a></li>
+        <li><a {{action 'addFile' 'template'}} class="test-template-action">Template</a></li>
+        <li><a {{action 'addFile' 'router'}}>Router</a></li>
+        <li><a {{action 'addFile' 'css'}}>CSS</a></li>
+      </ul>
+    </li>
+    {{#if activeEditorCol}}
+      <li><a {{action 'renameFile' activeFile}} class="test-rename-action">Move {{activeFile.filePath}}</a></li>
+      <li><a {{action 'removeFile' activeFile}} class="test-remove-action">Delete {{activeFile.filePath}}</a></li>
+    {{/if}}
+    {{#if session.isAuthenticated}}
+      <li role="presentation" class="divider"></li>
+      <li><a {{action 'saveGist' model}} class="test-save-action">Save to Github Gist</a></li>
+      {{#unless model.isNew}}
+        <li><a {{action 'share'}}>Share Twiddle</a></li>
+        <li><a {{action 'fork' model}} class="test-fork-action">Fork Twiddle</a></li>
+        <li><a {{action 'deleteGist' model}} class="test-delete-action">Delete Twiddle</a></li>
+      {{/unless}}
+    {{else}}
+      <li><a {{action 'signInViaGithub'}} class="test-sign-in-action">Sign in with Github to Save</a></li>
+    {{/if}}
+  </ul>
+</li>

tests/integration/components/file-menu-test.js

@@ -0,0 +1,130 @@
+import Ember from "ember";
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('file-menu', 'Integration | Component | file menu', {
+  integration: true,
+  beforeEach() {
+
+    this.addFileCalled = false;
+    this.renameFileCalled = false;
+    this.removeFileCalled = false;
+    this.saveGistCalled = false;
+    this.forkCalled = false;
+    this.deleteGistCalled = false;
+    this.signInViaGithubCalled = false;
+
+    this.fileType = null;
+    this.renamedFile = null;
+    this.removedFile = null;
+    this.gistToSave = null;
+    this.gistToFork = null;
+    this.gistToDelete = null;
+
+    this.file = Ember.Object.create({
+      filePath: "some.path.js"
+    });
+
+    this.gist = Ember.Object.create({
+      id: '74bae9a34142370ff5a3',
+      files: [this.file],
+      history: [],
+      isNew: false
+    });
+
+    // Set any properties with this.set('myProperty', 'value');
+    this.set('model', this.gist);
+
+    this.set('session', Ember.Object.create({
+      isAuthenticated: true
+    }));
+
+    this.set('activeEditorCol', 1);
+
+    this.set('activeFile', this.file);
+
+    // Handle any actions with this.on('myAction', function(val) { ... });
+    this.on('addFile', (type) => { this.addFileCalled = true; this.fileType = type; });
+    this.on('renameFile', (file) => { this.renameFileCalled = true; this.renamedFile = file; });
+    this.on('removeFile', (file) => { this.removeFileCalled = true; this.removedFile = file; });
+    this.on('saveGist', (gist) => { this.saveGistCalled = true; this.gistToSave = gist; });
+    this.on('fork', (gist) => { this.forkCalled = true; this.gistToFork = gist; });
+    this.on('deleteGist', (gist) => { this.deleteGistCalled = true; this.gistToDelete = gist; });
+    this.on('signInViaGithub', () => { this.signInViaGithubCalled = true; });
+
+    this.render(hbs`{{file-menu model=model
+                              session=session
+                              activeEditorCol=activeEditorCol
+                              activeFile=activeFile
+                              addFile=(action "addFile")
+                              renameFile=(action "renameFile")
+                              removeFile=(action "removeFile")
+                              saveGist="saveGist"
+                              fork=(action "fork")
+                              deleteGist=(action "deleteGist")
+                              signInViaGithub="signInViaGithub"}}`);
+  }
+});
+
+test('it calls addFile on clicking an add file menu item', function(assert) {
+  assert.expect(2);
+
+  this.$('.test-template-action').click();
+
+  assert.ok(this.addFileCalled, 'addFile was called');
+  assert.equal(this.fileType, 'template', 'addFile was called with type parameter');
+});
+
+test("it calls renameFile on clicking 'Rename'", function(assert) {
+  assert.expect(2);
+
+  this.$('.test-rename-action').click();
+
+  assert.ok(this.renameFileCalled, 'renameFile was called');
+  assert.equal(this.renamedFile, this.file, 'renameFile was called with file to rename');
+});
+
+test("it calls removeFile on clicking 'Remove'", function(assert) {
+  assert.expect(2);
+
+  this.$('.test-remove-action').click();
+
+  assert.ok(this.removeFileCalled, 'removeFile was called');
+  assert.equal(this.removedFile, this.file, 'removeFile was called with file to remove');
+});
+
+test("it calls saveGist on clicking 'Save to Github'", function(assert) {
+  assert.expect(2);
+
+  this.$('.test-save-action').click();
+
+  assert.ok(this.saveGistCalled, 'saveGist was called');
+  assert.equal(this.gistToSave, this.gist, 'saveGist was called with gist to save');
+});
+
+test("it calls fork on clicking 'Fork Twiddle'", function(assert) {
+  assert.expect(2);
+
+  this.$('.test-fork-action').click();
+
+  assert.ok(this.forkCalled, 'fork was called');
+  assert.equal(this.gistToFork, this.gist, 'fork was called with gist to fork');
+});
+
+test("it calls deleteGist on clicking 'Delete Twiddle'", function(assert) {
+  assert.expect(2);
+
+  this.$('.test-delete-action').click();
+
+  assert.ok(this.deleteGistCalled, 'deleteGist was called');
+  assert.equal(this.gistToDelete, this.gist, 'deleteGist was called with gist to delete');
+});
+
+test("it calls signInViaGithub when clicking on 'Sign In To Github To Save'", function(assert) {
+  assert.expect(1);
+
+  this.set('session.isAuthenticated', false);
+  this.$('.test-sign-in-action').click();
+
+  assert.ok(this.signInViaGithubCalled, 'signInViaGithub was called');
+});