select-kit refactoring

* better test helper
* more reliable tests
* more consistent use of data-value/data-name/title/aria-label everywhere: header and rows

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

@@ -5,15 +5,15 @@ componentTest('default', {
   template: '{{categories-admin-dropdown}}',
 
   test(assert) {
-    const $selectKit = selectKit('.categories-admin-dropdown');
+    const subject = selectKit();
 
-    assert.equal($selectKit.el.find(".d-icon-bars").length, 1);
-    assert.equal($selectKit.el.find(".d-icon-caret-down").length, 1);
+    assert.equal(subject.el().find(".d-icon-bars").length, 1);
+    assert.equal(subject.el().find(".d-icon-caret-down").length, 1);
 
-    expandSelectKit();
+    subject.expand();
 
     andThen(() => {
-      assert.equal($selectKit.rowByValue("create").name(), "New Category");
+      assert.equal(subject.rowByValue("create").name(), "New Category");
     });
   }
 });

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

@@ -1,15 +1,19 @@
 import componentTest from 'helpers/component-test';
 
-moduleForComponent('category-chooser', {integration: true});
+moduleForComponent('category-chooser', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('with value', {
   template: '{{category-chooser value=2}}',
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "feature");
+      assert.equal(this.get('subject').header().value(), 2);
+      assert.equal(this.get('subject').header().title(), 'feature');
     });
   }
 });
@@ -18,11 +22,9 @@ componentTest('with excludeCategoryId', {
   template: '{{category-chooser excludeCategoryId=2}}',
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
-    andThen(() => {
-      assert.equal(selectKit('.category-chooser').rowByValue(2).el.length, 0);
-    });
+    andThen(() => assert.notOk(this.get('subject').rowByValue(2).exists()));
   }
 });
 
@@ -30,12 +32,14 @@ componentTest('with scopedCategoryId', {
   template: '{{category-chooser scopedCategoryId=2}}',
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').rowByIndex(0).name(), "feature");
-      assert.equal(selectKit('.category-chooser').rowByIndex(1).name(), "spec");
-      assert.equal(selectKit('.category-chooser').el.find(".select-kit-row").length, 2);
+      assert.equal(this.get('subject').rowByIndex(0).title(), 'feature');
+      assert.equal(this.get('subject').rowByIndex(0).value(), 2);
+      assert.equal(this.get('subject').rowByIndex(1).title(), 'spec');
+      assert.equal(this.get('subject').rowByIndex(1).value(), 26);
+      assert.equal(this.get('subject').rows().length, 2);
     });
   }
 });
@@ -48,10 +52,9 @@ componentTest('with allowUncategorized=null', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), "Select a category…");
     });
   }
 });
@@ -64,10 +67,9 @@ componentTest('with allowUncategorized=null rootNone=true', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), 'Select a category…');
     });
   }
 });
@@ -76,15 +78,14 @@ componentTest('with disallowed uncategorized, rootNone and rootNoneLabel', {
   template: '{{category-chooser allowUncategorized=null rootNone=true rootNoneLabel="test.root"}}',
 
   beforeEach() {
-    I18n.translations[I18n.locale].js.test = {root: 'root none label'};
+    I18n.translations[I18n.locale].js.test = { root: 'root none label' };
     this.siteSettings.allow_uncategorized_topics = false;
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "Select a category…");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), 'Select a category…');
     });
   }
 });
@@ -97,10 +98,9 @@ componentTest('with allowed uncategorized', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "uncategorized");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), 'uncategorized');
     });
   }
 });
@@ -113,10 +113,9 @@ componentTest('with allowed uncategorized and rootNone', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "(no category)");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), '(no category)');
     });
   }
 });
@@ -125,15 +124,14 @@ componentTest('with allowed uncategorized rootNone and rootNoneLabel', {
   template: '{{category-chooser allowUncategorized=true rootNone=true rootNoneLabel="test.root"}}',
 
   beforeEach() {
-    I18n.translations[I18n.locale].js.test = {root: 'root none label'};
+    I18n.translations[I18n.locale].js.test = { root: 'root none label' };
     this.siteSettings.allow_uncategorized_topics = true;
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit('.category-chooser').header.name(), "root none label");
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').header().title(), 'root none label');
     });
   }
 });

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

