diff --git a/addon/components/cf-field/input/checkbox.js b/addon/components/cf-field/input/checkbox.js new file mode 100644 index 0000000..88a15fe --- /dev/null +++ b/addon/components/cf-field/input/checkbox.js @@ -0,0 +1,12 @@ +import Component from "@ember/component"; +import layout from "../../../templates/components/cf-field/input/checkbox"; + +/** + * Input component for the checkbox question type + * + * @class CfFieldInputCheckboxComponent + */ +export default Component.extend({ + layout, + tagName: "" +}); diff --git a/addon/gql/fragments/field-question.graphql b/addon/gql/fragments/field-question.graphql index 4410caa..7b8dee3 100644 --- a/addon/gql/fragments/field-question.graphql +++ b/addon/gql/fragments/field-question.graphql @@ -26,4 +26,14 @@ fragment FieldQuestion on Question { } } } + ... on CheckboxQuestion { + checkboxOptions: options { + edges { + node { + slug + label + } + } + } + } } diff --git a/addon/templates/components/cf-field/input/checkbox.hbs b/addon/templates/components/cf-field/input/checkbox.hbs new file mode 100644 index 0000000..0cdf1fc --- /dev/null +++ b/addon/templates/components/cf-field/input/checkbox.hbs @@ -0,0 +1,16 @@ +{{#each field.question.checkboxOptions.edges as |optionEdge i|}} + {{#let optionEdge.node as |option|}} + {{#if (gt i 0)}}
{{/if}} + + {{/let}} +{{/each}} + diff --git a/app/components/cf-field/input/checkbox.js b/app/components/cf-field/input/checkbox.js new file mode 100644 index 0000000..acd7ed9 --- /dev/null +++ b/app/components/cf-field/input/checkbox.js @@ -0,0 +1 @@ +export { default } from "ember-caluma-form/components/cf-field/input/checkbox"; diff --git a/tests/dummy/mirage/scenarios/default.js b/tests/dummy/mirage/scenarios/default.js index 42c8693..1e7ba69 100644 --- a/tests/dummy/mirage/scenarios/default.js +++ b/tests/dummy/mirage/scenarios/default.js @@ -6,7 +6,8 @@ export default function(server) { 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: "RADIO" }) + server.create("question", { formIds: [form.id], type: "RADIO" }), + server.create("question", { formIds: [form.id], type: "CHECKBOX" }) ]; 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 8acd1c0..7ef8a84 100644 --- a/tests/integration/components/cf-field/input-test.js +++ b/tests/integration/components/cf-field/input-test.js @@ -110,4 +110,29 @@ module("Integration | Component | cf-field/input", function(hooks) { assert.dom(".uk-form-controls").exists(); assert.dom("input[type=radio][value='option-1']").isChecked(); }); + + test("it renders a checkbox field", async function(assert) { + assert.expect(2); + + await render(hbs` + {{cf-field/input + field=(hash + question=(hash + checkboxOptions=(hash + edges=(array + (hash node=(hash slug="option-1")) + ) + ) + __typename="CheckboxQuestion" + ) + answer=(hash + listValue=(array "option-1") + ) + ) + }} + `); + + assert.dom(".uk-form-controls").exists(); + assert.dom("input[type=checkbox][value='option-1']").isChecked(); + }); }); diff --git a/tests/integration/components/cf-field/input/checkbox-test.js b/tests/integration/components/cf-field/input/checkbox-test.js new file mode 100644 index 0000000..c5aea10 --- /dev/null +++ b/tests/integration/components/cf-field/input/checkbox-test.js @@ -0,0 +1,54 @@ +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/checkbox", function(hooks) { + setupRenderingTest(hooks); + + test("it renders", async function(assert) { + assert.expect(12); + + await render(hbs` + {{cf-field/input/checkbox + field=(hash + id="test" + answer=(hash + listValue=(array "option-1" "option-2") + ) + question=(hash + checkboxOptions=(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=checkbox]").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=checkbox]") + .hasValue("option-1"); + assert + .dom("label:nth-of-type(2) input[type=checkbox]") + .hasValue("option-2"); + assert + .dom("label:nth-of-type(3) input[type=checkbox]") + .hasValue("option-3"); + + assert.dom("label:nth-of-type(1) input[type=checkbox]").isChecked(); + assert.dom("label:nth-of-type(2) input[type=checkbox]").isChecked(); + }); +}); diff --git a/tests/integration/components/cf-form-test.js b/tests/integration/components/cf-form-test.js index a5aead0..c3bb63d 100644 --- a/tests/integration/components/cf-form-test.js +++ b/tests/integration/components/cf-form-test.js @@ -16,7 +16,8 @@ module("Integration | Component | cf-form", function(hooks) { 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: "RADIO" }) + this.server.create("question", { formIds: [form.id], type: "RADIO" }), + this.server.create("question", { formIds: [form.id], type: "CHECKBOX" }) ]; const document = this.server.create("document", { formId: form.id }); @@ -33,8 +34,6 @@ module("Integration | Component | cf-form", function(hooks) { }); test("it renders", async function(assert) { - assert.expect(this.questions.length + 1); - await render(hbs`{{cf-form documentId=document.id}}`); assert.dom("form").exists(); @@ -48,6 +47,10 @@ module("Integration | Component | cf-form", function(hooks) { if (question.type === "RADIO") { assert.dom(`[name="${id}"][value="${answer.value}"]`).isChecked(); + } else if (question.type === "CHECKBOX") { + answer.value.forEach(v => { + assert.dom(`[name="${id}"][value="${v}"]`).isChecked(); + }); } else { assert.dom(`[name="${id}"]`).hasValue(String(answer.value)); }