Add testing for global key components

wherehows-web/app/components/hotkeys/global-hotkeys.ts

@@ -59,10 +59,12 @@ export default class GlobalHotkeys extends Component {
    * native DOM events) so instead we are using this native event listener
    */
   didInsertElement() {
-    document.getElementsByClassName('ember-application')[0].addEventListener('keyup', this.onKeyUp.bind(this));
+    const applicationBody = document.getElementsByClassName('ember-application')[0];
+    applicationBody && applicationBody.addEventListener('keyup', this.onKeyUp.bind(this));
   }
 
   willDestroyElement() {
-    document.getElementsByClassName('ember-application')[0].removeEventListener('keyup', this.onKeyUp.bind(this));
+    const applicationBody = document.getElementsByClassName('ember-application')[0];
+    applicationBody && applicationBody.removeEventListener('keyup', this.onKeyUp.bind(this));
   }
 }

wherehows-web/app/templates/application.hbs

@@ -2,24 +2,24 @@
 {{hotkeys/global-hotkeys}}
 
 {{#if session.isAuthenticated}}
-    {{partial "navbar"}}
-    {{!-- banner-alert-offset pushes the app view down to show the banner at the top above the navbar --}}
-    <div class="app-container {{if banners.isShowingBanners "banner-alert-offset"}}">
-      {{#hero-container}}
-        <header class="nacho-hero__header">
-          Search for datasets
-        </header>
-        <section class="nacho-hero__content">
-          {{search-bar-form didSearch=(action "didSearch")}}
-        </section>
-      {{/hero-container}}
-
-      <section class="container-fluid">
-        {{partial "main"}}
+  {{partial "navbar"}}
+  {{!-- banner-alert-offset pushes the app view down to show the banner at the top above the navbar --}}
+  <div class="app-container {{if banners.isShowingBanners "banner-alert-offset"}}">
+    {{#hero-container}}
+      <header class="nacho-hero__header">
+        Search for datasets
+      </header>
+      <section class="nacho-hero__content">
+        {{search-bar-form didSearch=(action "didSearch")}}
       </section>
-    </div>
+    {{/hero-container}}
 
-    {{notifications-service service=notifications}}
+    <section class="container-fluid">
+      {{partial "main"}}
+    </section>
+  </div>
+
+  {{notifications-service service=notifications}}
 {{else}}
   {{outlet "login"}}
 {{/if}}

wherehows-web/tests/integration/components/hotkeys/global-hotkeys-test.js

@@ -1,26 +1,43 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, triggerKeyEvent } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import Service from '@ember/service';
+import { Keyboard } from 'wherehows-web/constants/keyboard';
 
 module('Integration | Component | hotkeys/global-hotkeys', function(hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
     await render(hbs`{{hotkeys/global-hotkeys}}`);
-
     assert.equal(this.element.textContent.trim(), '');
+  });
 
-    // Template block usage:
-    await render(hbs`
-      {{#hotkeys/global-hotkeys}}
-        template block text
-      {{/hotkeys/global-hotkeys}}
-    `);
+  test('it detects target elligibility', async function(assert) {
+    const HotKeyService = Service.extend({
+      applyKeyMapping(keyCode) {
+        assert.ok(true, 'Applied key mapping is called for key: ' + keyCode);
+      }
+    });
 
-    assert.equal(this.element.textContent.trim(), 'template block text');
+    this.owner.register('service:hot-keys', HotKeyService);
+    assert.expect(2);
+
+    await render(hbs`<div class="ember-application">
+                       {{#hotkeys/global-hotkeys}}
+                         <div id="pika-test"></div>
+                       {{/hotkeys/global-hotkeys}}
+                     </div>`);
+
+    assert.ok(this.element, 'Still renders without errors');
+    triggerKeyEvent('#pika-test', 'keyup', Keyboard.Slash);
+
+    await render(hbs`<div class="ember-application">
+                       {{#hotkeys/global-hotkeys}}
+                         <input id="pika-test">
+                       {{/hotkeys/global-hotkeys}}
+                     </div>`);
+    // This is expected to not call our apply method, hence only 2 assertions in this test
+    triggerKeyEvent('#pika-test', 'keyup', Keyboard.Slash);
   });
 });

wherehows-web/tests/unit/services/hot-keys-test.js

@@ -1,12 +1,31 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
+import { Keyboard } from 'wherehows-web/constants/keyboard';
 
 module('Unit | Service | hot-keys', function(hooks) {
   setupTest(hooks);
 
-  // Replace this with your real tests.
   test('it exists', function(assert) {
-    let service = this.owner.lookup('service:hot-keys');
+    const service = this.owner.lookup('service:hot-keys');
     assert.ok(service);
   });
+
+  test('it operates as intended', function(assert) {
+    const service = this.owner.lookup('service:hot-keys');
+    const theFloorIsLava = () => {
+      assert.ok(true, 'The registered function was successfully called');
+    };
+    const theChairsArePeople = () => {
+      assert.ok(false, 'This function should not run after being unregistered');
+    };
+
+    assert.expect(2);
+    assert.ok(service);
+    service.registerKeyMapping(Keyboard.ArrowUp, theFloorIsLava);
+    service.applyKeyMapping(Keyboard.ArrowUp);
+
+    service.registerKeyMapping(Keyboard.Enter, theChairsArePeople);
+    service.clearKeyMapping(Keyboard.Enter);
+    service.applyKeyMapping(Keyboard.Enter);
+  });
 });