@@ -0,0 +1,87 @@
+import componentTest from 'helpers/component-test';
+import Category from "discourse/models/category";
+
+moduleForComponent('category-selector', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
+
+componentTest('default', {
+  template: '{{category-selector categories=categories}}',
+
+  beforeEach() {
+    this.set('categories', [ Category.findById(2) ]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.equal(this.get('subject').header().value(), 2);
+      assert.notOk(
+        this.get('subject').rowByValue(2).exists(),
+        "selected categories are not in the list"
+      );
+    });
+  }
+});
+
+componentTest('with blacklist', {
+  template: '{{category-selector categories=categories blacklist=blacklist}}',
+
+  beforeEach() {
+    this.set('categories', [ Category.findById(2) ]);
+    this.set('blacklist', [ Category.findById(8) ]);
+  },
+
+  test(assert) {
+    this.get('subject').expand();
+
+    andThen(() => {
+      assert.ok(
+        this.get('subject').rowByValue(6).exists(),
+        "not blacklisted categories are in the list"
+      );
+      assert.notOk(
+        this.get('subject').rowByValue(8).exists(),
+        "blacklisted categories are not in the list"
+      );
+    });
+  }
+});
+
+componentTest('interactions', {
+  template: '{{category-selector categories=categories}}',
+
+  beforeEach() {
+    this.set('categories', [
+      Category.findById(2),
+      Category.findById(6)
+    ]);
+  },
+
+  test(assert) {
+    this.get('subject').expand().selectRowByValue(8);
+
+    andThen(() => {
+      assert.equal(
+        this.get('subject').header().value(),
+        '2,6,8',
+        'it adds the selected category'
+      );
+      assert.equal(this.get('categories').length, 3);
+    });
+
+    this.get('subject').keyboard().backspace();
+    this.get('subject').keyboard().backspace();
+
+    andThen(() => {
+      assert.equal(
+        this.get('subject').header().value(),
+        '2,6',
+        'it removes the last selected category'
+      );
+      assert.equal(this.get('categories').length, 2);
+    });
+  }
+});

test/javascripts/components/categpry-selector-test.js.es6

@@ -1,67 +0,0 @@
-import componentTest from 'helpers/component-test';
-import Category from "discourse/models/category";
-
-moduleForComponent('category-selector', {integration: true});
-
-componentTest('default', {
-  template: '{{category-selector categories=categories}}',
-
-  beforeEach() {
-    this.set('categories', [ Category.findById(2) ]);
-  },
-
-  test(assert) {
-    andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'feature');
-      assert.ok(!exists(".select-kit .select-kit-row[data-value='2']"), "selected categories are not in the list");
-    });
-  }
-});
-
-componentTest('with blacklist', {
-  template: '{{category-selector categories=categories blacklist=blacklist}}',
-
-  beforeEach() {
-    this.set('categories', [ Category.findById(2) ]);
-    this.set('blacklist', [ Category.findById(8) ]);
-  },
-
-  test(assert) {
-    expandSelectKit();
-
-    andThen(() => {
-      assert.ok(exists(".select-kit .select-kit-row[data-value='6']"), "not blacklisted categories are in the list");
-      assert.ok(!exists(".select-kit .select-kit-row[data-value='8']"), "blacklisted categories are not in the list");
-    });
-  }
-});
-
-componentTest('interactions', {
-  template: '{{category-selector categories=categories}}',
-
-  beforeEach() {
-    this.set('categories', [
-      Category.findById(2),
-      Category.findById(6)
-    ]);
-  },
-
-  test(assert) {
-    expandSelectKit();
-
-    selectKitSelectRow(8);
-
-    andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'feature,support,hosting', 'it adds the selected category');
-      assert.equal(this.get('categories').length, 3);
-    });
-
-    selectKit().keyboard.backspace();
-    selectKit().keyboard.backspace();
-
-    andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'feature,support', 'it removes the last selected category');
-      assert.equal(this.get('categories').length, 2);
-    });
-  }
-});

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

@@ -1,5 +1,10 @@
 import componentTest from 'helpers/component-test';
-moduleForComponent('combo-box', {integration: true});
+moduleForComponent('combo-box', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('default', {
   template: '{{combo-box content=items}}',
@@ -8,12 +13,12 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').header.name(), "hello");
-      assert.equal(selectKit('.combobox').rowByValue(1).name(), "hello");
-      assert.equal(selectKit('.combobox').rowByValue(2).name(), "world");
+      assert.equal(this.get('subject').header().name(), "hello");
+      assert.equal(this.get('subject').rowByValue(1).name(), "hello");
+      assert.equal(this.get('subject').rowByValue(2).name(), "world");
     });
   }
 });
