FEATURE: support for multi-combo-box

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");