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/components/select-kit/dropdown-select-box-test.js.es6

@@ -0,0 +1,111 @@
+import selectKit from "helpers/select-kit-helper";
+import componentTest from "helpers/component-test";
+
+moduleForComponent("select-kit/dropdown-select-box", {
+  integration: true,
+  beforeEach() {
+    this.set("subject", selectKit());
+  }
+});
+
+const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+const DEFAULT_VALUE = 1;
+
+const setDefaultState = (ctx, options) => {
+  const properties = Object.assign(
+    {
+      content: DEFAULT_CONTENT,
+      value: DEFAULT_VALUE,
+      onChange: value => {
+        this.set("value", value);
+      }
+    },
+    options || {}
+  );
+  ctx.setProperties(properties);
+};
+
+componentTest("selection behavior", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+    assert.ok(this.subject.isExpanded());
+
+    await this.subject.selectRowByValue(DEFAULT_VALUE);
+    assert.notOk(
+      this.subject.isExpanded(),
+      "it collapses the dropdown on select"
+    );
+  }
+});
+
+componentTest("options.showFullTitle=false", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+      options=(hash
+        showFullTitle=showFullTitle
+      )
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, { showFullTitle: false });
+  },
+
+  async test(assert) {
+    assert.ok(
+      !exists(
+        this.subject
+          .header()
+          .el()
+          .find(".selected-name .body")
+      ),
+      "it hides the text of the selected item"
+    );
+  }
+});
+
+componentTest("options.showFullTitle=true", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+      options=(hash
+        showFullTitle=showFullTitle
+      )
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, { showFullTitle: true });
+  },
+
+  async test(assert) {
+    assert.ok(
+      exists(
+        this.subject
+          .header()
+          .el()
+          .find(".selected-name")
+      ),
+      "it shows the text of the selected item"
+    );
+  }
+});