@@ -25,11 +30,11 @@ componentTest('with valueAttribute', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
-      assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
+      assert.equal(this.get('subject').rowByValue(0).name(), "hello");
+      assert.equal(this.get('subject').rowByValue(1).name(), "world");
     });
   }
 });
@@ -41,11 +46,11 @@ componentTest('with nameProperty', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').rowByValue(0).name(), "hello");
-      assert.equal(selectKit('.combobox').rowByValue(1).name(), "world");
+      assert.equal(this.get('subject').rowByValue(0).name(), "hello");
+      assert.equal(this.get('subject').rowByValue(1).name(), "world");
     });
   }
 });
@@ -57,11 +62,11 @@ componentTest('with an array as content', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').rowByValue('evil').name(), "evil");
-      assert.equal(selectKit('.combobox').rowByValue('trout').name(), "trout");
+      assert.equal(this.get('subject').rowByValue('evil').name(), "evil");
+      assert.equal(this.get('subject').rowByValue('trout').name(), "trout");
     });
   }
 });
@@ -75,17 +80,17 @@ componentTest('with value and none as a string', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').noneRow.name(), 'none');
-      assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
-      assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
-      assert.equal(selectKit('.combobox').header.name(), 'trout');
+      assert.equal(this.get('subject').noneRow().name(), 'none');
+      assert.equal(this.get('subject').rowByValue("evil").name(), "evil");
+      assert.equal(this.get('subject').rowByValue("trout").name(), "trout");
+      assert.equal(this.get('subject').header().name(), 'trout');
       assert.equal(this.get('value'), 'trout');
     });
 
-    selectKitSelectRow('__none__', {selector: '.combobox' });
+    this.get('subject').selectNoneRow();
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -102,17 +107,17 @@ componentTest('with value and none as an object', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').noneRow.name(), 'none');
-      assert.equal(selectKit('.combobox').rowByValue("evil").name(), "evil");
-      assert.equal(selectKit('.combobox').rowByValue("trout").name(), "trout");
-      assert.equal(selectKit('.combobox').header.name(), 'evil');
+      assert.equal(this.get('subject').noneRow().name(), 'none');
+      assert.equal(this.get('subject').rowByValue("evil").name(), "evil");
+      assert.equal(this.get('subject').rowByValue("trout").name(), "trout");
+      assert.equal(this.get('subject').header().name(), 'evil');
       assert.equal(this.get('value'), 'evil');
     });
 
-    selectKitSelectNoneRow({ selector: '.combobox' });
+    this.get('subject').selectNoneRow();
 
     andThen(() => {
       assert.equal(this.get('value'), null);
@@ -130,10 +135,10 @@ componentTest('with no value and none as an object', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').header.name(), 'none');
+      assert.equal(this.get('subject').header().name(), 'none');
     });
   }
 });
@@ -148,10 +153,10 @@ componentTest('with no value and none string', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').header.name(), 'none');
+      assert.equal(this.get('subject').header().name(), 'none');
     });
   }
 });
@@ -164,66 +169,14 @@ componentTest('with no value and no none', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
+      assert.equal(this.get('subject').header().name(), 'evil', 'it sets the first row as value');
     });
   }
 });
 
-// componentTest('can be filtered', {
-//   template: '{{combo-box filterable=true value=1 content=content}}',
-//
-//   beforeEach() {
-//     this.set("content", [{ id: 1, name: "robin"}, { id: 2, name: "regis" }]);
-//   },
-//
-//   test(assert) {
-//     ();
-//
-//     andThen(() => assert.equal(find(".filter-input").length, 1, "it has a search input"));
-//
-//     selectKitFillInFilter("regis");
-//
-//     andThen(() => assert.equal(selectKit().rows.length, 1, "it filters results"));
-//
-//     selectKitFillInFilter("");
-//
-//     andThen(() => {
-//       assert.equal(
-//         selectKit().rows.length, 2,
-//         "it returns to original content when filter is empty"
-//       );
-//     });
-//   }
-// });
-
-// componentTest('persists filter state when expanding/collapsing', {
-//   template: '{{combo-box value=1 content=content filterable=true}}',
-//
-//   beforeEach() {
-//     this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "régis" }]);
-//   },
-//
-//   test(assert) {
-//     ();
-//
-//     selectKitFillInFilter("rob");
-//
-//     andThen(() => assert.equal(selectKit().rows.length, 1) );
-//
-//     collapseSelectKit();
-//
-//     andThen(() => assert.notOk(selectKit().isExpanded) );
-//
-//     ();
-//
-//     andThen(() => assert.equal(selectKit().rows.length, 1) );
-//   }
-// });
-
-
 componentTest('with empty string as value', {
   template: '{{combo-box content=items value=value}}',
   beforeEach() {
@@ -232,10 +185,10 @@ componentTest('with empty string as value', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit('.combobox').header.name(), 'evil', 'it sets the first row as value');
+      assert.equal(this.get('subject').header().name(), 'evil', 'it sets the first row as value');
     });
   }
 });

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

