From 04a2e09078041e9f43def245959482b498ac77ae Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 4 Aug 2015 02:56:24 -0700 Subject: [PATCH 1/4] Extract file menu into a component --- app/components/file-menu.js | 33 ++++++++++++++++ app/gist/controller.js | 4 -- app/gist/template.hbs | 52 ++++++-------------------- app/templates/components/file-menu.hbs | 38 +++++++++++++++++++ 4 files changed, 83 insertions(+), 44 deletions(-) create mode 100644 app/components/file-menu.js create mode 100644 app/templates/components/file-menu.hbs diff --git a/app/components/file-menu.js b/app/components/file-menu.js new file mode 100644 index 00000000..ee00ae55 --- /dev/null +++ b/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.sendAction('addFile', type); + }, + renameFile(file) { + this.sendAction('renameFile', file); + }, + removeFile(file) { + this.sendAction('removeFile', file); + }, + saveGist(model) { + this.sendAction('saveGist', model); + }, + share() { + prompt('Ctrl + C ;-)', window.location.href); + }, + fork(model) { + this.sendAction('fork', model); + }, + deleteGist(model) { + this.sendAction('deleteGist', model); + }, + signInViaGithub() { + this.sendAction('signInViaGithub'); + } + } +}); \ No newline at end of file diff --git a/app/gist/controller.js b/app/gist/controller.js index 36e80c79..90ce4e89 100644 --- a/app/gist/controller.js +++ b/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 diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 994191d5..11b052b8 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -1,44 +1,16 @@
- + {{file-menu model=model + session=session + activeEditorCol=activeEditorCol + activeFile=activeFile + addFile="addFile" + renameFile="renameFile" + removeFile="removeFile" + saveGist="saveGist" + fork="fork" + deleteGist="deleteGist" + signInViaGithub="signInViaGithub" + }}
{{!-- {{#if isEditingDescription}} --}} diff --git a/app/templates/components/file-menu.hbs b/app/templates/components/file-menu.hbs new file mode 100644 index 00000000..afdae88d --- /dev/null +++ b/app/templates/components/file-menu.hbs @@ -0,0 +1,38 @@ +
  • + + File + + +
    • \ No newline at end of file From 2fabbe267bf43b0886a22fa9c92b24597c5ff06c Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 4 Aug 2015 09:17:25 -0400 Subject: [PATCH 2/4] Add test for file-menu component --- app/components/file-menu.js | 3 +- app/templates/components/file-menu.hbs | 12 +- .../integration/components/file-menu-test.js | 104 ++++++++++++++++++ 3 files changed, 112 insertions(+), 7 deletions(-) create mode 100644 tests/integration/components/file-menu-test.js diff --git a/app/components/file-menu.js b/app/components/file-menu.js index ee00ae55..00ac563b 100644 --- a/app/components/file-menu.js +++ b/app/components/file-menu.js @@ -27,7 +27,8 @@ export default Ember.Component.extend({ this.sendAction('deleteGist', model); }, signInViaGithub() { + console.log('here'); this.sendAction('signInViaGithub'); } } -}); \ No newline at end of file +}); diff --git a/app/templates/components/file-menu.hbs b/app/templates/components/file-menu.hbs index afdae88d..647042d6 100644 --- a/app/templates/components/file-menu.hbs +++ b/app/templates/components/file-menu.hbs @@ -20,19 +20,19 @@ {{#if activeEditorCol}} -
  • Move {{activeFile.filePath}}
    • -
  • Delete {{activeFile.filePath}}
    • +
  • Move {{activeFile.filePath}}
    • +
  • Delete {{activeFile.filePath}}
    • {{/if}} {{#if session.isAuthenticated}} -
  • Save to Github Gist
    • +
  • Save to Github Gist
    • {{#unless model.isNew}}
  • Share Twiddle
    • -
  • Fork Twiddle
    • -
  • Delete Twiddle
    • +
  • Fork Twiddle
    • +
  • Delete Twiddle
    • {{/unless}} {{else}} -
  • Sign in with Github to Save
    • +
    • {{/if}} \ No newline at end of file diff --git a/tests/integration/components/file-menu-test.js b/tests/integration/components/file-menu-test.js new file mode 100644 index 00000000..7ddfda4e --- /dev/null +++ b/tests/integration/components/file-menu-test.js @@ -0,0 +1,104 @@ +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 +}); + +test('it functions', function(assert) { + assert.expect(13); + + // Set any properties with this.set('myProperty', 'value'); + let file = Ember.Object.create({ + filePath: "some.path.js" + }); + + let model = Ember.Object.create({ + id: '74bae9a34142370ff5a3', + files: [file], + history: [], + isNew: false + }); + + this.set('model', model); + + this.set('session', Ember.Object.create({ + isAuthenticated: true + })); + + this.set('activeEditorCol', 1); + + this.set('activeFile', file); + + // Handle any actions with this.on('myAction', function(val) { ... }); + let addFileCalled = false; + let renameFileCalled = false; + let removeFileCalled = false; + let saveGistCalled = false; + let forkCalled = false; + let deleteGistCalled = false; + let signInViaGithubCalled = false; + + let fileType = null; + let renamedFile = null; + let removedFile = null; + let gistToSave = null; + let gistToFork = null; + let gistToDelete = null; + + this.on('addFile', (type) => { addFileCalled = true; fileType = type; }); + this.on('renameFile', (file) => { renameFileCalled = true; renamedFile = file; }); + this.on('removeFile', (file) => { removeFileCalled = true; removedFile = file; }); + this.on('saveGist', (gist) => { saveGistCalled = true; gistToSave = gist; }); + this.on('fork', (gist) => { forkCalled = true; gistToFork = gist; }); + this.on('deleteGist', (gist) => { deleteGistCalled = true; gistToDelete = gist; }); + this.on('signInViaGithub', () => { signInViaGithubCalled = true; }); + + this.render(hbs`{{file-menu model=model + session=session + activeEditorCol=activeEditorCol + activeFile=activeFile + addFile="addFile" + renameFile="renameFile" + removeFile="removeFile" + saveGist="saveGist" + fork="fork" + deleteGist="deleteGist" + signInViaGithub="signInViaGithub"}}`); + + this.$('.test-template-action').click(); + + assert.ok(addFileCalled, 'addFile was called'); + assert.equal(fileType, 'template', 'addFile was called with type parameter'); + + this.$('.test-rename-action').click(); + + assert.ok(renameFileCalled, 'renameFile was called'); + assert.equal(renamedFile, file, 'renameFile was called with file to rename'); + + this.$('.test-remove-action').click(); + + assert.ok(removeFileCalled, 'removeFile was called'); + assert.equal(removedFile, file, 'removeFile was called with file to remove'); + + this.$('.test-save-action').click(); + + assert.ok(saveGistCalled, 'saveGist was called'); + assert.equal(gistToSave, model, 'saveGist was called with gist to save'); + + this.$('.test-fork-action').click(); + + assert.ok(forkCalled, 'fork was called'); + assert.equal(gistToFork, model, 'fork was called with gist to fork'); + + this.$('.test-delete-action').click(); + + assert.ok(deleteGistCalled, 'deleteGist was called'); + assert.equal(gistToDelete, model, 'deleteGist was called with gist to delete'); + + this.set('session.isAuthenticated', false); + this.$('.test-sign-in-action').click(); + + assert.ok(signInViaGithubCalled, 'signInViaGithub was called'); +}); From ebb14df26247d231ae72167d2acbb63e16134fa7 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 4 Aug 2015 14:14:20 -0400 Subject: [PATCH 3/4] Use closure actions, break up tests --- app/components/file-menu.js | 11 +- app/gist/template.hbs | 10 +- .../integration/components/file-menu-test.js | 142 +++++++++++------- 3 files changed, 95 insertions(+), 68 deletions(-) diff --git a/app/components/file-menu.js b/app/components/file-menu.js index 00ac563b..fad5b638 100644 --- a/app/components/file-menu.js +++ b/app/components/file-menu.js @@ -6,13 +6,13 @@ export default Ember.Component.extend({ actions: { addFile(type) { - this.sendAction('addFile', type); + this.attrs.addFile(type); }, renameFile(file) { - this.sendAction('renameFile', file); + this.attrs.renameFile(file); }, removeFile(file) { - this.sendAction('removeFile', file); + this.attrs.removeFile(file); }, saveGist(model) { this.sendAction('saveGist', model); @@ -21,13 +21,12 @@ export default Ember.Component.extend({ prompt('Ctrl + C ;-)', window.location.href); }, fork(model) { - this.sendAction('fork', model); + this.attrs.fork(model); }, deleteGist(model) { - this.sendAction('deleteGist', model); + this.attrs.deleteGist(model); }, signInViaGithub() { - console.log('here'); this.sendAction('signInViaGithub'); } } diff --git a/app/gist/template.hbs b/app/gist/template.hbs index 11b052b8..3c3a563b 100644 --- a/app/gist/template.hbs +++ b/app/gist/template.hbs @@ -3,12 +3,12 @@ session=session activeEditorCol=activeEditorCol activeFile=activeFile - addFile="addFile" - renameFile="renameFile" - removeFile="removeFile" + addFile=(action "addFile") + renameFile=(action "renameFile") + removeFile=(action "removeFile") saveGist="saveGist" - fork="fork" - deleteGist="deleteGist" + fork=(action "fork") + deleteGist=(action "deleteGist") signInViaGithub="signInViaGithub" }} diff --git a/tests/integration/components/file-menu-test.js b/tests/integration/components/file-menu-test.js index 7ddfda4e..73d8b8af 100644 --- a/tests/integration/components/file-menu-test.js +++ b/tests/integration/components/file-menu-test.js @@ -2,100 +2,128 @@ import Ember from "ember"; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; +let file, model; + +let addFileCalled = false; +let renameFileCalled = false; +let removeFileCalled = false; +let saveGistCalled = false; +let forkCalled = false; +let deleteGistCalled = false; +let signInViaGithubCalled = false; + +let fileType = null; +let renamedFile = null; +let removedFile = null; +let gistToSave = null; +let gistToFork = null; +let gistToDelete = null; + moduleForComponent('file-menu', 'Integration | Component | file menu', { - integration: true -}); + integration: true, + beforeEach() { + + // Set any properties with this.set('myProperty', 'value'); + file = Ember.Object.create({ + filePath: "some.path.js" + }); + + model = Ember.Object.create({ + id: '74bae9a34142370ff5a3', + files: [file], + history: [], + isNew: false + }); + + this.set('model', model); + + this.set('session', Ember.Object.create({ + isAuthenticated: true + })); -test('it functions', function(assert) { - assert.expect(13); - - // Set any properties with this.set('myProperty', 'value'); - let file = Ember.Object.create({ - filePath: "some.path.js" - }); - - let model = Ember.Object.create({ - id: '74bae9a34142370ff5a3', - files: [file], - history: [], - isNew: false - }); - - this.set('model', model); - - this.set('session', Ember.Object.create({ - isAuthenticated: true - })); - - this.set('activeEditorCol', 1); - - this.set('activeFile', file); - - // Handle any actions with this.on('myAction', function(val) { ... }); - let addFileCalled = false; - let renameFileCalled = false; - let removeFileCalled = false; - let saveGistCalled = false; - let forkCalled = false; - let deleteGistCalled = false; - let signInViaGithubCalled = false; - - let fileType = null; - let renamedFile = null; - let removedFile = null; - let gistToSave = null; - let gistToFork = null; - let gistToDelete = null; - - this.on('addFile', (type) => { addFileCalled = true; fileType = type; }); - this.on('renameFile', (file) => { renameFileCalled = true; renamedFile = file; }); - this.on('removeFile', (file) => { removeFileCalled = true; removedFile = file; }); - this.on('saveGist', (gist) => { saveGistCalled = true; gistToSave = gist; }); - this.on('fork', (gist) => { forkCalled = true; gistToFork = gist; }); - this.on('deleteGist', (gist) => { deleteGistCalled = true; gistToDelete = gist; }); - this.on('signInViaGithub', () => { signInViaGithubCalled = true; }); - - this.render(hbs`{{file-menu model=model + this.set('activeEditorCol', 1); + + this.set('activeFile', file); + + // Handle any actions with this.on('myAction', function(val) { ... }); + this.on('addFile', (type) => { addFileCalled = true; fileType = type; }); + this.on('renameFile', (file) => { renameFileCalled = true; renamedFile = file; }); + this.on('removeFile', (file) => { removeFileCalled = true; removedFile = file; }); + this.on('saveGist', (gist) => { saveGistCalled = true; gistToSave = gist; }); + this.on('fork', (gist) => { forkCalled = true; gistToFork = gist; }); + this.on('deleteGist', (gist) => { deleteGistCalled = true; gistToDelete = gist; }); + this.on('signInViaGithub', () => { signInViaGithubCalled = true; }); + + this.render(hbs`{{file-menu model=model session=session activeEditorCol=activeEditorCol activeFile=activeFile - addFile="addFile" - renameFile="renameFile" - removeFile="removeFile" + addFile=(action "addFile") + renameFile=(action "renameFile") + removeFile=(action "removeFile") saveGist="saveGist" - fork="fork" - deleteGist="deleteGist" + 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(addFileCalled, 'addFile was called'); assert.equal(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(renameFileCalled, 'renameFile was called'); assert.equal(renamedFile, 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(removeFileCalled, 'removeFile was called'); assert.equal(removedFile, 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(saveGistCalled, 'saveGist was called'); assert.equal(gistToSave, model, '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(forkCalled, 'fork was called'); assert.equal(gistToFork, model, '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(deleteGistCalled, 'deleteGist was called'); assert.equal(gistToDelete, model, '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(); From 198d521bfe939a63a2103625323a3d27b0b04f88 Mon Sep 17 00:00:00 2001 From: Gaurav Munjal Date: Tue, 4 Aug 2015 15:01:53 -0400 Subject: [PATCH 4/4] Use this --- .../integration/components/file-menu-test.js | 84 +++++++++---------- 1 file changed, 41 insertions(+), 43 deletions(-) diff --git a/tests/integration/components/file-menu-test.js b/tests/integration/components/file-menu-test.js index 73d8b8af..ebc2fbcb 100644 --- a/tests/integration/components/file-menu-test.js +++ b/tests/integration/components/file-menu-test.js @@ -2,40 +2,38 @@ import Ember from "ember"; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -let file, model; - -let addFileCalled = false; -let renameFileCalled = false; -let removeFileCalled = false; -let saveGistCalled = false; -let forkCalled = false; -let deleteGistCalled = false; -let signInViaGithubCalled = false; - -let fileType = null; -let renamedFile = null; -let removedFile = null; -let gistToSave = null; -let gistToFork = null; -let gistToDelete = null; - moduleForComponent('file-menu', 'Integration | Component | file menu', { integration: true, beforeEach() { - // Set any properties with this.set('myProperty', 'value'); - file = Ember.Object.create({ + 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" }); - model = Ember.Object.create({ + this.gist = Ember.Object.create({ id: '74bae9a34142370ff5a3', - files: [file], + files: [this.file], history: [], isNew: false }); - this.set('model', model); + // Set any properties with this.set('myProperty', 'value'); + this.set('model', this.gist); this.set('session', Ember.Object.create({ isAuthenticated: true @@ -43,16 +41,16 @@ moduleForComponent('file-menu', 'Integration | Component | file menu', { this.set('activeEditorCol', 1); - this.set('activeFile', file); + this.set('activeFile', this.file); // Handle any actions with this.on('myAction', function(val) { ... }); - this.on('addFile', (type) => { addFileCalled = true; fileType = type; }); - this.on('renameFile', (file) => { renameFileCalled = true; renamedFile = file; }); - this.on('removeFile', (file) => { removeFileCalled = true; removedFile = file; }); - this.on('saveGist', (gist) => { saveGistCalled = true; gistToSave = gist; }); - this.on('fork', (gist) => { forkCalled = true; gistToFork = gist; }); - this.on('deleteGist', (gist) => { deleteGistCalled = true; gistToDelete = gist; }); - this.on('signInViaGithub', () => { signInViaGithubCalled = true; }); + 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 @@ -73,8 +71,8 @@ test('it calls addFile on clicking an add file menu item', function(assert) { this.$('.test-template-action').click(); - assert.ok(addFileCalled, 'addFile was called'); - assert.equal(fileType, 'template', 'addFile was called with type parameter'); + 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) { @@ -82,8 +80,8 @@ test("it calls renameFile on clicking 'Rename'", function(assert) { this.$('.test-rename-action').click(); - assert.ok(renameFileCalled, 'renameFile was called'); - assert.equal(renamedFile, file, 'renameFile was called with file to rename'); + 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) { @@ -91,8 +89,8 @@ test("it calls removeFile on clicking 'Remove'", function(assert) { this.$('.test-remove-action').click(); - assert.ok(removeFileCalled, 'removeFile was called'); - assert.equal(removedFile, file, 'removeFile was called with file to remove'); + 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) { @@ -100,8 +98,8 @@ test("it calls saveGist on clicking 'Save to Github'", function(assert) { this.$('.test-save-action').click(); - assert.ok(saveGistCalled, 'saveGist was called'); - assert.equal(gistToSave, model, 'saveGist was called with gist to save'); + 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) { @@ -109,8 +107,8 @@ test("it calls fork on clicking 'Fork Twiddle'", function(assert) { this.$('.test-fork-action').click(); - assert.ok(forkCalled, 'fork was called'); - assert.equal(gistToFork, model, 'fork was called with gist to fork'); + 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) { @@ -118,8 +116,8 @@ test("it calls deleteGist on clicking 'Delete Twiddle'", function(assert) { this.$('.test-delete-action').click(); - assert.ok(deleteGistCalled, 'deleteGist was called'); - assert.equal(gistToDelete, model, 'deleteGist was called with gist to delete'); + 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) { @@ -128,5 +126,5 @@ test("it calls signInViaGithub when clicking on 'Sign In To Github To Save'", fu this.set('session.isAuthenticated', false); this.$('.test-sign-in-action').click(); - assert.ok(signInViaGithubCalled, 'signInViaGithub was called'); + assert.ok(this.signInViaGithubCalled, 'signInViaGithub was called'); });