UX: Add simple-list setting type (#9970)

test/javascripts/components/simple-list-test.js

@@ -0,0 +1,84 @@
+import componentTest from "helpers/component-test";
+moduleForComponent("simple-list", { integration: true });
+
+componentTest("adding a value", {
+  template: "{{simple-list values=values}}",
+
+  beforeEach() {
+    this.set("values", "vinkas\nosama");
+  },
+
+  async test(assert) {
+    assert.ok(
+      find(".add-value-btn[disabled]").length,
+      "while loading the + button is disabled"
+    );
+
+    await fillIn(".add-value-input", "penar");
+    await click(".add-value-btn");
+
+    assert.ok(
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
+    );
+
+    assert.ok(
+      find(".values .value[data-index='2'] .value-input")[0].value === "penar",
+      "it sets the correct value for added item"
+    );
+
+    await fillIn(".add-value-input", "eviltrout");
+    await keyEvent(".add-value-input", "keydown", 13); // enter
+
+    assert.ok(
+      find(".values .value").length === 4,
+      "it adds the value when keying Enter"
+    );
+  }
+});
+
+componentTest("removing a value", {
+  template: "{{simple-list values=values}}",
+
+  beforeEach() {
+    this.set("values", "vinkas\nosama");
+  },
+
+  async test(assert) {
+    await click(".values .value[data-index='0'] .remove-value-btn");
+
+    assert.ok(
+      find(".values .value").length === 1,
+      "it removes the value from the list of values"
+    );
+
+    assert.ok(
+      find(".values .value[data-index='0'] .value-input")[0].value === "osama",
+      "it removes the correct value"
+    );
+  }
+});
+
+componentTest("delimiter support", {
+  template: "{{simple-list values=values inputDelimiter='|'}}",
+
+  beforeEach() {
+    this.set("values", "vinkas|osama");
+  },
+
+  async test(assert) {
+    await fillIn(".add-value-input", "eviltrout");
+    await click(".add-value-btn");
+
+    assert.ok(
+      find(".values .value").length === 3,
+      "it adds the value to the list of values"
+    );
+
+    assert.ok(
+      find(".values .value[data-index='2'] .value-input")[0].value ===
+        "eviltrout",
+      "it adds the correct value"
+    );
+  }
+});