@@ -11,15 +11,14 @@ componentTest('default', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'bold,italic');
+      assert.equal(selectKit().header().title(), 'bold,italic');
+      assert.equal(selectKit().header().value(), 'bold,italic');
     });
   }
 });
 
-componentTest('with emptry string as value', {
+componentTest('with empty string as value', {
   template: '{{list-setting settingValue=settingValue}}',
 
   beforeEach() {
@@ -27,10 +26,8 @@ componentTest('with emptry string as value', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.equal(selectKit().header.el.find(".selected-name").length, 0);
+      assert.equal(selectKit().header().value(), "");
     });
   }
 });
@@ -43,10 +40,8 @@ componentTest('with only setting value', {
   },
 
   test(assert) {
-    expandSelectKit();
-
     andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'bold,italic');
+      assert.equal(selectKit().header().value(), 'bold,italic');
     });
   }
 });
@@ -60,31 +55,31 @@ componentTest('interactions', {
   },
 
   test(assert) {
-    expandSelectKit();
+    const listSetting = selectKit();
 
-    selectKitSelectRow('underline');
+    listSetting.expand().selectRowByValue('underline');
 
     andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'bold,italic,underline');
+      assert.equal(listSetting.header().value(), 'bold,italic,underline');
     });
 
-    selectKitFillInFilter('strike');
+    listSetting.fillInFilter('strike');
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.name(), 'strike');
+      assert.equal(listSetting.highlightedRow().value(), 'strike');
     });
 
-    selectKit().keyboard.enter();
+    listSetting.keyboard().enter();
 
     andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'bold,italic,underline,strike');
+      assert.equal(listSetting.header().value(), 'bold,italic,underline,strike');
     });
 
-    selectKit().keyboard.backspace();
-    selectKit().keyboard.backspace();
+    listSetting.keyboard().backspace();
+    listSetting.keyboard().backspace();
 
     andThen(() => {
-      assert.equal(this.get('choices').length, 3, 'it removes the created content from original list');
+      assert.equal(listSetting.header().value(), 'bold,italic,underline');
     });
   }
 });

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

@@ -1,5 +1,10 @@
 import componentTest from 'helpers/component-test';
-moduleForComponent('multi-select', {integration: true});
+moduleForComponent('multi-select', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('with objects and values', {
   template: '{{multi-select content=items values=values}}',
@@ -11,11 +16,24 @@ componentTest('with objects and values', {
 
   test(assert) {
     andThen(() => {
-      assert.propEqual(selectKit().header.name(), 'hello,world');
+      assert.equal(this.get('subject').header().value(), '1,2');
     });
   }
 });
 
+componentTest('with title', {
+  template: '{{multi-select title=(i18n "test.title")}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {title: 'My title'};
+  },
+
+  test(assert) {
+    andThen(() => assert.equal(selectKit().header().title(), 'My title') );
+  }
+});
+
+
 componentTest('interactions', {
   template: '{{multi-select none=none content=items values=values}}',
 
@@ -26,84 +44,104 @@ componentTest('interactions', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.name(), 'robin', 'it highlights the first content row');
+      assert.equal(
+        this.get('subject').highlightedRow().name(),
+        'robin',
+        'it highlights the first content row'
+      );
     });
 
     this.set('none', 'test.none');
 
     andThen(() => {
-      assert.equal(selectKit().noneRow.el.length, 1);
-      assert.equal(selectKit().highlightedRow.name(), 'robin', 'it highlights the first content row');
+      assert.ok(this.get('subject').noneRow().exists());
+      assert.equal(
+        this.get('subject').highlightedRow().name(),
+        'robin',
+        'it highlights the first content row'
+      );
     });
 
-    selectKitSelectRow(3);
+    this.get('subject').selectRowByValue(3);
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.name(), 'none', 'it highlights none row if no content');
+      assert.equal(
+        this.get('subject').highlightedRow().name(),
+        'none',
+        'it highlights none row if no content'
+      );
     });
 
-    selectKitFillInFilter('joffrey');
+    this.get('subject').fillInFilter('joffrey');
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.name(), 'joffrey', 'it highlights create row when filling filter');
+      assert.equal(
+        this.get('subject').highlightedRow().name(),
+        'joffrey',
+        'it highlights create row when filling filter'
+      );
     });
 
