FEATURE: introduces list/compact_list components

test/javascripts/components/value-list-test.js.es6

@@ -1,63 +1,111 @@
 import componentTest from "helpers/component-test";
 moduleForComponent("value-list", { integration: true });
 
-componentTest("functionality", {
-  template: '{{value-list values=values inputType="array"}}',
+componentTest("adding a value", {
+  template: "{{value-list values=values}}",
+
   async test(assert) {
-    assert.ok(this.$(".values .value").length === 0, "it has no values");
-    assert.ok(this.$("input").length, "it renders the input");
+    this.set("values", "vinkas\nosama");
+
+    await selectKit().expand();
+    await selectKit().fillInFilter("eviltrout");
+    await selectKit().keyboard("enter");
+
     assert.ok(
-      this.$(".btn-primary[disabled]").length,
-      "it is disabled with no value"
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
     );
 
-    await fillIn("input", "eviltrout");
+    assert.deepEqual(
+      this.get("values"),
+      "vinkas\nosama\neviltrout",
+      "it adds the value to the list of values"
+    );
+  }
+});
+
+componentTest("removing a value", {
+  template: "{{value-list values=values}}",
+
+  async test(assert) {
+    this.set("values", "vinkas\nosama");
+
+    await click(".values .value[data-index='0'] .remove-value-btn");
+
     assert.ok(
-      !this.$(".btn-primary[disabled]").length,
-      "it isn't disabled anymore"
+      find(".values .value").length === 1,
+      "it removes the value from the list of values"
     );
 
-    await click(".btn-primary");
-    assert.equal(this.$(".values .value").length, 1, "it adds the value");
-    assert.equal(this.$("input").val(), "", "it clears the input");
-    assert.ok(this.$(".btn-primary[disabled]").length, "it is disabled again");
-    assert.equal(this.get("values"), "eviltrout", "it appends the value");
-
-    await click(".value .btn-small");
-    assert.ok(this.$(".values .value").length === 0, "it removes the value");
+    assert.equal(this.get("values"), "osama", "it removes the expected value");
   }
 });
 
-componentTest("with string delimited values", {
-  template: "{{value-list values=valueString}}",
-  beforeEach() {
-    this.set("valueString", "hello\nworld");
-  },
+componentTest("selecting a value", {
+  template: "{{value-list values=values choices=choices}}",
 
   async test(assert) {
-    assert.equal(this.$(".values .value").length, 2);
+    this.set("values", "vinkas\nosama");
+    this.set("choices", ["maja", "michael"]);
 
-    await fillIn("input", "eviltrout");
-    await click(".btn-primary");
+    await selectKit().expand();
+    await selectKit().selectRowByValue("maja");
 
-    assert.equal(this.$(".values .value").length, 3);
-    assert.equal(this.get("valueString"), "hello\nworld\neviltrout");
+    assert.ok(
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
+    );
+
+    assert.deepEqual(
+      this.get("values"),
+      "vinkas\nosama\nmaja",
+      "it adds the value to the list of values"
+    );
   }
 });
 
-componentTest("with array values", {
-  template: '{{value-list values=valueArray inputType="array"}}',
-  beforeEach() {
-    this.set("valueArray", ["abc", "def"]);
-  },
+componentTest("array support", {
+  template: "{{value-list values=values inputType='array'}}",
 
   async test(assert) {
-    assert.equal(this.$(".values .value").length, 2);
+    this.set("values", ["vinkas", "osama"]);
 
-    await fillIn("input", "eviltrout");
-    await click(".btn-primary");
+    await selectKit().expand();
+    await selectKit().fillInFilter("eviltrout");
+    await selectKit().keyboard("enter");
 
-    assert.equal(this.$(".values .value").length, 3);
-    assert.deepEqual(this.get("valueArray"), ["abc", "def", "eviltrout"]);
+    assert.ok(
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
+    );
+
+    assert.deepEqual(
+      this.get("values"),
+      ["vinkas", "osama", "eviltrout"],
+      "it adds the value to the list of values"
+    );
+  }
+});
+
+componentTest("delimiter support", {
+  template: "{{value-list values=values inputDelimiter='|'}}",
+
+  async test(assert) {
+    this.set("values", "vinkas|osama");
+
+    await selectKit().expand();
+    await selectKit().fillInFilter("eviltrout");
+    await selectKit().keyboard("enter");
+
+    assert.ok(
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
+    );
+
+    assert.deepEqual(
+      this.get("values"),
+      "vinkas|osama|eviltrout",
+      "it adds the value to the list of values"
+    );
   }
 });