Add checkbox field type

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

addon/gql/fragments/field-question.graphql

@@ -26,4 +26,14 @@ fragment FieldQuestion on Question {
       }
     }
   }
+  ... on CheckboxQuestion {
+    checkboxOptions: options {
+      edges {
+        node {
+          slug
+          label
+        }
+      }
+    }
+  }
 }

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)}}<br>{{/if}}
+    <label>
+      <input
+        class="uk-checkbox uk-margin-small-right"
+        type="checkbox"
+        name={{field.id}}
+        value={{option.slug}}
+        checked={{contains option.slug field.answer.listValue}}
+      >
+      {{option.label}}
+    </label>
+  {{/let}}
+{{/each}}
+

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

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

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

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

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

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