-    selectKit().keyboard.enter();
+    this.get('subject').keyboard().enter();
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.name(), 'none', 'it highlights none row after creating content and no content left');
+      assert.equal(
+        this.get('subject').highlightedRow().name(),
+        'none',
+        'it highlights none row after creating content and no content left'
+      );
     });
 
-    selectKit().keyboard.backspace();
+    this.get('subject').keyboard().backspace();
 
     andThen(() => {
-      const $lastSelectedName = selectKit().header.el.find('.selected-name').last();
+      const $lastSelectedName = this.get('subject').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');
     });
 
-    selectKit().keyboard.backspace();
+    this.get('subject').keyboard().backspace();
 
     andThen(() => {
-      const $lastSelectedName = selectKit().header.el.find('.selected-name').last();
+      const $lastSelectedName = this.get('subject').header().el().find('.selected-name').last();
       assert.equal($lastSelectedName.attr('data-name'), 'robin', 'it removes the previous highlighted selected content');
-      assert.notOk(exists(selectKit().rowByValue('joffrey').el), 'generated content shouldn’t appear in content when removed');
+      assert.notOk(this.get('subject').rowByValue('joffrey').exists(), 'generated content shouldn’t appear in content when removed');
     });
 
-    selectKit().keyboard.selectAll();
+    this.get('subject').keyboard().selectAll();
 
     andThen(() => {
-      const $highlightedSelectedNames = selectKit().header.el.find('.selected-name.is-highlighted');
+      const $highlightedSelectedNames = this.get('subject').header().el().find('.selected-name.is-highlighted');
       assert.equal($highlightedSelectedNames.length, 3, 'it highlights each selected name');
     });
 
-    selectKit().keyboard.backspace();
+    this.get('subject').keyboard().backspace();
 
     andThen(() => {
-      const $selectedNames = selectKit().header.el.find('.selected-name');
+      const $selectedNames = this.get('subject').header().el().find('.selected-name');
       assert.equal($selectedNames.length, 0, 'it removed all selected content');
     });
 
     andThen(() => {
-      assert.ok(this.$(".select-kit").hasClass("is-focused"));
-      assert.ok(this.$(".select-kit").hasClass("is-expanded"));
+      assert.ok(this.get('subject').isFocused());
+      assert.ok(this.get('subject').isExpanded());
     });
 
-    selectKit().keyboard.escape();
+    this.get('subject').keyboard().escape();
 
     andThen(() => {
-      assert.ok(this.$(".select-kit").hasClass("is-focused"));
-      assert.notOk(this.$(".select-kit").hasClass("is-expanded"));
+      assert.ok(this.get('subject').isFocused());
+      assert.notOk(this.get('subject').isExpanded());
     });
 
-    selectKit().keyboard.escape();
+    this.get('subject').keyboard().escape();
 
     andThen(() => {
-      assert.notOk(this.$(".select-kit").hasClass("is-focused"));
-      assert.notOk(this.$(".select-kit").hasClass("is-expanded"));
+      assert.notOk(this.get('subject').isFocused());
+      assert.notOk(this.get('subject').isExpanded());
     });
   }
 });

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

@@ -10,7 +10,12 @@ const buildTopic = function() {
   });
 };
 
-moduleForComponent('pinned-options', { integration: true });
+moduleForComponent('pinned-options', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('updating the content refreshes the list', {
   template: '{{pinned-options value=pinned topic=topic}}',
@@ -22,14 +27,14 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    expandSelectKit();
-
-    andThen(() => assert.equal(selectKit().header.name(), "Pinned") );
+    andThen(() => {
+      assert.equal(this.get('subject').header().name(), "pinned");
+    });
 
     andThen(() => this.set("pinned", false));
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "Unpinned");
+      assert.equal(this.get('subject').header().name(), "unpinned");
     });
   }
 });

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

@@ -2,7 +2,12 @@ import componentTest from 'helpers/component-test';
 import { withPluginApi } from 'discourse/lib/plugin-api';
 import { clearCallbacks } from 'select-kit/mixins/plugin-api';
 
