Fix `select-box` Qunit tests to use the proper Ember test helpers.

test/javascripts/components/select-box-test.js.es6

@@ -10,12 +10,13 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    click(this.$(".select-box-header"));
+    click(".select-box-header");
+
     andThen(() => {
-      assert.equal(this.$(".select-box-row .text").html().trim(), "robin");
+      assert.equal(find(".select-box-row .text").html().trim(), "robin");
+      this.set("content", [{ id: 1, text: "regis" }]);
+      assert.equal(find(".select-box-row .text").html().trim(), "regis");
     });
-    andThen(() => this.set("content", [{id:1, text:"regis"}]));
-    andThen(() => assert.equal(this.$(".select-box-row .text").html().trim(), "regis"));
   }
 });
 
@@ -28,17 +29,20 @@ componentTest('accepts a value by reference', {
   },
 
   test(assert) {
-    click(this.$(".select-box-header"));
-    andThen(() => {
-      assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin", "it highlights the row corresponding to the value");
-    });
+    click(".select-box-header");
 
     andThen(() => {
-      click(this.$(".select-box-row[title='robin']"));
+      assert.equal(
+        this.$(".select-box-row.is-highlighted .text").html().trim(), "robin",
+        "it highlights the row corresponding to the value"
+      );
+    });
+
+    click(".select-box-row[title='robin']");
+
     andThen(() => {
       assert.equal(this.get("value"), 1, "it mutates the value");
     });
-    });
   }
 });
 
@@ -50,20 +54,24 @@ componentTest('select-box can be filtered', {
   },
 
   test(assert) {
-    click(this.$(".select-box-header"));
-    andThen(() => assert.equal(this.$(".filter-query").length, 1, "it has a search input"));
+    click(".select-box-header");
+
+    andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
+
+    fillIn(".filter-query", "regis");
+    triggerEvent('.filter-query', 'keyup');
+
+    andThen(() => assert.equal(find(".select-box-row").length, 1, "it filters results"));
+
+    fillIn(".filter-query", "");
+    triggerEvent('.filter-query', 'keyup');
 
     andThen(() => {
-      this.$(".filter-query").val("regis");
-      this.$(".filter-query").trigger("keyup");
+      assert.equal(
+        find(".select-box-row").length, 2,
+        "it returns to original content when filter is empty"
+      );
     });
-    andThen(() => assert.equal(this.$(".select-box-row").length, 1, "it filters results"));
-
-    andThen(() => {
-      this.$(".filter-query").val("");
-      this.$(".filter-query").trigger("keyup");
-    });
-    andThen(() => assert.equal(this.$(".select-box-row").length, 2, "it returns to original content when filter is empty"));
   }
 });
 
@@ -87,9 +95,10 @@ componentTest('default search icon', {
   template: '{{select-box filterable=true}}',
 
   test(assert) {
-    click(this.$(".select-box-header"));
+    click(".select-box-header");
+
     andThen(() => {
-      assert.equal(this.$(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-search d-icon d-icon-search\"></i>", "it has a the correct icon");
+      assert.equal(find(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-search d-icon d-icon-search\"></i>", "it has a the correct icon");
     });
   }
 });
@@ -98,9 +107,10 @@ componentTest('with no search icon', {
   template: '{{select-box filterable=true searchIcon=null}}',
 
   test(assert) {
-    click(this.$(".select-box-header"));
+    click(".select-box-header");
+
     andThen(() => {
-      assert.equal(this.$(".search-icon").length, 0, "it has no icon");
+      assert.equal(find(".search-icon").length, 0, "it has no icon");
     });
   }
 });
@@ -109,9 +119,10 @@ componentTest('custom search icon', {
   template: '{{select-box filterable=true filterIcon="shower"}}',
 
   test(assert) {
-    click(this.$(".select-box-header"));
+    click(".select-box-header");
+
     andThen(() => {
-      assert.equal(this.$(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-shower d-icon d-icon-shower\"></i>", "it has a the correct icon");
+      assert.equal(find(".select-box-filter .filter-icon").html().trim(), "<i class=\"fa fa-shower d-icon d-icon-shower\"></i>", "it has a the correct icon");
     });
   }
 });
@@ -119,9 +130,10 @@ componentTest('custom search icon', {
 componentTest('not filterable by default', {
   template: '{{select-box}}',
   test(assert) {
-    click(this.$(".select-box-header"));
+    click(".select-box-header");
+
     andThen(() => {
-      assert.equal(this.$(".select-box-filter").length, 0);
+      assert.equal(find(".select-box-filter").length, 0);
     });
   }
 });
@@ -131,11 +143,13 @@ componentTest('select-box is expandable', {
   template: '{{select-box}}',
   test(assert) {
     click(".select-box-header");
+
     andThen(() => {
       assert.equal(this.$(".select-box").hasClass("is-expanded"), true);
     });
 
     click(".select-box-header");
+
     andThen(() => {
       assert.equal(this.$(".select-box").hasClass("is-expanded"), false);
     });
@@ -152,6 +166,7 @@ componentTest('accepts custom id/text keys', {
 
   test(assert) {
     click(this.$(".select-box-header"));
+
     andThen(() => {
       assert.equal(this.$(".select-box-row.is-highlighted .text").html().trim(), "robin");
     });
@@ -169,6 +184,7 @@ componentTest('doesn’t render collection content before first expand', {
     assert.equal(this.$(".select-box-body .collection").length, 0);
 
     click(this.$(".select-box-header"));
+
     andThen(() => {
       assert.equal(this.$(".select-box-body .collection").length, 1);
     });
@@ -184,21 +200,21 @@ componentTest('persists filter state when expandind/collapsing', {
 
   test(assert) {
     click(this.$(".select-box-header"));
-    andThen(() => {
-      this.$(".filter-query").val("rob");
-      this.$(".filter-query").trigger("keyup");
-    });
+    fillIn('.filter-query', 'rob');
+    triggerEvent('.filter-query', 'keyup');
 
     andThen(() => {
       assert.equal(this.$(".select-box-row").length, 1);
     });
 
     click(this.$(".select-box-header"));
+
     andThen(() => {
       assert.equal(this.$().hasClass("is-expanded"), false);
     });
 
     click(this.$(".select-box-header"));
+
     andThen(() => {
       assert.equal(this.$(".select-box-row").length, 1);
     });
@@ -216,6 +232,7 @@ componentTest('supports options to limit size', {
     assert.equal(this.$(".select-box-header").outerWidth(), 100, "it limits the width");
 
     click(this.$(".select-box-header"));
+
     andThen(() => {
       assert.equal(this.$(".select-box-body").height(), 20, "it limits the height");
     });