fix(form): fix answer handling of powerselect widget

projectcaluma · Jun 21, 2019 · cb37130 · cb37130
1 parent 62b6a73
commit cb37130
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 39 deletions.
diff --git a/addon/components/cf-field/input/powerselect.js b/addon/components/cf-field/input/powerselect.js
@@ -41,26 +41,22 @@ export default Component.extend(ComponentQueryManager, {
     }
   ),
 
-  selected: computed(
-    "field.answer.{_valueKey,listValue,stringValue}",
-    function() {
-      const key = this.get("field.answer._valueKey");
-      const answer = this.get(`field.answer.${key}`);
-      const isSingleChoice = key === "stringValue";
+  selected: computed("field.answer.value", function() {
+    const answer = this.get("field.answer.value");
+    const isSingleChoice = !Array.isArray(answer);
 
-      if (!answer) {
-        return null;
-      }
+    if (!answer) {
+      return null;
+    }
 
-      const selection = this.choices.filter(choice => {
-        return isSingleChoice
-          ? answer === choice.slug
-          : answer.includes(choice.slug);
-      });
+    const selection = this.choices.filter(choice => {
+      return isSingleChoice
+        ? answer === choice.slug
+        : answer.includes(choice.slug);
+    });
 
-      return isSingleChoice ? selection[0] : selection;
-    }
-  ),
+    return isSingleChoice ? selection[0] : selection;
+  }),
 
   componentName: computed("multiple", function() {
     return this.get("multiple") ? "power-select-multiple" : "power-select";

diff --git a/tests/integration/components/cf-field/input/powerselect-test.js b/tests/integration/components/cf-field/input/powerselect-test.js
@@ -10,8 +10,8 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     this.set("singleChoiceField", {
       id: "test-single",
       answer: {
-        _valueKey: "stringValue",
-        stringValue: null
+        stringValue: null,
+        __typename: "StringAnswer"
       },
       question: {
         __typename: "ChoiceQuestion",
@@ -28,8 +28,8 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     this.set("multipleChoiceField", {
       id: "test-multiple",
       answer: {
-        _valueKey: "listValue",
-        listValue: null
+        listValue: null,
+        __typename: "ListAnswer"
       },
       question: {
         __typename: "MultipleChoiceQuestion",
@@ -48,8 +48,8 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     assert.expect(1);
 
     await render(
-      hbs`{{cf-field/input/powerselect 
-        field=singleChoiceField 
+      hbs`{{cf-field/input/powerselect
+        field=singleChoiceField
       }}`
     );
 
@@ -64,9 +64,9 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     });
 
     await render(
-      hbs`{{cf-field/input/powerselect 
-        field=singleChoiceField 
-        onSave=onSave 
+      hbs`{{cf-field/input/powerselect
+        field=singleChoiceField
+        onSave=onSave
       }}`
     );
 
@@ -83,8 +83,8 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     assert.expect(1);
 
     await render(
-      hbs`{{cf-field/input/powerselect 
-        field=multipleChoiceField 
+      hbs`{{cf-field/input/powerselect
+        field=multipleChoiceField
       }}`
     );
 
@@ -95,13 +95,13 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     assert.expect(3);
 
     this.set("onSave", choices => {
-      this.set("multipleChoiceField.answer.listValue", choices);
+      this.set("multipleChoiceField.answer.value", choices);
     });
 
     await render(
-      hbs`{{cf-field/input/powerselect 
-        field=multipleChoiceField 
-        onSave=onSave 
+      hbs`{{cf-field/input/powerselect
+        field=multipleChoiceField
+        onSave=onSave
       }}`
     );
 
@@ -118,7 +118,7 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     // Select second item from dropdown .
     await click(".ember-power-select-option:nth-child(2)");
 
-    assert.deepEqual(this.multipleChoiceField.answer.listValue, [
+    assert.deepEqual(this.multipleChoiceField.answer.value, [
       "option-1",
       "option-2"
     ]);
@@ -128,23 +128,23 @@ module("Integration | Component | cf-field/input/powerselect", function(hooks) {
     assert.expect(3);
 
     this.set("onSave", choices => {
-      this.set("multipleChoiceField.answer.listValue", choices);
+      this.set("multipleChoiceField.answer.value", choices);
     });
 
     await render(
-      hbs`{{cf-field/input/powerselect 
-        field=multipleChoiceField 
-        onSave=onSave 
+      hbs`{{cf-field/input/powerselect
+        field=multipleChoiceField
+        onSave=onSave
       }}`
     );
 
-    this.set("multipleChoiceField.answer.listValue", ["option-1"]);
+    this.set("multipleChoiceField.answer.value", ["option-1"]);
 
     assert.dom(".ember-power-select-trigger").exists();
     await click(".ember-power-select-trigger");
     assert.dom(".ember-power-select-option[aria-selected='true']").exists();
     await click(".ember-power-select-option[aria-selected='true']");
 
-    assert.deepEqual(this.multipleChoiceField.answer.listValue, []);
+    assert.deepEqual(this.multipleChoiceField.answer.value, []);
   });
 });