Add radio field type

addon/components/cf-field/input/radio.js

@@ -0,0 +1,12 @@
+import Component from "@ember/component";
+import layout from "../../../templates/components/cf-field/input/radio";
+
+/**
+ * Input component for the radio question type
+ *
+ * @class CfFieldInputRadioComponent
+ */
+export default Component.extend({
+  layout,
+  tagName: ""
+});

addon/gql/fragments/field-question.graphql

@@ -16,4 +16,14 @@ fragment FieldQuestion on Question {
     floatMinValue: minValue
     floatMaxValue: maxValue
   }
+  ... on RadioQuestion {
+    radioOptions: options {
+      edges {
+        node {
+          slug
+          label
+        }
+      }
+    }
+  }
 }

addon/templates/components/cf-field/input/radio.hbs

@@ -0,0 +1,15 @@
+{{#each field.question.radioOptions.edges as |optionEdge i|}}
+  {{#let optionEdge.node as |option|}}
+    {{#if (gt i 0)}}<br>{{/if}}
+    <label>
+      <input
+        class="uk-radio uk-margin-small-right"
+        type="radio"
+        name={{field.id}}
+        value={{option.slug}}
+        checked={{eq option.slug field.answer.stringValue}}
+      >
+      {{option.label}}
+    </label>
+  {{/let}}
+{{/each}}

app/components/cf-field/input/radio.js

@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/radio";

tests/dummy/mirage/scenarios/default.js

@@ -5,7 +5,8 @@ export default function(server) {
     server.create("question", { formIds: [form.id], type: "TEXT" }),
     server.create("question", { formIds: [form.id], type: "TEXTAREA" }),
     server.create("question", { formIds: [form.id], type: "INTEGER" }),
-    server.create("question", { formIds: [form.id], type: "FLOAT" })
+    server.create("question", { formIds: [form.id], type: "FLOAT" }),
+    server.create("question", { formIds: [form.id], type: "RADIO" })
   ];
 
   const document = server.create("document", { formId: form.id });

tests/integration/components/cf-field/input-test.js

@@ -85,4 +85,29 @@ module("Integration | Component | cf-field/input", function(hooks) {
     assert.dom(".uk-form-controls").exists();
     assert.dom("input[type=number]").hasValue("0.55");
   });
+
+  test("it renders a radio field", async function(assert) {
+    assert.expect(2);
+
+    await render(hbs`
+      {{cf-field/input
+        field=(hash
+          question=(hash
+            radioOptions=(hash
+              edges=(array
+                (hash node=(hash slug="option-1"))
+              )
+            )
+            __typename="RadioQuestion"
+          )
+          answer=(hash
+            stringValue="option-1"
+          )
+        )
+      }}
+    `);
+
+    assert.dom(".uk-form-controls").exists();
+    assert.dom("input[type=radio][value='option-1']").isChecked();
+  });
 });

tests/integration/components/cf-field/input/radio-test.js

@@ -0,0 +1,47 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "ember-qunit";
+import { render } from "@ember/test-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+module("Integration | Component | cf-field/input/radio", function(hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function(assert) {
+    assert.expect(11);
+
+    await render(hbs`
+      {{cf-field/input/radio
+        field=(hash
+          id="test"
+          answer=(hash
+            stringValue="option-1"
+          )
+          question=(hash
+            radioOptions=(hash
+              edges=(array
+                (hash node=(hash slug="option-1" label="Option 1"))
+                (hash node=(hash slug="option-2" label="Option 2"))
+                (hash node=(hash slug="option-3" label="Option 3"))
+              )
+            )
+          )
+        )
+      }}
+    `);
+
+    assert.dom("input[type=radio]").exists({ count: 3 });
+    assert.dom("label").exists({ count: 3 });
+    assert.dom("br").exists({ count: 2 });
+    assert.dom("label:nth-of-type(3) + br").doesNotExist();
+
+    assert.dom("label:nth-of-type(1)").hasText("Option 1");
+    assert.dom("label:nth-of-type(2)").hasText("Option 2");
+    assert.dom("label:nth-of-type(3)").hasText("Option 3");
+
+    assert.dom("label:nth-of-type(1) input[type=radio]").hasValue("option-1");
+    assert.dom("label:nth-of-type(2) input[type=radio]").hasValue("option-2");
+    assert.dom("label:nth-of-type(3) input[type=radio]").hasValue("option-3");
+
+    assert.dom("label:nth-of-type(1) input[type=radio]").isChecked();
+  });
+});

tests/integration/components/cf-form-test.js

@@ -15,7 +15,8 @@ module("Integration | Component | cf-form", function(hooks) {
       this.server.create("question", { formIds: [form.id], type: "TEXT" }),
       this.server.create("question", { formIds: [form.id], type: "TEXTAREA" }),
       this.server.create("question", { formIds: [form.id], type: "INTEGER" }),
-      this.server.create("question", { formIds: [form.id], type: "FLOAT" })
+      this.server.create("question", { formIds: [form.id], type: "FLOAT" }),
+      this.server.create("question", { formIds: [form.id], type: "RADIO" })
     ];
 
     const document = this.server.create("document", { formId: form.id });
@@ -45,7 +46,11 @@ module("Integration | Component | cf-form", function(hooks) {
         documentId: this.document.id
       });
 
-      assert.dom(`[name="${id}"]`).hasValue(String(answer.value));
+      if (question.type === "RADIO") {
+        assert.dom(`[name="${id}"][value="${answer.value}"]`).isChecked();
+      } else {
+        assert.dom(`[name="${id}"]`).hasValue(String(answer.value));
+      }
     });
   });
 });