-moduleForComponent('single-select', { integration: true });
+moduleForComponent('single-select', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('updating the content refreshes the list', {
   template: '{{single-select value=1 content=content}}',
@@ -12,10 +17,10 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().rowByValue(1).name(), "BEFORE");
+      assert.equal(this.get('subject').rowByValue(1).name(), "BEFORE");
     });
 
     andThen(() => {
@@ -23,7 +28,7 @@ componentTest('updating the content refreshes the list', {
     });
 
     andThen(() => {
-      assert.equal(selectKit().rowByValue(1).name(), "AFTER");
+      assert.equal(this.get('subject').rowByValue(1).name(), "AFTER");
     });
   }
 });
@@ -37,16 +42,16 @@ componentTest('accepts a value by reference', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
       assert.equal(
-        selectKit().selectedRow.name(), "robin",
+        this.get('subject').selectedRow().name(), "robin",
         "it highlights the row corresponding to the value"
       );
     });
 
-    selectKitSelectRow(1);
+    this.get('subject').selectRowByValue(1);
 
     andThen(() => {
       assert.equal(this.get("value"), 1, "it mutates the value");
@@ -58,7 +63,11 @@ componentTest('no default icon', {
   template: '{{single-select}}',
 
   test(assert) {
-    assert.equal(selectKit().header.icon().length, 0, "it doesn’t have an icon if not specified");
+    assert.equal(
+      this.get('subject').header().icon().length,
+      0,
+      "it doesn’t have an icon if not specified"
+    );
   }
 });
 
@@ -66,10 +75,10 @@ componentTest('default search icon', {
   template: '{{single-select filterable=true}}',
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.ok(exists(selectKit().filter.icon), "it has a the correct icon");
+      assert.ok(exists(this.get('subject').filter().icon()), "it has an icon");
     });
   }
 });
@@ -78,10 +87,10 @@ componentTest('with no search icon', {
   template: '{{single-select filterable=true filterIcon=null}}',
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().filter.icon().length, 0, "it has no icon");
+      assert.notOk(exists(this.get('subject').filter().icon()), "it has no icon");
     });
   }
 });
@@ -90,10 +99,13 @@ componentTest('custom search icon', {
   template: '{{single-select filterable=true filterIcon="shower"}}',
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.ok(selectKit().filter.icon().hasClass("fa-shower"), "it has a the correct icon");
+      assert.ok(
+        this.get('subject').filter().icon().hasClass("fa-shower"),
+        "it has a the correct icon"
+      );
     });
   }
 });
@@ -101,13 +113,13 @@ componentTest('custom search icon', {
 componentTest('is expandable', {
   template: '{{single-select}}',
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
-    andThen(() => assert.ok(selectKit().isExpanded) );
+    andThen(() => assert.ok(this.get('subject').isExpanded()) );
 
-    collapseSelectKit();
+    this.get('subject').collapse();
 
-    andThen(() => assert.notOk(selectKit().isExpanded) );
+    andThen(() => assert.notOk(this.get('subject').isExpanded()) );
   }
 });
 
@@ -120,10 +132,10 @@ componentTest('accepts custom value/name keys', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().selectedRow.name(), "robin");
+      assert.equal(this.get('subject').selectedRow().name(), "robin");
     });
   }
 });
@@ -138,7 +150,7 @@ componentTest('doesn’t render collection content before first expand', {
   test(assert) {
     assert.notOk(exists(find(".select-kit-collection")));
 
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
       assert.ok(exists(find(".select-kit-collection")));
@@ -154,7 +166,7 @@ componentTest('supports options to limit size', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
       const height = find(".select-kit-collection").height();
@@ -171,16 +183,20 @@ componentTest('dynamic headerText', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "robin");
+      assert.equal(this.get('subject').header().name(), 'robin');
     });
 
-    selectKitSelectRow(2);
+    this.get('subject').selectRowByValue(2);
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "regis", "it changes header text");
+      assert.equal(
+        this.get('subject').header().name(),
+        'regis',
+        'it changes header text'
+      );
     });
   }
 });
@@ -196,9 +212,13 @@ componentTest('supports custom row template', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
-    andThen(() => assert.equal(selectKit().rowByValue(1).el.html().trim(), "<b>robin</b>") );
+    andThen(() => {
+      assert.equal(
+        this.get('subject').rowByValue(1).el().html().trim(), "<b>robin</b>"
+      );
+    });
   }
 });
 
