DEV: select-kit 2 (#7998)

This new iteration of select-kit focuses on following best principales and disallowing mutations inside select-kit components. A best effort has been made to avoid breaking changes, however if you content was a flat array, eg: ["foo", "bar"] You will need to set valueProperty=null and nameProperty=null on the component.

Also almost every component should have an `onChange` handler now to decide what to do with the updated data. **select-kit will not mutate your data by itself anymore**

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

@@ -1,3 +1,4 @@
+import selectKit from "helpers/select-kit-helper";
 import { acceptance } from "helpers/qunit-helpers";
 
 acceptance("Admin - User Index", {
@@ -84,15 +85,10 @@ QUnit.test("will clear unsaved groups when switching user", async assert => {
     "the name should be correct"
   );
 
-  await fillIn(".admin-group-selector .filter-input", "Macdonald");
-  await click(".admin-group-selector .filter-input");
-  await keyEvent(".admin-group-selector .filter-input", "keydown", 13);
-
-  assert.equal(
-    find('.admin-group-selector span[title="Macdonald"]').length,
-    1,
-    "group should be set"
-  );
+  const groupSelector = selectKit(".admin-group-selector");
+  await groupSelector.expand();
+  await groupSelector.selectRowByValue(42);
+  assert.equal(groupSelector.header().value(), 42, "group should be set");
 
   await visit("/admin/users/1/eviltrout");
 

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

@@ -447,6 +447,8 @@ QUnit.test("Composer can toggle whispers", async assert => {
 
   await click(".toggle-fullscreen");
 
+  await menu.expand();
+
   assert.ok(
     menu.rowByValue("toggleWhisper").exists(),
     "whisper toggling is still present when going fullscreen"
@@ -638,7 +640,6 @@ QUnit.test("Checks for existing draft", async assert => {
 
 QUnit.test("Can switch states without abandon popup", async assert => {
   try {
-    const composerActions = selectKit(".composer-actions");
     toggleCheckDraftPopup(true);
 
     await visit("/t/internationalization-localization/280");
@@ -659,8 +660,9 @@ QUnit.test("Can switch states without abandon popup", async assert => {
 
     await click("article#post_3 button.reply");
 
+    const composerActions = selectKit(".composer-actions");
     await composerActions.expand();
-    await composerActions.selectRowByValue("reply_to_topic");
+    await composerActions.selectRowByValue("reply_as_private_message");
 
     assert.equal(
       find(".modal-body").text(),
@@ -668,9 +670,10 @@ QUnit.test("Can switch states without abandon popup", async assert => {
       "abandon popup shouldn't come"
     );
 
-    assert.equal(
-      find(".d-editor-input").val(),
-      longText,
+    assert.ok(
+      find(".d-editor-input")
+        .val()
+        .includes(longText),
       "entered text should still be there"
     );
 

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

@@ -48,7 +48,7 @@ QUnit.test("Disable body until category is selected", async assert => {
 
   await fillIn(".d-editor-input", "Now I can type stuff");
   await categoryChooser.expand();
-  await categoryChooser.selectRowByValue("__none__");
+  await categoryChooser.selectRowByIndex(0);
 
   assert.ok(
     find(".d-editor-textarea-wrapper.disabled").length === 0,

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

@@ -51,29 +51,22 @@ QUnit.test("Anonymous Viewing Group", async assert => {
   );
   assert.ok(count(".user-stream-item") > 0, "it lists stream items");
 
-  await selectKit(".group-dropdown").expand();
+  const groupDropdown = selectKit(".group-dropdown");
+  await groupDropdown.expand();
+
+  assert.equal(groupDropdown.rowByIndex(1).name(), "discourse");
 
   assert.equal(
-    find(".select-kit-row")
-      .text()
-      .trim(),
-    "discourse",
-    "it displays the right row"
-  );
-
-  assert.equal(
-    find(".group-dropdown-filter")
-      .text()
-      .trim(),
-    I18n.t("groups.index.all").toLowerCase(),
-    "it displays the right header"
+    groupDropdown.rowByIndex(0).name(),
+    I18n.t("groups.index.all").toLowerCase()
   );
 
   Discourse.SiteSettings.enable_group_directory = false;
 
   await visit("/g");
   await visit("/g/discourse");
-  await selectKit(".group-dropdown").expand();
+
+  await groupDropdown.expand();
 
   assert.equal(
     find(".group-dropdown-filter").length,

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

@@ -39,8 +39,11 @@ QUnit.test("Settings", async assert => {
 
   assert.ok(find(".reviewable-score-type").length, "has a list of bonuses");
 
-  await fillIn(".reviewable-score-type:eq(0) .field input ", "0.5");
+  const field = selectKit(".reviewable-score-type:eq(0) .field .combo-box");
+  await field.expand();
+  await field.selectRowByValue("5");
   await click(".save-settings");
+
   assert.ok(find(".reviewable-settings .saved").length, "it saved");
 });
 
@@ -124,7 +127,7 @@ QUnit.test("Editing a reviewable", async assert => {
   let tags = selectKit(`${topic} .payload-tags .mini-tag-chooser`);
   await tags.expand();
   await tags.fillInFilter("monkey");
-  await tags.keyboard("enter");
+  await tags.selectRowByValue("monkey");
 
   await fillIn(".editable-field.payload-raw textarea", "new raw contents");
   await click(`${topic} .reviewable-action.save-edit`);

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

@@ -322,8 +322,9 @@ QUnit.test("update in filter through advanced search ui", async assert => {
   await inSelector.expand();
   await inSelector.selectRowByValue("bookmarks");
 
-  assert.ok(
-    inSelector.rowByName("I bookmarked").exists(),
+  assert.equal(
+    inSelector.header().label(),
+    "I bookmarked",
     'has "I bookmarked" populated'
   );
   assert.equal(
@@ -344,8 +345,9 @@ QUnit.test("update status through advanced search ui", async assert => {
   await statusSelector.expand();
   await statusSelector.selectRowByValue("closed");
 
-  assert.ok(
-    statusSelector.rowByName("are closed").exists(),
+  assert.equal(
+    statusSelector.header().label(),
+    "are closed",
     'has "are closed" populated'
   );
   assert.equal(
@@ -375,8 +377,9 @@ QUnit.test("update post time through advanced search ui", async assert => {
   await postTimeSelector.expand();
   await postTimeSelector.selectRowByValue("after");
 
-  assert.ok(
-    postTimeSelector.rowByName("after").exists(),
+  assert.equal(
+    postTimeSelector.header().label(),
+    "after",
     'has "after" populated'
   );
 
@@ -409,7 +412,7 @@ QUnit.test("validate advanced search when initially empty", async assert => {
   await click(".search-advanced-options .in-likes");
 
   assert.ok(
-    exists(".search-advanced-options .in-likes:checked"),
+    selectKit(".search-advanced-options .in-likes:checked"),
     'has "I liked" populated'
   );
   assert.equal(

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

@@ -28,15 +28,15 @@ QUnit.test("default", async assert => {
   await click(".toggle-admin-menu");
   await click(".topic-admin-status-update button");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await click("#private-topic-timer");
 
-  assert.equal(timerType.header().title(), "Remind Me");
+  assert.equal(timerType.header().label(), "Remind Me");
   assert.equal(timerType.header().value(), "reminder");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 });
 
@@ -51,7 +51,12 @@ QUnit.test("autoclose - specific time", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will automatically close in/g;
@@ -72,7 +77,12 @@ QUnit.test("autoclose", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically close in/g;
@@ -86,7 +96,12 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Pick date and time")
+  );
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically close in/g;
@@ -100,9 +115,11 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input input[type=number]", "2");
 
-  assert.equal(
-    futureDateInputSelector.header().title(),
-    "Close based on last post"
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Close based on last post")
   );
   assert.equal(
     futureDateInputSelector.header().value(),
@@ -128,13 +145,18 @@ QUnit.test("close temporarily", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("open");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically open in/g;
@@ -148,7 +170,7 @@ QUnit.test("close temporarily", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.equal(futureDateInputSelector.header().label(), "Pick date and time");
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically open in/g;
@@ -171,10 +193,10 @@ QUnit.test("schedule", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("publish_to_category");
 
-  assert.equal(categoryChooser.header().title(), "uncategorized");
+  assert.equal(categoryChooser.header().label(), "uncategorized");
   assert.equal(categoryChooser.header().value(), null);
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await categoryChooser.expand();
@@ -183,7 +205,12 @@ QUnit.test("schedule", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will be published to #dev/g;
@@ -219,13 +246,18 @@ QUnit.test("auto delete", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("delete");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("two_weeks");
 
-  assert.equal(futureDateInputSelector.header().title(), "Two Weeks");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Two Weeks")
+  );
   assert.equal(futureDateInputSelector.header().value(), "two_weeks");
 
   const regex = /will be automatically deleted/g;

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

@@ -26,7 +26,7 @@ QUnit.test("Updating topic notification level", async assert => {
   await notificationOptions.selectRowByValue("3");
 
   assert.equal(
-    notificationOptions.selectedRow().name(),
+    notificationOptions.header().label(),
     "Watching",
     "it should display the right notification level"
   );