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)); + } }); }); });