[WIP] select-box-kit refactoring

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

@@ -0,0 +1,19 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('categories-admin-dropdown', {integration: true});
+
+componentTest('default', {
+  template: '{{categories-admin-dropdown}}',
+
+  test(assert) {
+    const $selectBox = selectBox('.categories-admin-dropdown');
+
+    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');
+
+    andThen(() => {
+      assert.equal($selectBox.rowByValue("create").name(), "New Category");
+    });
+  }
+});

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

@@ -0,0 +1,139 @@
+import componentTest from 'helpers/component-test';
+
+moduleForComponent('category-chooser', {integration: true});
+
+componentTest('with value', {
+  template: '{{category-chooser value=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "feature");
+    });
+  }
+});
+
+componentTest('with excludeCategoryId', {
+  template: '{{category-chooser excludeCategoryId=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').rowByValue(2).el.length, 0);
+    });
+  }
+});
+
+componentTest('with scopedCategoryId', {
+  template: '{{category-chooser scopedCategoryId=2}}',
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').rowByIndex(0).name(), "feature");
+      assert.equal(selectBox('.category-chooser').rowByIndex(1).name(), "spec");
+      assert.equal(selectBox('.category-chooser').el.find(".select-box-kit-row").length, 2);
+    });
+  }
+});
+
+componentTest('with allowUncategorized=null', {
+  template: '{{category-chooser allowUncategorized=null}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+    });
+  }
+});
+
+componentTest('with allowUncategorized=null rootNone=true', {
+  template: '{{category-chooser allowUncategorized=null rootNone=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+    });
+  }
+});
+
+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'};
+    this.siteSettings.allow_uncategorized_topics = false;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "Select a category…");
+    });
+  }
+});
+
+componentTest('with allowed uncategorized', {
+  template: '{{category-chooser allowUncategorized=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "uncategorized");
+    });
+  }
+});
+
+componentTest('with allowed uncategorized and rootNone', {
+  template: '{{category-chooser allowUncategorized=true rootNone=true}}',
+
+  beforeEach() {
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "(no category)");
+    });
+  }
+});
+
+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'};
+    this.siteSettings.allow_uncategorized_topics = true;
+  },
+
+  test(assert) {
+    expandSelectBox('.category-chooser');
+
+    andThen(() => {
+      assert.equal(selectBox('.category-chooser').header.name(), "root none label");
+    });
+  }
+});

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

@@ -1,74 +1,173 @@
 import componentTest from 'helpers/component-test';
 moduleForComponent('combo-box', {integration: true});
 
-componentTest('with objects', {
-  template: '{{combo-box content=items value=value}}',
+componentTest('default', {
+  template: '{{combo-box content=items}}',
   beforeEach() {
     this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 1);
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='1']").text(), 'hello');
-    assert.equal(this.$("select option[value='2']").text(), 'world');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(2).name(), "world");
+    });
   }
 });
 
-componentTest('with objects and valueAttribute', {
+componentTest('with valueAttribute', {
   template: '{{combo-box content=items valueAttribute="value"}}',
   beforeEach() {
     this.set('items', [{value: 0, name: 'hello'}, {value: 1, name: 'world'}]);
   },
 
   test(assert) {
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='0']").text(), 'hello');
-    assert.equal(this.$("select option[value='1']").text(), 'world');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+    });
   }
 });
 
-componentTest('with an array', {
+componentTest('with nameProperty', {
+  template: '{{combo-box content=items nameProperty="text"}}',
+  beforeEach() {
+    this.set('items', [{id: 0, text: 'hello'}, {id: 1, text: 'world'}]);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue(0).name(), "hello");
+      assert.equal(selectBox('.combobox').rowByValue(1).name(), "world");
+    });
+  }
+});
+
+componentTest('with an array as content', {
   template: '{{combo-box content=items value=value}}',
   beforeEach() {
     this.set('items', ['evil', 'trout', 'hat']);
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 'evil');
-    assert.ok(this.$('.combobox').length);
-    assert.equal(this.$("select option[value='evil']").text(), 'evil');
-    assert.equal(this.$("select option[value='trout']").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').rowByValue('evil').name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue('trout').name(), "trout");
+    });
   }
 });
 
