Adds keyboard shortcut option to comment javascript code. (#622)

* adds shortcut comment option for javascript code

* Adds test

* change from `keypress` to `keydown` to trigger events

* comment logic moved to initializer

* fix test server shutdown

Author: gokatz

.eslintrc.js

@@ -31,7 +31,8 @@ module.exports = {
     visit: true,
     waitForLoadedIFrame: true,
     waitForUnloadedIFrame: true,
-    '$': true
+    '$': true,
+    CodeMirror: false
   },
   rules: {
     'ember/new-module-imports': 'off'

app/initializers/app-initializer.js

@@ -0,0 +1,11 @@
+export function initialize(/* application */) {
+  // adds "toggleCommentIndented" command to codemirror for default keymap
+
+  if (CodeMirror) {
+    CodeMirror.keyMap.default['Cmd-/'] = 'toggleCommentIndented';
+  }
+}
+
+export default {
+  initialize
+};

app/templates/components/editor-mode-menu.hbs

@@ -1,5 +1,5 @@
 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-  Keystroke Mode <b class="caret"></b>
+  Keystroke - {{selectedKeyMap}} <b class="caret"></b>
 </a>
 
 <ul class="dropdown-menu dropdown-menu-right">

app/templates/components/gist-header.hbs

@@ -37,7 +37,7 @@
                   downloadProject=(route-action "downloadProject")
       }}
 
-      {{editor-mode-menu setKeyMap=(action this.attrs.setEditorKeyMap)}}
+      {{editor-mode-menu selectedKeyMap=selectedKeyMap setKeyMap=(action this.attrs.setEditorKeyMap)}}
 
       {{versions-menu versionSelected=(action this.attrs.versionSelected)
                       emberVersions=emberVersions

app/templates/components/main-gist.hbs

@@ -4,6 +4,7 @@
               activeEditorCol=activeEditorCol
               activeFile=activeFile
               isRevision=isRevision
+              selectedKeyMap=settings.keyMap
               titleChanged=(action "titleChanged")
               addFile=(action "addFile")
               addHelper=(action "addHelper")

ember-cli-build.js

@@ -40,7 +40,8 @@ module.exports = function(defaults) {
     },
     codemirror: {
       modes: ['xml', 'javascript', 'handlebars', 'htmlmixed', 'css'],
-      keyMaps: ['emacs', 'sublime', 'vim']
+      keyMaps: ['emacs', 'sublime', 'vim'],
+      addonFiles: ['comment/comment.js']
     },
     'ember-cli-bootstrap-sassy': {
       'js': ['dropdown', 'collapse']

tests/acceptance/code-comment-test.js

@@ -0,0 +1,53 @@
+import { test } from 'qunit';
+import moduleForAcceptance from 'ember-twiddle/tests/helpers/module-for-acceptance';
+
+moduleForAcceptance('Acceptance | code comment');
+
+test('checks javascript comment option', async function(assert) {
+  const files = [
+    {
+      filename: "application.controller.js",
+      content: `import Ember from "ember";
+                export default Ember.Controller.extend({
+                  appName: 'Ember Twiddle'
+                });`
+    },
+    {
+      filename: "application.template.hbs",
+      content: "Welcome to {{appName}}"
+    }
+  ];
+
+
+  await runGist(files);
+
+  let textboxNode = 'textarea:eq(1)';
+  textboxNode = '.CodeMirror textarea';
+  await click(textboxNode);
+
+  await triggerEvent(textboxNode, 'keydown', {
+    keyCode: 65, // 'A'
+    metaKey: true
+  });
+
+  await triggerEvent(textboxNode, 'keydown', {
+    keyCode: 191, // '/'
+    metaKey: true
+  });
+
+  let [firstLine] = find('.CodeMirror-line');
+  let content = firstLine.textContent;
+
+  assert.ok(content.startsWith('//'), 'Line has been commented');
+
+  await triggerEvent(textboxNode, 'keydown', {
+    keyCode: 191, // '/'
+    metaKey: true
+  });
+
+  [firstLine] = find('.CodeMirror-line');
+  content = firstLine.textContent;
+
+  assert.notOk(content.startsWith('//'), 'Line has been uncommented');
+
+});

tests/helpers/destroy-app.js

@@ -3,6 +3,6 @@ import { run } from '@ember/runloop';
 export default function destroyApp(application) {
   run(() => {
     application.destroy();
-    window.server.shutdown();
+    window.server && window.server.shutdown();
   });
 }

tests/unit/initializers/app-initializer-test.js

@@ -0,0 +1,26 @@
+import Application from '@ember/application';
+import { run } from '@ember/runloop';
+
+import { initialize } from 'ember-twiddle/initializers/app-initializer';
+import { module, test } from 'qunit';
+import destroyApp from '../../helpers/destroy-app';
+
+module('Unit | Initializer | app initializer', {
+  beforeEach() {
+    run(() => {
+      this.application = Application.create();
+      this.application.deferReadiness();
+    });
+  },
+  afterEach() {
+    destroyApp(this.application);
+  }
+});
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  initialize(this.application);
+
+  // you would normally confirm the results of the initializer here
+  assert.ok(true);
+});