Replaces toolbar popup-menu with select-kit

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

@@ -261,10 +261,10 @@ QUnit.test("Composer can toggle between edit and reply", assert => {
 
 QUnit.test("Composer can toggle between reply and createTopic", assert => {
   visit("/t/this-is-a-test-topic/9");
-
   click('.topic-post:eq(0) button.reply');
-  click('button.options');
-  click('.popup-menu .d-icon-eye-slash');
+  expandSelectKit('.toolbar-popup-menu-options');
+  selectKitSelectRow('toggleWhisper', { selector: '.toolbar-popup-menu-options'});
+
   andThen(() => {
     assert.ok(
       find('.composer-fields .whisper').text().indexOf(I18n.t("composer.whisper")) > 0,
@@ -285,8 +285,9 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => {
     );
   });
 
-  click('button.options');
-  click('.popup-menu .d-icon-eye-slash');
+  expandSelectKit('.toolbar-popup-menu-options');
+  selectKitSelectRow('toggleInvisible', { selector: '.toolbar-popup-menu-options'});
+
   andThen(() => {
     assert.ok(
       find('.composer-fields .whisper').text().indexOf(I18n.t("composer.unlist")) > 0,

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

@@ -440,3 +440,60 @@ componentTest('with null value', {
     });
   }
 });
+
+componentTest('with collection header', {
+  template: '{{single-select collectionHeader=collectionHeader}}',
+
+  beforeEach() {
+    this.set("collectionHeader", "<h2>Hello</h2>");
+  },
+
+  test(assert) {
+    expandSelectKit();
+    andThen(() => assert.ok(exists(".collection-header h2")));
+  }
+});
+
+componentTest('with onToggle', {
+  template: '{{single-select onToggle=onToggle}}',
+
+  beforeEach() {
+    this.set("onToggle", () => $(".select-kit").append("<span class='onToggleTest'></span>"));
+  },
+
+  test(assert) {
+    andThen(() => assert.notOk(exists(".onToggleTest")));
+    expandSelectKit();
+    andThen(() => assert.ok(exists(".onToggleTest")));
+  }
+});
+
+componentTest('with onExpand', {
+  template: '{{single-select onExpand=onExpand}}',
+
+  beforeEach() {
+    this.set("onExpand", () => $(".select-kit").append("<span class='onExpandTest'></span>"));
+  },
+
+  test(assert) {
+    andThen(() => assert.notOk(exists(".onExpandTest")));
+    expandSelectKit();
+    andThen(() => assert.ok(exists(".onExpandTest")));
+  }
+});
+
+componentTest('with onCollapse', {
+  template: '{{single-select onCollapse=onCollapse}}',
+
+  beforeEach() {
+    this.set("onCollapse", () => $(".select-kit").append("<span class='onCollapseTest'></span>"));
+  },
+
+  test(assert) {
+    andThen(() => assert.notOk(exists(".onCollapseTest")));
+    expandSelectKit();
+    andThen(() => assert.notOk(exists(".onCollapseTest")));
+    collapseSelectKit();
+    andThen(() => assert.ok(exists(".onCollapseTest")));
+  }
+});