@@ -206,22 +226,25 @@ componentTest('supports converting select value to integer', {
   template: '{{single-select value=value content=content castInteger=true}}',
 
   beforeEach() {
-    this.set("value", 2);
-    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
+    this.set('value', 2);
+    this.set('content', [{ id: '1', name: 'robin'}, {id: '2', name: 'régis' }]);
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
-    andThen(() => assert.equal(selectKit().selectedRow.name(), "régis") );
+    andThen(() => assert.equal(this.get('subject').selectedRow().name(), 'régis') );
 
     andThen(() => {
-      this.set("value", 3);
-      this.set("content", [{ id: "3", name: "jeff" }]);
+      this.set('value', 1);
     });
 
     andThen(() => {
-      assert.equal(selectKit().selectedRow.name(), "jeff", "it works with dynamic content");
+      assert.equal(
+        this.get('subject').selectedRow().name(),
+        'robin',
+        'it works with dynamic content'
+      );
     });
   }
 });
@@ -234,49 +257,41 @@ componentTest('supports keyboard events', {
   },
 
   test(assert) {
-    expandSelectKit();
-
-    selectKit().keyboard.down();
+    this.get('subject').expand().keyboard().down();
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.title(), "regis", "the next row is highlighted");
+      assert.equal(this.get('subject').highlightedRow().title(), "regis", "the next row is highlighted");
     });
 
-    selectKit().keyboard.down();
+    this.get('subject').keyboard().down();
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.title(), "robin", "it returns to the first row");
+      assert.equal(this.get('subject').highlightedRow().title(), "robin", "it returns to the first row");
     });
 
-    selectKit().keyboard.up();
+    this.get('subject').keyboard().up();
 
     andThen(() => {
-      assert.equal(selectKit().highlightedRow.title(), "regis", "it highlights the last row");
+      assert.equal(this.get('subject').highlightedRow().title(), "regis", "it highlights the last row");
     });
 
-    selectKit().keyboard.enter();
+    this.get('subject').keyboard().enter();
 
     andThen(() => {
-      assert.equal(selectKit().selectedRow.title(), "regis", "it selects the row when pressing enter");
-      assert.notOk(selectKit().isExpanded, "it collapses the select box when selecting a row");
+      assert.equal(this.get('subject').selectedRow().title(), "regis", "it selects the row when pressing enter");
+      assert.notOk(this.get('subject').isExpanded(), "it collapses the select box when selecting a row");
     });
 
-    expandSelectKit();
-
-    selectKit().keyboard.escape();
+    this.get('subject').expand().keyboard().escape();
 
     andThen(() => {
-      assert.notOk(selectKit().isExpanded, "it collapses the select box");
+      assert.notOk(this.get('subject').isExpanded(), "it collapses the select box");
     });
 
-    expandSelectKit();
-
-    selectKitFillInFilter("regis");
-
-    selectKit().keyboard.tab();
+    this.get('subject').expand().fillInFilter('regis').keyboard().tab();
 
     andThen(() => {
-      assert.notOk(selectKit().isExpanded, "it collapses the select box when selecting a row");
+      assert.notOk(this.get('subject').isExpanded(), "it collapses the select box when selecting a row");
     });
   }
 });
@@ -302,18 +317,18 @@ componentTest('support appending content through plugin api', {
 
   beforeEach() {
     withPluginApi('0.8.13', api => {
-      api.modifySelectKit("select-kit")
-         .appendContent([{ id: "2", name: "regis"}]);
+      api.modifySelectKit('select-kit')
+         .appendContent([{ id: '2', name: 'regis'}]);
     });
 
-    this.set("content", [{ id: "1", name: "robin"}]);
+    this.set('content', [{ id: '1', name: 'robin'}]);
   },
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().rows.length, 2);
-      assert.equal(selectKit().rows.eq(1).data("name"), "regis");
+      assert.equal(this.get('subject').rows().length, 2);
+      assert.equal(this.get('subject').rowByIndex(1).name(), 'regis');
     });
 
     andThen(() => clearCallbacks());
@@ -336,11 +351,11 @@ componentTest('support modifying content through plugin api', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().rows.length, 3);
-      assert.equal(selectKit().rows.eq(1).data("name"), "sam");
+      assert.equal(this.get('subject').rows().length, 3);
+      assert.equal(this.get('subject').rowByIndex(1).name(), "sam");
     });
 
     andThen(() => clearCallbacks());
@@ -360,11 +375,11 @@ componentTest('support prepending content through plugin api', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().rows.length, 2);
-      assert.equal(selectKit().rows.eq(0).data("name"), "regis");
+      assert.equal(this.get('subject').rows().length, 2);
+      assert.equal(this.get('subject').rowByIndex(0).name(), "regis");
     });
 
     andThen(() => clearCallbacks());