-componentTest('with none', {
+componentTest('with value and none as a string', {
   template: '{{combo-box content=items none="test.none" value=value}}',
   beforeEach() {
     I18n.translations[I18n.locale].js.test = {none: 'none'};
     this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', 'trout');
   },
 
   test(assert) {
-    assert.equal(this.$("select option:eq(0)").text(), 'none');
-    assert.equal(this.$("select option:eq(0)").val(), '');
-    assert.equal(this.$("select option:eq(1)").text(), 'evil');
-    assert.equal(this.$("select option:eq(2)").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').noneRow.name(), 'none');
+      assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectBox('.combobox').header.name(), 'trout');
+      assert.equal(this.get('value'), 'trout');
+    });
+
+    selectBoxSelectRow('', {selector: '.combobox' });
+
+    andThen(() => {
+      assert.equal(this.get('value'), null);
+    });
   }
 });
 
-componentTest('with Object none', {
-  template: '{{combo-box content=items none=none value=value selected="something"}}',
+componentTest('with value and none as an object', {
+  template: '{{combo-box content=items none=none value=value}}',
   beforeEach() {
     this.set('none', { id: 'something', name: 'none' });
     this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', 'evil');
   },
 
   test(assert) {
-    assert.equal(this.get('value'), 'something');
-    assert.equal(this.$("select option:eq(0)").text(), 'none');
-    assert.equal(this.$("select option:eq(0)").val(), 'something');
-    assert.equal(this.$("select option:eq(1)").text(), 'evil');
-    assert.equal(this.$("select option:eq(2)").text(), 'trout');
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').noneRow.name(), 'none');
+      assert.equal(selectBox('.combobox').rowByValue("evil").name(), "evil");
+      assert.equal(selectBox('.combobox').rowByValue("trout").name(), "trout");
+      assert.equal(selectBox('.combobox').header.name(), 'evil');
+      assert.equal(this.get('value'), 'evil');
+    });
+
+    selectBoxSelectNoneRow({ selector: '.combobox' });
+
+    andThen(() => {
+      assert.equal(this.get('value'), null);
+    });
+  }
+});
+
+componentTest('with no value and none as an object', {
+  template: '{{combo-box content=items none=none value=value}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('none', { id: 'something', name: 'none' });
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'none');
+    });
+  }
+});
+
+componentTest('with no value and none string', {
+  template: '{{combo-box content=items none=none value=value}}',
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = {none: 'none'};
+    this.set('none', 'test.none');
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'none');
+    });
+  }
+});
+
+componentTest('with no value and no none', {
+  template: '{{combo-box content=items value=value}}',
+  beforeEach() {
+    this.set('items', ['evil', 'trout', 'hat']);
+    this.set('value', null);
+  },
+
+  test(assert) {
+    expandSelectBox('.combobox');
+
+    andThen(() => {
+      assert.equal(selectBox('.combobox').header.name(), 'evil', 'it sets the first row as value');
+    });
   }
 });

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

@@ -1,23 +0,0 @@
-import componentTest from 'helpers/component-test';
-
-moduleForComponent('dropdown-select-box', { integration: true });
-
-componentTest('the header has a title', {
-  template: '{{dropdown-select-box content=content value=value}}',
-
-  beforeEach() {
-    this.set("value", 1);
-    this.set("content", [{ id: 1, text: "apple" }, { id: 2, text: "peach" }]);
-  },
-
-  test(assert) {
-    andThen(() => {
-      assert.equal(find(".select-box-header .btn").attr("title"), "apple", "it has the correct title");
-    });
-
-    andThen(() => {
-      this.set("value", 2);
-      assert.equal(find(".select-box-header .btn").attr("title"), "peach", "it correctly changes the title");
-    });
-  }
-});

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

@@ -0,0 +1,17 @@
+import componentTest from 'helpers/component-test';
+moduleForComponent('multi-combo-box', {integration: true});
+
+componentTest('with objects and values', {
+  template: '{{multi-combo-box content=items value=value}}',
+
+  beforeEach() {
+    this.set('items', [{id: 1, name: 'hello'}, {id: 2, name: 'world'}]);
+    this.set('value', [1, 2]);
+  },
+
+  test(assert) {
+    andThen(() => {
+      assert.propEqual(selectBox(".multi-combobox").header.name(), 'hello,world');
+    });
+  }
+});

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

