diff --git a/addon/components/cf-field/input/radio.js b/addon/components/cf-field/input/radio.js
new file mode 100644
index 0000000..d96e2e8
--- /dev/null
+++ b/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: ""
+});
diff --git a/addon/gql/fragments/field-question.graphql b/addon/gql/fragments/field-question.graphql
index 4a12653..4410caa 100644
--- a/addon/gql/fragments/field-question.graphql
+++ b/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
+ }
+ }
+ }
+ }
}
diff --git a/addon/templates/components/cf-field/input/radio.hbs b/addon/templates/components/cf-field/input/radio.hbs
new file mode 100644
index 0000000..9ff2c7a
--- /dev/null
+++ b/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)}}
{{/if}}
+
+ {{/let}}
+{{/each}}
diff --git a/app/components/cf-field/input/radio.js b/app/components/cf-field/input/radio.js
new file mode 100644
index 0000000..900a73a
--- /dev/null
+++ b/app/components/cf-field/input/radio.js
@@ -0,0 +1 @@
+export { default } from "ember-caluma-form/components/cf-field/input/radio";
diff --git a/tests/dummy/mirage/scenarios/default.js b/tests/dummy/mirage/scenarios/default.js
index 50ab354..42c8693 100644
--- a/tests/dummy/mirage/scenarios/default.js
+++ b/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 });
diff --git a/tests/integration/components/cf-field/input-test.js b/tests/integration/components/cf-field/input-test.js
index dd393a6..8acd1c0 100644
--- a/tests/integration/components/cf-field/input-test.js
+++ b/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();
+ });
});
diff --git a/tests/integration/components/cf-field/input/radio-test.js b/tests/integration/components/cf-field/input/radio-test.js
new file mode 100644
index 0000000..57aadae
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/tests/integration/components/cf-form-test.js b/tests/integration/components/cf-form-test.js
index 7f34c58..a5aead0 100644
--- a/tests/integration/components/cf-form-test.js
+++ b/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));
+ }
});
});
});