Fix skills-typeahead tests

app/components/skills-typeahead.js

@@ -39,14 +39,6 @@ export default Component.extend({
   }),
 
   actions: {
-    blur() {
-      set(this, 'hidden', true);
-    },
-
-    focus() {
-      set(this, 'hidden', false);
-    },
-
     hoverSkill(skill) {
       get(this, 'results').forEach((item, index) => {
         if (item === skill) {

app/styles/components/skills-typeahead.scss

@@ -14,7 +14,6 @@
   }
 
   .dropdown-menu {
-    margin-top: 45px;
     min-width: 250px;
   }
 }

app/templates/components/skills-typeahead.hbs

@@ -1,7 +1,7 @@
 {{skills-textfield
   autofocus=autofocus
-  focus-in="focus"
-  focus-out="blur"
+  focus-in=(toggle "hidden" this)
+  focus-out=(toggle "hidden" this)
   getKeyDown=(action "getKeyDown")
   placeholder="Search skills"
   tabindex=tabindex

package.json

@@ -80,6 +80,7 @@
     "ember-modal-dialog": "2.4.0",
     "ember-moment": "^7.4.1",
     "ember-multiselect-checkboxes": "^0.10.3",
+    "ember-native-dom-helpers": "^0.5.6",
     "ember-normalize": "1.0.0",
     "ember-page-title": "3.2.0",
     "ember-power-select": "^1.9.5",

tests/integration/components/skills-typeahead-test.js

@@ -1,11 +1,11 @@
 import RSVP from 'rsvp';
 import { set } from '@ember/object';
-import { run } from '@ember/runloop';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import stubService from 'code-corps-ember/tests/helpers/stub-service';
 import PageObject from 'ember-cli-page-object';
 import skillsTypeaheadComponent from '../../pages/components/skills-typeahead';
+import { focus } from 'ember-native-dom-helpers';
 
 let page = PageObject.create(skillsTypeaheadComponent);
 
@@ -65,25 +65,23 @@ test('it fetches results when changing the input', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
+  page.fillIn('ruby ra');
 
-    assert.equal(page.inputValue, 'ruby ra');
-    page.keydown();
+  assert.equal(page.inputValue, 'ruby ra');
+  page.keydown();
+  focus('input');
 
-    page.inputItems(0).as((item) => {
-      assert.equal(item.highlightedStrings(0).text, 'Ruby');
-      assert.ok(item.listItemIsSelected);
-    });
-
-    page.inputItems(1).as((item) => {
-      assert.equal(item.highlightedStrings(1).text, 'Ra');
-      assert.notOk(item.listItemIsSelected);
-    });
+  page.inputItems(0).as((item) => {
+    assert.equal(item.highlightedStrings(0).text, 'Ruby');
+    assert.ok(item.listItemIsSelected);
+  });
 
-    done();
+  page.inputItems(1).as((item) => {
+    assert.equal(item.highlightedStrings(1).text, 'Ra');
+    assert.notOk(item.listItemIsSelected);
   });
+
+  done();
 });
 
 test('it changes the selection when arrowing up or down', function(assert) {
@@ -92,32 +90,30 @@ test('it changes the selection when arrowing up or down', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
+  page.fillIn('ruby ra');
+  page.keydown();
+  focus('input');
 
-    assert.ok(page.inputItems(0).listItemIsSelected);
-    assert.notOk(page.inputItems(1).listItemIsSelected);
+  assert.ok(page.inputItems(0).listItemIsSelected);
+  assert.notOk(page.inputItems(1).listItemIsSelected);
 
-    page.pressDownKey();
-    assert.notOk(page.inputItems(0).listItemIsSelected);
-    assert.ok(page.inputItems(1).listItemIsSelected);
+  page.pressDownKey();
+  assert.notOk(page.inputItems(0).listItemIsSelected);
+  assert.ok(page.inputItems(1).listItemIsSelected);
 
-    page.pressDownKey();
-    assert.ok(page.inputItems(0).listItemIsSelected);
-    assert.notOk(page.inputItems(1).listItemIsSelected);
+  page.pressDownKey();
+  assert.ok(page.inputItems(0).listItemIsSelected);
+  assert.notOk(page.inputItems(1).listItemIsSelected);
 
-    page.pressUpKey();
-    assert.notOk(page.inputItems(0).listItemIsSelected);
-    assert.ok(page.inputItems(1).listItemIsSelected);
+  page.pressUpKey();
+  assert.notOk(page.inputItems(0).listItemIsSelected);
+  assert.ok(page.inputItems(1).listItemIsSelected);
 
-    page.pressUpKey();
-    assert.ok(page.inputItems(0).listItemIsSelected);
-    assert.notOk(page.inputItems(1).listItemIsSelected);
+  page.pressUpKey();
+  assert.ok(page.inputItems(0).listItemIsSelected);
+  assert.notOk(page.inputItems(1).listItemIsSelected);
 
-    done();
-  });
+  done();
 });
 
 test('it hides and clears input when hitting esc key', function(assert) {
@@ -126,19 +122,17 @@ test('it hides and clears input when hitting esc key', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
+  page.fillIn('ruby ra');
+  page.keydown();
+  focus('input');
 
-    assert.ok(page.dropdownMenuVisible);
+  assert.ok(page.dropdownMenuVisible);
 
-    page.pressEscKey();
+  page.pressEscKey();
 
-    assert.equal(page.inputValue, '');
-    assert.notOk(page.dropdownMenuVisible);
-    done();
-  });
+  assert.equal(page.inputValue, '');
+  assert.notOk(page.dropdownMenuVisible);
+  done();
 });
 
 test('it changes the selection when hovering', function(assert) {
@@ -147,19 +141,17 @@ test('it changes the selection when hovering', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
+  page.fillIn('ruby ra');
+  page.keydown();
+  focus('input');
 
-    assert.ok(page.inputItems(0).listItemIsSelected);
-    assert.notOk(page.inputItems(1).listItemIsSelected);
+  assert.ok(page.inputItems(0).listItemIsSelected);
+  assert.notOk(page.inputItems(1).listItemIsSelected);
 
-    page.mouseenterDropdownSecondItem();
-    assert.notOk(page.inputItems(0).listItemIsSelected);
-    assert.ok(page.inputItems(1).listItemIsSelected);
-    done();
-  });
+  page.mouseenterDropdownSecondItem();
+  assert.notOk(page.inputItems(0).listItemIsSelected);
+  assert.ok(page.inputItems(1).listItemIsSelected);
+  done();
 });
 
 test('it selects the skill when hitting enter', function(assert) {
@@ -168,16 +160,13 @@ test('it selects the skill when hitting enter', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
-    page.pressEnterKey();
+  page.fillIn('ruby ra');
+  page.keydown();
+  page.pressEnterKey();
 
-    assert.equal(page.inputValue, '');
-    assert.ok(page.dropdownMenuHidden);
-    done();
-  });
+  assert.equal(page.inputValue, '');
+  assert.ok(page.dropdownMenuHidden);
+  done();
 });
 
 test('it selects the skill when hitting comma', function(assert) {
@@ -186,15 +175,12 @@ test('it selects the skill when hitting comma', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.pressCommaKey();
+  page.fillIn('ruby ra');
+  page.pressCommaKey();
 
-    assert.equal(page.inputValue, '');
-    assert.ok(page.dropdownMenuHidden);
-    done();
-  });
+  assert.equal(page.inputValue, '');
+  assert.ok(page.dropdownMenuHidden);
+  done();
 });
 
 test('it selects the skill when clicking it', function(assert) {
@@ -203,16 +189,15 @@ test('it selects the skill when clicking it', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
-    page.mousedownDropdownSecondItem();
+  page.fillIn('ruby ra');
+  page.keydown();
+  focus('input');
 
-    assert.equal(page.inputValue, '');
-    assert.ok(page.dropdownMenuHidden);
-    done();
-  });
+  page.mousedownDropdownSecondItem();
+
+  assert.equal(page.inputValue, '');
+  assert.ok(page.dropdownMenuHidden);
+  done();
 });
 
 test('it does nothing when there are no results', function(assert) {
@@ -226,13 +211,10 @@ test('it does nothing when there are no results', function(assert) {
 
   page.render(hbs`{{skills-typeahead selectSkill=(action selectHandler) query=query skillsList=mockListService}}`);
 
-  run(() => {
-    set(this, 'query', 'ruby ra');
-    page.focus();
-    page.keydown();
-    page.pressEnterKey();
+  page.fillIn('ruby ra');
+  page.keydown();
+  page.pressEnterKey();
 
-    assert.equal(page.inputValue, 'ruby ra');
-    done();
-  });
+  assert.equal(page.inputValue, 'ruby ra');
+  done();
 });

yarn.lock

@@ -3570,6 +3570,13 @@ ember-native-dom-helpers@^0.5.4:
     broccoli-funnel "^1.1.0"
     ember-cli-babel "^6.6.0"
 
+ember-native-dom-helpers@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/ember-native-dom-helpers/-/ember-native-dom-helpers-0.5.6.tgz#d9933286c8148c1cac3711d7a83f9feb2a6f6af8"
+  dependencies:
+    broccoli-funnel "^1.1.0"
+    ember-cli-babel "^6.6.0"
+
 ember-normalize@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/ember-normalize/-/ember-normalize-1.0.0.tgz#f5a0077caa1047321a436dd4f2fa7cf944f3b587"