DEV: improves sk api (#9653)

- reduces the API to 3 actions for now: appendContent/prependContent/onChange
- well tested
- removes all previous APIS which were only half supported or too dangerous as they could collide with other plugins or core behaviors
- this plugins also puts every sk test helpers in one file

test/javascripts/components/select-kit/api-test.js

@@ -0,0 +1,109 @@
+import componentTest from "helpers/component-test";
+import selectKit, {
+  testSelectKitModule,
+  setDefaultState,
+  DEFAULT_CONTENT
+} from "helpers/select-kit-helper";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { clearCallbacks } from "select-kit/mixins/plugin-api";
+
+testSelectKitModule("select-kit:api", {
+  beforeEach() {
+    this.setProperties({
+      comboBox: selectKit(".combo-box"),
+      singleSelect: selectKit(".single-select:not(.combo-box)")
+    });
+  },
+
+  afterEach() {
+    clearCallbacks();
+  }
+});
+
+componentTest("modifySelectKit(identifier).appendContent", {
+  template: `
+    {{combo-box value=value content=content onChange=onChange}}
+    {{single-select value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").appendContent(() => {
+        return {
+          id: "alpaca",
+          name: "Alpaca"
+        };
+      });
+    });
+  },
+
+  async test(assert) {
+    await this.comboBox.expand();
+    const row = this.comboBox.rowByIndex(3);
+    assert.ok(row.exists());
+    assert.equal(row.value(), "alpaca");
+
+    await this.comboBox.collapse();
+
+    assert.notOk(this.singleSelect.rowByValue("alpaca").exists());
+  }
+});
+
+componentTest("modifySelectKit(identifier).prependContent", {
+  template: `
+    {{combo-box value=value content=content onChange=onChange}}
+    {{single-select value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").prependContent(() => {
+        return {
+          id: "alpaca",
+          name: "Alpaca"
+        };
+      });
+    });
+  },
+
+  afterEach() {},
+
+  async test(assert) {
+    await this.comboBox.expand();
+    const row = this.comboBox.rowByIndex(0);
+    assert.ok(row.exists());
+    assert.equal(row.value(), "alpaca");
+
+    await this.comboBox.collapse();
+
+    assert.notOk(this.singleSelect.rowByValue("alpaca").exists());
+  }
+});
+
+componentTest("modifySelectKit(identifier).onChange", {
+  template: `
+    <div id="test"></div>
+    {{combo-box value=value content=content onChange=onChange}}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, null, { content: DEFAULT_CONTENT });
+
+    withPluginApi("0.8.43", api => {
+      api.modifySelectKit("combo-box").onChange((component, value, item) => {
+        find("#test").text(item.name);
+      });
+    });
+  },
+
+  async test(assert) {
+    await this.comboBox.expand();
+    await this.comboBox.selectRowByIndex(0);
+
+    assert.equal(find("#test").text(), "foo");
+  }
+});

test/javascripts/components/select-kit/category-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("category-chooser");
 

test/javascripts/components/select-kit/category-drop-test.js

@@ -1,7 +1,7 @@
 import DiscourseURL from "discourse/lib/url";
 import Category from "discourse/models/category";
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import {
   NO_CATEGORIES_ID,
   ALL_CATEGORIES_ID

test/javascripts/components/select-kit/list-setting-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("list-setting");
 

test/javascripts/components/select-kit/mini-tag-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("mini-tag-chooser");
 

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

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("multi-select");
 

test/javascripts/components/select-kit/notifications-button-test.js

@@ -1,5 +1,8 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule, setDefaultState } from "./select-kit-test-helper";
+import {
+  testSelectKitModule,
+  setDefaultState
+} from "helpers/select-kit-helper";
 
 testSelectKitModule("notifications-button");
 

test/javascripts/components/select-kit/select-kit-test-helper.js

@@ -1,35 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-
-export function testSelectKitModule(moduleName, options = {}) {
-  moduleForComponent(`select-kit/${moduleName}`, {
-    integration: true,
-
-    beforeEach() {
-      this.set("subject", selectKit());
-      options.beforeEach && options.beforeEach.call(this);
-    },
-
-    afterEach() {
-      options.afterEach && options.afterEach.call(this);
-    }
-  });
-}
-
-export const DEFAULT_CONTENT = [
-  { id: 1, name: "foo" },
-  { id: 2, name: "bar" },
-  { id: 3, name: "baz" }
-];
-
-export function setDefaultState(ctx, value, options = {}) {
-  const properties = Object.assign(
-    {
-      onChange: v => {
-        this.set("value", v);
-      }
-    },
-    options || {}
-  );
-
-  ctx.setProperties(properties);
-}

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

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 
 testSelectKitModule("single-select");
 

test/javascripts/components/select-kit/tag-drop-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import Site from "discourse/models/site";
 import { set } from "@ember/object";
 import pretender from "helpers/create-pretender";

test/javascripts/components/select-kit/user-chooser-test.js

@@ -1,5 +1,5 @@
 import componentTest from "helpers/component-test";
-import { testSelectKitModule } from "./select-kit-test-helper";
+import { testSelectKitModule } from "helpers/select-kit-helper";
 import pretender from "helpers/create-pretender";
 
 testSelectKitModule("user-chooser");

test/javascripts/helpers/select-kit-helper.js

@@ -276,3 +276,38 @@ export default function selectKit(selector) {
     }
   };
 }
+
+export function testSelectKitModule(moduleName, options = {}) {
+  moduleForComponent(`select-kit/${moduleName}`, {
+    integration: true,
+
+    beforeEach() {
+      this.set("subject", selectKit());
+      options.beforeEach && options.beforeEach.call(this);
+    },
+
+    afterEach() {
+      options.afterEach && options.afterEach.call(this);
+    }
+  });
+}
+
+export const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+export function setDefaultState(ctx, value, options = {}) {
+  const properties = Object.assign(
+    {
+      value,
+      onChange: v => {
+        ctx.set("value", v);
+      }
+    },
+    options || {}
+  );
+
+  ctx.setProperties(properties);
+}