FEATURE: support for multi-combo-box

test/javascripts/acceptance/admin-suspend-user-test.js.es6

@@ -44,8 +44,8 @@ QUnit.test("suspend, then unsuspend a user", assert => {
   andThen(() => {
     assert.equal(find('.perform-suspend[disabled]').length, 1, 'disabled by default');
 
-    expandSelectBox('.suspend-until .combobox');
-    selectBoxSelectRow('tomorrow', { selector: '.suspend-until .combobox'});
+    expandSelectBoxKit('.suspend-until .combobox');
+    selectBoxKitSelectRow('tomorrow', { selector: '.suspend-until .combobox'});
   });
 
   fillIn('.suspend-reason', "for breaking the rules");

test/javascripts/acceptance/category-chooser-test.js.es6

@@ -11,7 +11,7 @@ QUnit.test("does not display uncategorized if not allowed", assert => {
   visit("/");
   click('#create-topic');
 
-  expandSelectBox('.category-chooser');
+  ('.category-chooser');
 
   andThen(() => {
     assert.ok(selectBox('.category-chooser').rowByIndex(0).name() !== 'uncategorized');

test/javascripts/acceptance/category-edit-test.js.es6

@@ -75,9 +75,9 @@ QUnit.test("Subcategory list settings", assert => {
 
   click('.edit-category-general');
 
-  expandSelectBox('.edit-category-tab-general .category-chooser');
+  expandSelectBoxKit('.edit-category-tab-general .category-chooser');
 
-  selectBoxSelectRow(3, {selector: '.edit-category-tab-general .category-chooser'});
+  selectBoxKitSelectRow(3, {selector: '.edit-category-tab-general .category-chooser'});
 
   click('.edit-category-settings');
   andThen(() => {

test/javascripts/acceptance/search-full-test.js.es6

@@ -257,8 +257,8 @@ QUnit.test("update in filter through advanced search ui", assert => {
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
 
-  expandSelectBox('.search-advanced-options .select-box-kit#in');
-  selectBoxSelectRow('bookmarks', { selector: '.search-advanced-options .select-box-kit#in' });
+  expandSelectBoxKit('.search-advanced-options .select-box-kit#in');
+  selectBoxKitSelectRow('bookmarks', { selector: '.search-advanced-options .select-box-kit#in' });
   fillIn('.search-advanced-options .select-box-kit#in', 'bookmarks');
 
   andThen(() => {
@@ -271,8 +271,8 @@ QUnit.test("update status through advanced search ui", assert => {
   visit("/search");
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
-  expandSelectBox('.search-advanced-options .select-box-kit#status');
-  selectBoxSelectRow('closed', { selector: '.search-advanced-options .select-box-kit#status' });
+  expandSelectBoxKit('.search-advanced-options .select-box-kit#status');
+  selectBoxKitSelectRow('closed', { selector: '.search-advanced-options .select-box-kit#status' });
   fillIn('.search-advanced-options .select-box-kit#status', 'closed');
 
   andThen(() => {
@@ -286,8 +286,8 @@ QUnit.test("update post time through advanced search ui", assert => {
   fillIn('.search input.full-page-search', 'none');
   click('.search-advanced-btn');
   fillIn('#search-post-date', '2016-10-05');
-  expandSelectBox('.search-advanced-options .select-box-kit#postTime');
-  selectBoxSelectRow('after', { selector: '.search-advanced-options .select-box-kit#postTime' });
+  expandSelectBoxKit('.search-advanced-options .select-box-kit#postTime');
+  selectBoxKitSelectRow('after', { selector: '.search-advanced-options .select-box-kit#postTime' });
   fillIn('.search-advanced-options .select-box-kit#postTime', 'after');
 
   andThen(() => {

test/javascripts/acceptance/search-test.js.es6

@@ -89,7 +89,7 @@ QUnit.test("Search with context", assert => {
 QUnit.test("Right filters are shown to anonymous users", assert => {
   visit("/search?expanded=true");
 
-  expandSelectBox(".select-box-kit#in");
+  expandSelectBoxKit(".select-box-kit#in");
 
   andThen(() => {
     assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));
@@ -115,7 +115,7 @@ QUnit.test("Right filters are shown to logged-in users", assert => {
   Discourse.reset();
   visit("/search?expanded=true");
 
-  expandSelectBox(".select-box-kit#in");
+  expandSelectBoxKit(".select-box-kit#in");
 
   andThen(() => {
     assert.ok(exists('.select-box-kit#in .select-box-kit-row[data-value=first]'));

test/javascripts/acceptance/topic-notifications-button-test.js.es6

@@ -28,8 +28,8 @@ QUnit.test("Updating topic notification level", assert => {
     );
   });
 
-  expandSelectBox(notificationOptions);
-  selectBoxSelectRow("3", { selector: notificationOptions});
+  expandSelectBoxKit(notificationOptions);
+  selectBoxKitSelectRow("3", { selector: notificationOptions});
 
   andThen(() => {
     assert.equal(

test/javascripts/acceptance/topic-test.js.es6

@@ -53,9 +53,9 @@ QUnit.test("Updating the topic title and category", assert => {
 
   fillIn('#edit-title', 'this is the new title');
 
-  expandSelectBox('.title-wrapper .category-chooser');
+  expandSelectBoxKit('.title-wrapper .category-chooser');
 
-  selectBoxSelectRow(4, {selector: '.title-wrapper .category-chooser'});
+  selectBoxKitSelectRow(4, {selector: '.title-wrapper .category-chooser'});
 
   click('#topic-title .submit-edit');
 

test/javascripts/components/categories-admin-dropdown-test.js.es6

@@ -10,7 +10,7 @@ componentTest('default', {
     assert.equal($selectBox.el.find(".d-icon-bars").length, 1);
     assert.equal($selectBox.el.find(".d-icon-caret-down").length, 1);
 
-    expandSelectBox('.categories-admin-dropdown');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal($selectBox.rowByValue("create").name(), "New Category");

test/javascripts/components/category-chooser-test.js.es6

@@ -6,7 +6,7 @@ componentTest('with value', {
   template: '{{category-chooser value=2}}',
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "feature");
@@ -18,7 +18,7 @@ componentTest('with excludeCategoryId', {
   template: '{{category-chooser excludeCategoryId=2}}',
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').rowByValue(2).el.length, 0);
@@ -30,7 +30,7 @@ componentTest('with scopedCategoryId', {
   template: '{{category-chooser scopedCategoryId=2}}',
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').rowByIndex(0).name(), "feature");
@@ -48,7 +48,7 @@ componentTest('with allowUncategorized=null', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
@@ -64,7 +64,7 @@ componentTest('with allowUncategorized=null rootNone=true', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
@@ -81,7 +81,7 @@ componentTest('with disallowed uncategorized, rootNone and rootNoneLabel', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
@@ -97,7 +97,7 @@ componentTest('with allowed uncategorized', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "uncategorized");
@@ -113,7 +113,7 @@ componentTest('with allowed uncategorized and rootNone', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "(no category)");
@@ -130,7 +130,7 @@ componentTest('with allowed uncategorized rootNone and rootNoneLabel', {
   },
 
   test(assert) {
-    expandSelectBox('.category-chooser');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.category-chooser').header.name(), "root none label");

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

@@ -8,7 +8,7 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').header.name(), "hello");
@@ -25,7 +25,7 @@ componentTest('with valueAttribute', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
@@ -41,7 +41,7 @@ componentTest('with nameProperty', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
@@ -57,7 +57,7 @@ componentTest('with an array as content', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').rowByValue('evil').name(), "evil");
@@ -75,7 +75,7 @@ componentTest('with value and none as a string', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').noneRow.name(), 'none');
@@ -85,7 +85,7 @@ componentTest('with value and none as a string', {
       assert.equal(this.get('value'), 'trout');
     });
 
-    selectBoxSelectRow('', {selector: '.combobox' });
+    selectBoxKitSelectRow('__none__', {selector: '.combobox' });
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -102,7 +102,7 @@ componentTest('with value and none as an object', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').noneRow.name(), 'none');
@@ -112,7 +112,7 @@ componentTest('with value and none as an object', {
       assert.equal(this.get('value'), 'evil');
     });
 
-    selectBoxSelectNoneRow({ selector: '.combobox' });
+    selectBoxKitSelectNoneRow({ selector: '.combobox' });
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -130,7 +130,7 @@ componentTest('with no value and none as an object', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').header.name(), 'none');
@@ -148,7 +148,7 @@ componentTest('with no value and none string', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').header.name(), 'none');
@@ -164,7 +164,7 @@ componentTest('with no value and no none', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
@@ -180,15 +180,15 @@ componentTest('with no value and no none', {
 //   },
 //
 //   test(assert) {
-//     expandSelectBox();
+//     ();
 //
 //     andThen(() => assert.equal(find(".select-box-kit-filter-input").length, 1, "it has a search input"));
 //
-//     selectBoxFillInFilter("regis");
+//     selectBoxKitFillInFilter("regis");
 //
 //     andThen(() => assert.equal(selectBox().rows.length, 1, "it filters results"));
 //
-//     selectBoxFillInFilter("");
+//     selectBoxKitFillInFilter("");
 //
 //     andThen(() => {
 //       assert.equal(
@@ -207,17 +207,17 @@ componentTest('with no value and no none', {
 //   },
 //
 //   test(assert) {
-//     expandSelectBox();
+//     ();
 //
-//     selectBoxFillInFilter("rob");
+//     selectBoxKitFillInFilter("rob");
 //
 //     andThen(() => assert.equal(selectBox().rows.length, 1) );
 //
-//     collapseSelectBox();
+//     collapseSelectBoxKit();
 //
 //     andThen(() => assert.notOk(selectBox().isExpanded) );
 //
-//     expandSelectBox();
+//     ();
 //
 //     andThen(() => assert.equal(selectBox().rows.length, 1) );
 //   }
@@ -232,7 +232,7 @@ componentTest('with empty string as value', {
   },
 
   test(assert) {
-    expandSelectBox('.combobox');
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');

test/javascripts/components/list-setting-test.js.es6

@@ -0,0 +1,74 @@
+import componentTest from 'helpers/component-test';
+
+moduleForComponent('list-setting', {integration: true});
+
+componentTest('default', {
+  template: '{{list-setting settingValue=settingValue choices=choices}}',
+
+  beforeEach() {
+    this.set('settingValue', 'bold|italic');
+    this.set('choices', ['bold', 'italic', 'underline']);
+  },
+
+  test(assert) {
+    expandSelectBoxKit();
+
+    andThen(() => {
+      assert.propEqual(selectBox().header.name(), 'bold,italic');
+    });
+  }
+});
+
+componentTest('with only setting value', {
+  template: '{{list-setting settingValue=settingValue}}',
+
+  beforeEach() {
+    this.set('settingValue', 'bold|italic');
+  },
+
+  test(assert) {
+    expandSelectBoxKit();
+
+    andThen(() => {
+      assert.propEqual(selectBox().header.name(), 'bold,italic');
+    });
+  }
+});
+
+componentTest('interactions', {
+  template: '{{list-setting settingValue=settingValue choices=choices}}',
+
+  beforeEach() {
+    this.set('settingValue', 'bold|italic');
+    this.set('choices', ['bold', 'italic', 'underline']);
+  },
+
+  test(assert) {
+    expandSelectBoxKit();
+
+    selectBoxKitSelectRow('underline');
+
+    andThen(() => {
+      assert.propEqual(selectBox().header.name(), 'bold,italic,underline');
+    });
+
+    selectBoxKitFillInFilter('strike');
+
+    andThen(() => {
+      assert.equal(selectBox().highlightedRow.name(), 'strike');
+    });
+
+    selectBox().keyboard.enter();
+
+    andThen(() => {
+      assert.propEqual(selectBox().header.name(), 'bold,italic,underline,strike');
+    });
+
+    selectBox().keyboard.backspace();
+    selectBox().keyboard.backspace();
+
+    andThen(() => {
+      assert.equal(this.get('choices').length, 3, 'it removes the created content from original list');
+    });
+  }
+});

test/javascripts/components/multi-combo-box-test.js.es6

@@ -11,7 +11,99 @@ componentTest('with objects and values', {
 
   test(assert) {
     andThen(() => {
-      assert.propEqual(selectBox(".multi-combobox").header.name(), 'hello,world');
+      assert.propEqual(selectBox().header.name(), 'hello,world');
+    });
+  }
+});
+
+componentTest('interactions', {
+  template: '{{multi-combo-box none=none content=items value=value}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('items', [{id: 1, name: 'regis'}, {id: 2, name: 'sam'}, {id: 3, name: 'robin'}]);
+    this.set('value', [1, 2]);
+  },
+
+  test(assert) {
+    expandSelectBoxKit();
+
+    andThen(() => {
+      assert.equal(selectBox().highlightedRow.name(), 'robin', 'it highlights the first content row');
+    });
+
+    this.set('none', 'test.none');
+
+    andThen(() => {
+      assert.equal(selectBox().noneRow.el.length, 1);
+      assert.equal(selectBox().highlightedRow.name(), 'robin', 'it highlights the first content row');
+    });
+
+    selectBoxKitSelectRow(3);
+
+    andThen(() => {
+      assert.equal(selectBox().highlightedRow.name(), 'none', 'it highlights none row if no content');
+    });
+
+    selectBoxKitFillInFilter('joffrey');
+
+    andThen(() => {
+      assert.equal(selectBox().highlightedRow.name(), 'joffrey', 'it highlights create row when filling filter');
+    });
+
+    selectBox().keyboard.enter();
+
+    andThen(() => {
+      assert.equal(selectBox().highlightedRow.name(), 'none', 'it highlights none row after creating content and no content left');
+    });
+
+    selectBox().keyboard.backspace();
+
+    andThen(() => {
+      const $lastSelectedName = selectBox().header.el.find('.selected-name').last();
+      assert.equal($lastSelectedName.attr('data-name'), 'joffrey');
+      assert.ok($lastSelectedName.hasClass('is-highlighted'), 'it highlights the last selected name when using backspace');
+    });
+
+    selectBox().keyboard.backspace();
+
+    andThen(() => {
+      const $lastSelectedName = selectBox().header.el.find('.selected-name').last();
+      assert.equal($lastSelectedName.attr('data-name'), 'robin', 'it removes the previous highlighted selected content');
+      assert.notOk(exists(selectBox().rowByValue('joffrey').el), 'generated content shouldn’t appear in content when removed');
+    });
+
+    selectBox().keyboard.selectAll();
+
+    andThen(() => {
+      const $highlightedSelectedNames = selectBox().header.el.find('.selected-name.is-highlighted');
+      assert.equal($highlightedSelectedNames.length, 3, 'it highlights each selected name');
+    });
+
+    selectBox().keyboard.backspace();
+
+    andThen(() => {
+      const $selectedNames = selectBox().header.el.find('.selected-name');
+      assert.equal($selectedNames.length, 0, 'it removed all selected content');
+    });
+
+    andThen(() => {
+      assert.ok(this.$(".select-box-kit").hasClass("is-focused"));
+      assert.ok(this.$(".select-box-kit").hasClass("is-expanded"));
+    });
+
+    selectBox().keyboard.escape();
+
+    andThen(() => {
+      assert.ok(this.$(".select-box-kit").hasClass("is-focused"));
+      assert.notOk(this.$(".select-box-kit").hasClass("is-expanded"));
+    });
+
+    selectBox().keyboard.escape();
+
+    andThen(() => {
+      assert.notOk(this.$(".select-box-kit").hasClass("is-focused"));
+      assert.notOk(this.$(".select-box-kit").hasClass("is-expanded"));
     });
   }
 });

test/javascripts/components/pinned-button-test.js.es6

@@ -23,7 +23,7 @@ componentTest('updating the content refreshes the list', {
   test(assert) {
     andThen(() => assert.notOk(selectBox().isHidden) );
 
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => assert.equal(selectBox().selectedRow.name(), "Pinned") );
 

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

@@ -10,7 +10,7 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox().rowByValue(1).name(), "robin");
@@ -29,7 +29,7 @@ componentTest('accepts a value by reference', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(
@@ -38,7 +38,7 @@ componentTest('accepts a value by reference', {
       );
     });
 
-    selectBoxSelectRow(1);
+    selectBoxKitSelectRow(1);
 
     andThen(() => {
       assert.equal(this.get("value"), 1, "it mutates the value");
@@ -58,7 +58,7 @@ componentTest('default search icon', {
   template: '{{select-box-kit filterable=true}}',
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.ok(exists(selectBox().filter.icon), "it has a the correct icon");
@@ -70,7 +70,7 @@ componentTest('with no search icon', {
   template: '{{select-box-kit filterable=true filterIcon=null}}',
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox().filter.icon().length, 0, "it has no icon");
@@ -82,7 +82,7 @@ componentTest('custom search icon', {
   template: '{{select-box-kit filterable=true filterIcon="shower"}}',
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.ok(selectBox().filter.icon().hasClass("d-icon-shower"), "it has a the correct icon");
@@ -93,11 +93,11 @@ componentTest('custom search icon', {
 componentTest('select-box is expandable', {
   template: '{{select-box-kit}}',
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => assert.ok(selectBox().isExpanded) );
 
-    collapseSelectBox();
+    collapseSelectBoxKit();
 
     andThen(() => assert.notOk(selectBox().isExpanded) );
   }
@@ -112,7 +112,7 @@ componentTest('accepts custom value/name keys', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox().selectedRow.name(), "robin");
@@ -130,7 +130,7 @@ componentTest('doesn’t render collection content before first expand', {
   test(assert) {
     assert.notOk(exists(find(".select-box-kit-collection")));
 
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.ok(exists(find(".select-box-kit-collection")));
@@ -146,7 +146,7 @@ componentTest('supports options to limit size', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       const height = find(".select-box-kit-collection").height();
@@ -163,11 +163,11 @@ componentTest('dynamic headerText', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => assert.equal(selectBox().header.name(), "robin") );
 
-    selectBoxSelectRow(2);
+    selectBoxKitSelectRow(2);
 
     andThen(() => {
       assert.equal(selectBox().header.name(), "regis", "it changes header text");
@@ -186,7 +186,7 @@ componentTest('supports custom row template', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => assert.equal(selectBox().rowByValue(1).el.html().trim(), "<b>robin</b>") );
   }
@@ -201,7 +201,7 @@ componentTest('supports converting select value to integer', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => assert.equal(selectBox().selectedRow.name(), "régis") );
 
@@ -224,7 +224,7 @@ componentTest('supports keyboard events', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     selectBox().keyboard.down();
 
@@ -251,7 +251,7 @@ componentTest('supports keyboard events', {
       assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
 
-    expandSelectBox();
+    expandSelectBoxKit();
 
     selectBox().keyboard.escape();
 
@@ -259,18 +259,13 @@ componentTest('supports keyboard events', {
       assert.notOk(selectBox().isExpanded, "it collapses the select box");
     });
 
-    expandSelectBox();
+    expandSelectBoxKit();
 
-    selectBoxFillInFilter("regis");
-
-    // andThen(() => {
-      // assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the first result");
-    // });
+    selectBoxKitFillInFilter("regis");
 
     selectBox().keyboard.tab();
 
     andThen(() => {
-      // assert.equal(selectBox().selectedRow.title(), "regis", "it selects the row when pressing tab");
       assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
   }

test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6

@@ -17,7 +17,7 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectBox();
+    expandSelectBoxKit();
 
     andThen(() => {
       assert.equal(selectBox().header.name(), "Topic Controls");
@@ -26,7 +26,7 @@ componentTest('default', {
       assert.equal(selectBox().selectedRow.el.length, 0, "it doesn’t preselect first row");
     });
 
-    selectBoxSelectRow("share");
+    selectBoxKitSelectRow("share");
 
     andThen(() => {
       assert.equal(this.get("value"), null, "it resets the value");

test/javascripts/helpers/select-box-kit-helper.js

@@ -10,7 +10,7 @@ function checkSelectBoxIsNotCollapsed(selectBoxSelector) {
   }
 }
 
-Ember.Test.registerAsyncHelper('expandSelectBox', function(app, selectBoxSelector) {
+Ember.Test.registerAsyncHelper('expandSelectBoxKit', function(app, selectBoxSelector) {
   selectBoxSelector = selectBoxSelector || '.select-box-kit';
 
   checkSelectBoxIsNotExpanded(selectBoxSelector);
@@ -18,7 +18,7 @@ Ember.Test.registerAsyncHelper('expandSelectBox', function(app, selectBoxSelecto
   click(selectBoxSelector + ' .select-box-kit-header');
 });
 
-Ember.Test.registerAsyncHelper('collapseSelectBox', function(app, selectBoxSelector) {
+Ember.Test.registerAsyncHelper('collapseSelectBoxKit', function(app, selectBoxSelector) {
   selectBoxSelector = selectBoxSelector || '.select-box-kit';
 
   checkSelectBoxIsNotCollapsed(selectBoxSelector);
@@ -26,7 +26,7 @@ Ember.Test.registerAsyncHelper('collapseSelectBox', function(app, selectBoxSelec
   click(selectBoxSelector + ' .select-box-kit-header');
 });
 
-Ember.Test.registerAsyncHelper('selectBoxSelectRow', function(app, rowValue, options) {
+Ember.Test.registerAsyncHelper('selectBoxKitSelectRow', function(app, rowValue, options) {
   options = options || {};
   options.selector = options.selector || '.select-box-kit';
 
@@ -35,7 +35,7 @@ Ember.Test.registerAsyncHelper('selectBoxSelectRow', function(app, rowValue, opt
   click(options.selector + " .select-box-kit-row[data-value='" + rowValue + "']");
 });
 
-Ember.Test.registerAsyncHelper('selectBoxSelectNoneRow', function(app, options) {
+Ember.Test.registerAsyncHelper('selectBoxKitSelectNoneRow', function(app, options) {
   options = options || {};
   options.selector = options.selector || '.select-box-kit';
 
@@ -44,7 +44,7 @@ Ember.Test.registerAsyncHelper('selectBoxSelectNoneRow', function(app, options)
   click(options.selector + " .select-box-kit-row.none");
 });
 
-Ember.Test.registerAsyncHelper('selectBoxFillInFilter', function(app, filter, options) {
+Ember.Test.registerAsyncHelper('selectBoxKitFillInFilter', function(app, filter, options) {
   options = options || {};
   options.selector = options.selector || '.select-box-kit';
 
@@ -52,7 +52,6 @@ Ember.Test.registerAsyncHelper('selectBoxFillInFilter', function(app, filter, op
 
   var filterQuerySelector = options.selector + ' .select-box-kit-filter-input';
   fillIn(filterQuerySelector, filter);
-  triggerEvent(filterQuerySelector, 'keyup');
 });
 
 function selectBox(selector) { // eslint-disable-line no-unused-vars
@@ -88,23 +87,26 @@ function selectBox(selector) { // eslint-disable-line no-unused-vars
   }
 
   function keyboardHelper() {
-    function createEvent(target, keyCode) {
+    function createEvent(target, keyCode, options) {
       target = target || ".select-box-kit-filter-input";
       selector = find(selector).find(target);
 
       andThen(function() {
-        var event = jQuery.Event('keydown');
+        var event = jQuery.Event(options.type);
         event.keyCode = keyCode;
+        if (options && options.metaKey === true) { event.metaKey = true; }
         find(selector).trigger(event);
       });
     }
 
     return {
-      down: function(target) { createEvent(target, 40); },
-      up: function(target) { createEvent(target, 38); },
-      escape: function(target) { createEvent(target, 27); },
-      enter: function(target) { createEvent(target, 13); },
-      tab: function(target) { createEvent(target, 9); }
+      down: function(target) { createEvent(target, 40, {type: 'keydown'}); },
+      up: function(target) { createEvent(target, 38, {type: 'keydown'}); },
+      escape: function(target) { createEvent(target, 27, {type: 'keydown'}); },
+      enter: function(target) { createEvent(target, 13, {type: 'keypress'}); },
+      tab: function(target) { createEvent(target, 9, {type: 'keydown'}); },
+      backspace: function(target) { createEvent(target, 8, {type: 'keydown'}); },
+      selectAll: function(target) { createEvent(target, 65, {metaKey: true, type: 'keydown'}); },
     };
   }
 

test/javascripts/test_helper.js

@@ -32,7 +32,7 @@
 //= require sinon-qunit-1.0.0
 
 //= require helpers/assertions
-//= require helpers/select-box-helper
+//= require helpers/select-box-kit-helper
 
 //= require helpers/qunit-helpers
 //= require_tree ./fixtures