@@ -387,9 +402,7 @@ componentTest('support modifying on select behavior through plugin api', {
   },
 
   test(assert) {
-    expandSelectKit();
-
-    selectKitSelectRow(1);
+    this.get('subject').expand().selectRowByValue(1);
 
     andThen(() => {
       assert.equal(find(".on-select-test").html(), "1");
@@ -408,10 +421,10 @@ componentTest('with nameChanges', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "robin");
+      assert.equal(this.get('subject').header().name(), "robin");
     });
 
     andThen(() => {
@@ -419,7 +432,7 @@ componentTest('with nameChanges', {
     });
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "robin2");
+      assert.equal(this.get('subject').header().name(), "robin2");
     });
   }
 });
@@ -433,10 +446,11 @@ componentTest('with null value', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "robin");
+      assert.equal(this.get('subject').header().name(), "robin");
+      assert.equal(this.get('subject').header().value(), undefined);
     });
   }
 });
@@ -449,7 +463,8 @@ componentTest('with collection header', {
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
+
     andThen(() => assert.ok(exists(".collection-header h2")));
   }
 });
@@ -463,7 +478,9 @@ componentTest('with onToggle', {
 
   test(assert) {
     andThen(() => assert.notOk(exists(".onToggleTest")));
-    expandSelectKit();
+
+    this.get('subject').expand();
+
     andThen(() => assert.ok(exists(".onToggleTest")));
   }
 });
@@ -477,7 +494,9 @@ componentTest('with onExpand', {
 
   test(assert) {
     andThen(() => assert.notOk(exists(".onExpandTest")));
-    expandSelectKit();
+
+    this.get('subject').expand();
+
     andThen(() => assert.ok(exists(".onExpandTest")));
   }
 });
@@ -491,9 +510,25 @@ componentTest('with onCollapse', {
 
   test(assert) {
     andThen(() => assert.notOk(exists(".onCollapseTest")));
-    expandSelectKit();
+
+    this.get('subject').expand();
+
     andThen(() => assert.notOk(exists(".onCollapseTest")));
-    collapseSelectKit();
+
+    this.get('subject').collapse();
+
     andThen(() => assert.ok(exists(".onCollapseTest")));
   }
 });
+
+componentTest('with title', {
+  template: '{{single-select title=(i18n "test.title")}}',
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {title: 'My title'};
+  },
+
+  test(assert) {
+    andThen(() => assert.equal(this.get('subject').header().title(), 'My title') );
+  }
+});

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

@@ -8,28 +8,37 @@ const buildTopic = function() {
   });
 };
 
-moduleForComponent('topic-footer-mobile-dropdown', {integration: true});
+moduleForComponent('topic-footer-mobile-dropdown', {
+  integration: true,
+  beforeEach: function() {
+    this.set('subject', selectKit());
+  }
+});
 
 componentTest('default', {
   template: '{{topic-footer-mobile-dropdown topic=topic}}',
   beforeEach() {
-    this.set("topic", buildTopic());
+    this.set('topic', buildTopic());
   },
 
   test(assert) {
-    expandSelectKit();
+    this.get('subject').expand();
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "Topic Controls");
-      assert.equal(selectKit().rowByIndex(0).name(), "Bookmark");
-      assert.equal(selectKit().rowByIndex(1).name(), "Share");
-      assert.equal(selectKit().selectedRow.el.length, 0, "it doesn’t preselect first row");
+      assert.equal(this.get('subject').header().title(), 'Topic Controls');
+      assert.equal(this.get('subject').header().value(), null);
+      assert.equal(this.get('subject').rowByIndex(0).name(), 'Bookmark');
+      assert.equal(this.get('subject').rowByIndex(1).name(), 'Share');
+      assert.notOk(
+        this.get('subject').selectedRow().exists(),
+        'it doesn’t preselect first row'
+      );
     });
 
-    selectKitSelectRow("share");
+    this.get('subject').selectRowByValue('share');
 
     andThen(() => {
-      assert.equal(this.get("value"), null, "it resets the value");
+      assert.equal(this.get('value'), null, 'it resets the value');
     });
   }
 });

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

@@ -22,13 +22,13 @@ componentTest('the header has a localized title', {
 
   test(assert) {
     andThen(() => {
-      assert.equal(selectKit().header.name(), "Normal", "it has the correct title");
+      assert.equal(selectKit().header().name(), "Normal", "it has the correct title");
     });
 
     this.set("topic", buildTopic(2));
 
     andThen(() => {
-      assert.equal(selectKit().header.name(), "Tracking", "it correctly changes the title");
+      assert.equal(selectKit().header().name(), "Tracking", "it correctly changes the title");
     });
   }
 });