@@ -25,11 +25,11 @@ componentTest('updating the content refreshes the list', {
 
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().selectedRow.el().find(".title").text(), "Pinned") );
+    andThen(() => assert.equal(selectBox().selectedRow.name(), "Pinned") );
 
     andThen(() => {
       this.set("topic.pinned", false);
-      assert.equal(selectBox().selectedRow.el().find(".title").text(), "Unpinned");
+      assert.equal(selectBox().selectedRow.name(), "Unpinned");
     });
 
     andThen(() => {

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

@@ -1,31 +1,31 @@
 import componentTest from 'helpers/component-test';
 
-moduleForComponent('select-box', { integration: true });
+moduleForComponent('select-box-kit', { integration: true });
 
 componentTest('updating the content refreshes the list', {
-  template: '{{select-box value=1 content=content}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
+    this.set("content", [{ id: 1, name: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.equal(selectBox().row(1).text(), "robin");
-      this.set("content", [{ id: 1, text: "regis" }]);
-      assert.equal(selectBox().row(1).text(), "regis");
+      assert.equal(selectBox().rowByValue(1).name(), "robin");
+      this.set("content", [{ id: 1, name: "regis" }]);
+      assert.equal(selectBox().rowByValue(1).name(), "regis");
     });
   }
 });
 
 componentTest('accepts a value by reference', {
-  template: '{{select-box value=value content=content}}',
+  template: '{{select-box-kit value=value content=content}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
@@ -33,7 +33,7 @@ componentTest('accepts a value by reference', {
 
     andThen(() => {
       assert.equal(
-        selectBox().selectedRow.text(), "robin",
+        selectBox().selectedRow.name(), "robin",
         "it highlights the row corresponding to the value"
       );
     });
@@ -47,16 +47,16 @@ componentTest('accepts a value by reference', {
 });
 
 componentTest('select-box can be filtered', {
-  template: '{{select-box filterable=true value=1 content=content}}',
+  template: '{{select-box-kit filterable=true value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin"}, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin"}, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
+    andThen(() => assert.equal(find(".select-box-kit-filter-input").length, 1, "it has a search input"));
 
     selectBoxFillInFilter("regis");
 
@@ -74,35 +74,27 @@ componentTest('select-box can be filtered', {
 });
 
 componentTest('no default icon', {
-  template: '{{select-box}}',
+  template: '{{select-box-kit}}',
 
   test(assert) {
     assert.equal(selectBox().header.icon().length, 0, "it doesn’t have an icon if not specified");
   }
 });
 
-componentTest('customisable icon', {
-  template: '{{select-box icon="shower"}}',
-
-  test(assert) {
-    assert.ok(selectBox().header.icon().hasClass("d-icon-shower"), "it has a the correct icon");
-  }
-});
-
 componentTest('default search icon', {
-  template: '{{select-box filterable=true}}',
+  template: '{{select-box-kit filterable=true}}',
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.ok(selectBox().filter.icon().hasClass("d-icon-search"), "it has a the correct icon");
+      assert.ok(exists(selectBox().filter.icon), "it has a the correct icon");
     });
   }
 });
 
 componentTest('with no search icon', {
-  template: '{{select-box filterable=true filterIcon=null}}',
+  template: '{{select-box-kit filterable=true filterIcon=null}}',
 
   test(assert) {
     expandSelectBox();
@@ -114,7 +106,7 @@ componentTest('with no search icon', {
 });
 
 componentTest('custom search icon', {
-  template: '{{select-box filterable=true filterIcon="shower"}}',
+  template: '{{select-box-kit filterable=true filterIcon="shower"}}',
 
   test(assert) {
     expandSelectBox();
@@ -125,17 +117,8 @@ componentTest('custom search icon', {
   }
 });
 
-componentTest('not filterable by default', {
-  template: '{{select-box}}',
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.notOk(selectBox().filter.exists()) );
-  }
-});
-
 componentTest('select-box is expandable', {
-  template: '{{select-box}}',
+  template: '{{select-box-kit}}',
   test(assert) {
     expandSelectBox();
 
@@ -147,46 +130,46 @@ componentTest('select-box is expandable', {
   }
 });
 
-componentTest('accepts custom id/text keys', {
-  template: '{{select-box value=value content=content idKey="identifier" textKey="name"}}',
+componentTest('accepts custom value/name keys', {
+  template: '{{select-box-kit value=value nameProperty="item" content=content valueAttribute="identifier"}}',
 
   beforeEach() {
     this.set("value", 1);
-    this.set("content", [{ identifier: 1, name: "robin" }]);
+    this.set("content", [{ identifier: 1, item: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      assert.equal(selectBox().selectedRow.text(), "robin");
+      assert.equal(selectBox().selectedRow.name(), "robin");
     });
   }
 });
 
 componentTest('doesn’t render collection content before first expand', {
-  template: '{{select-box value=1 content=content idKey="identifier" textKey="name"}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ identifier: 1, name: "robin" }]);
+    this.set("content", [{ value: 1, name: "robin" }]);
   },
 
   test(assert) {
-    assert.notOk(exists(find(".collection")));
+    assert.notOk(exists(find(".select-box-kit-collection")));
 
     expandSelectBox();
 
     andThen(() => {
-      assert.ok(exists(find(".collection")));
+      assert.ok(exists(find(".select-box-kit-collection")));
     });
   }
 });
 
-componentTest('persists filter state when expandind/collapsing', {
-  template: '{{select-box value=1 content=content filterable=true}}',
+componentTest('persists filter state when expanding/collapsing', {
+  template: '{{select-box-kit value=1 content=content filterable=true}}',
 
   beforeEach() {
-    this.set("content", [{id:1, text:"robin"}, {id:2, text:"régis"}]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "régis" }]);
   },
 
   test(assert) {
@@ -207,126 +190,88 @@ componentTest('persists filter state when expandind/collapsing', {
 });
 
 componentTest('supports options to limit size', {
-  template: '{{select-box collectionHeight=20 content=content}}',
+  template: '{{select-box-kit collectionHeight=20 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
+    this.set("content", [{ id: 1, name: "robin" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
     andThen(() => {
-      const body = find(".select-box-body");
-      assert.equal(parseInt(body.height()), 20, "it limits the height");
-    });
-  }
-});
-
-componentTest('supports custom row template', {
-  template: '{{select-box content=content templateForRow=templateForRow}}',
-
-  beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
-    this.set("templateForRow", (rowComponent) => {
-      return `<b>${rowComponent.get("content.text")}</b>`;
-    });
-  },
-
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.equal(selectBox().row(1).el().html().trim(), "<b>robin</b>") );
-  }
-});
-
-componentTest('supports converting select value to integer', {
-  template: '{{select-box value=value content=content castInteger=true}}',
-
-  beforeEach() {
-    this.set("value", 2);
-    this.set("content", [{ id: "1", text: "robin"}, {id: "2", text: "régis" }]);
-  },
-
-  test(assert) {
-    expandSelectBox();
-
-    andThen(() => assert.equal(selectBox().selectedRow.text(), "régis") );
-
-    andThen(() => {
-      this.set("value", 3);
-      this.set("content", [{ id: "3", text: "jeff" }]);
-    });
-
-    andThen(() => {
-      assert.equal(selectBox().selectedRow.text(), "jeff", "it works with dynamic content");
+      const height = find(".select-box-kit-collection").height();
+      assert.equal(parseInt(height, 10), 20, "it limits the height");
     });
   }
 });
 
 componentTest('dynamic headerText', {
-  template: '{{select-box value=1 content=content}}',
+  template: '{{select-box-kit value=1 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().header.text(), "robin") );
+    andThen(() => assert.equal(selectBox().header.name(), "robin") );
 
     selectBoxSelectRow(2);
 
     andThen(() => {
-      assert.equal(selectBox().header.text(), "regis", "it changes header text");
+      assert.equal(selectBox().header.name(), "regis", "it changes header text");
     });
   }
 });
 
-componentTest('static headerText', {
-  template: '{{select-box value=1 content=content dynamicHeaderText=false headerText=headerText}}',
+componentTest('supports custom row template', {
+  template: '{{select-box-kit content=content templateForRow=templateForRow}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
-    this.set("headerText", "Choose...");
+    this.set("content", [{ id: 1, name: "robin" }]);
+    this.set("templateForRow", rowComponent => {
+      return `<b>${rowComponent.get("content.name")}</b>`;
+    });
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => {
-      assert.equal(selectBox().header.text(), "Choose...");
-    });
-
-    selectBoxSelectRow(2);
-
-    andThen(() => {
-      assert.equal(selectBox().header.text(), "Choose...", "it doesn’t change header text");
-    });
+    andThen(() => assert.equal(selectBox().rowByValue(1).el.html().trim(), "<b>robin</b>") );
   }
 });
 
-componentTest('supports custom row title', {
-  template: '{{select-box content=content titleForRow=titleForRow}}',
+componentTest('supports converting select value to integer', {
+  template: '{{select-box-kit value=value content=content castInteger=true}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }]);
-    this.set("titleForRow", () => "sam" );
+    this.set("value", 2);
+    this.set("content", [{ id: "1", name: "robin"}, {id: "2", name: "régis" }]);
   },
 
   test(assert) {
     expandSelectBox();
 
-    andThen(() => assert.equal(selectBox().row(1).title(), "sam") );
+    andThen(() => assert.equal(selectBox().selectedRow.name(), "régis") );
+
+    andThen(() => {
+      this.set("value", 3);
+      this.set("content", [{ id: "3", name: "jeff" }]);
+    });
+
+    andThen(() => {
+      assert.equal(selectBox().selectedRow.name(), "jeff", "it works with dynamic content");
+    });
   }
 });
 
 componentTest('supports keyboard events', {
-  template: '{{select-box content=content filterable=true}}',
+  template: '{{select-box-kit content=content filterable=true}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
+    this.set("content", [{ id: 1, name: "robin" }, { id: 2, name: "regis" }]);
   },
 
   test(assert) {
@@ -335,31 +280,25 @@ componentTest('supports keyboard events', {
     selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the first row");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "the next row is highlighted");
     });
 
     selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the next row");
-    });
-
-    selectBox().keyboard.down();
-
-    andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "regis", "it keeps highlighting the last row when reaching the end");
+      assert.equal(selectBox().highlightedRow.title(), "robin", "it returns to the first row");
     });
 
     selectBox().keyboard.up();
 
     andThen(() => {
-      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the previous row");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the last row");
     });
 
     selectBox().keyboard.enter();
 
     andThen(() => {
-      assert.equal(selectBox().selectedRow.title(), "robin", "it selects the row when pressing enter");
+      assert.equal(selectBox().selectedRow.title(), "regis", "it selects the row when pressing enter");
       assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
 

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

@@ -0,0 +1,28 @@
+import componentTest from 'helpers/component-test';
+import Topic from 'discourse/models/topic';
+
+const buildTopic = function() {
+  return Topic.create({
+    id: 1234,
+    title: 'Qunit Test Topic'
+  });
+};
+
+moduleForComponent('topic-footer-mobile-dropdown', {integration: true});
+
+componentTest('default', {
+  template: '{{topic-footer-mobile-dropdown topic=topic}}',
+  beforeEach() {
+    this.set("topic", buildTopic());
+  },
+
+  test(assert) {
+    expandSelectBox();
+
+    andThen(() => {
+      assert.equal(selectBox().header.name(), "Topic Controls");
+      assert.equal(selectBox().rowByIndex(0).name(), "Bookmark");
+      assert.equal(selectBox().rowByIndex(1).name(), "Share");
+    });
+  }
+});

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

@@ -23,12 +23,12 @@ componentTest('the header has a localized title', {
 
   test(assert) {
     andThen(() => {
-      assert.equal(find(".select-box-header .btn").attr("title"), "Normal", "it has the correct title");
+      assert.equal(selectBox().header.name(), "Normal", "it has the correct title");
     });
 
     andThen(() => {
       this.set("topic.details.notification_level", 2);
-      assert.equal(find(".select-box-header .btn").attr("title"), "Tracking", "it correctly changes the title");
+      assert.equal(selectBox().header.name(), "Tracking", "it correctly changes the title");
     });
   }
 });