Fixed fialing test.

Author: n1k0

src/components/widgets/CheckboxesWidget.js

@@ -4,7 +4,7 @@ import React, { PropTypes } from "react";
 function selectValue(value, selected, all) {
   const at = all.indexOf(value);
   const updated = selected.slice(0, at).concat(value, selected.slice(at));
-  // As inserting values at predefined index positions doesn't work we empty
+  // As inserting values at predefined index positions doesn't work with empty
   // arrays, we need to reorder the updated selection to match the initial order
   return updated.sort((a, b) => {
     const ai = all.findIndex(x => x === a);
@@ -20,14 +20,14 @@ function deselectValue(value, selected) {
 function CheckboxesWidget(props) {
   const {id, disabled, options, value, onChange} = props;
   return (
-    <div id={id}>{
+    <div className="checkboxes" id={id}>{
       options.map((option, index) => {
         const checked = value.indexOf(option.value) !== -1;
         return (
           <div key={index} className="checkbox">
             <label>
               <input type="checkbox"
-                id={`${id}_${option.label}`}
+                id={`${id}_${index}`}
                 checked={checked}
                 disabled={disabled}
                 onChange={(event) => {

test/ArrayField_test.js

@@ -192,73 +192,77 @@ describe("ArrayField", () => {
       value: ["foo", "fuzz"]
     };
 
-    it("should be possible to specify a custom widget", () => {
-      const uiSchema = {
-        "ui:widget": "checkboxes"
-      };
-      const {node} = createFormComponent({schema, uiSchema});
-      d(node);
+    describe("Select multiple widget", () => {
+      it("should render a select widget", () => {
+        const {node} = createFormComponent({schema});
 
-      expect(node.querySelectorAll("select"))
-        .to.have.length.of(1);
-    });
+        expect(node.querySelectorAll("select"))
+          .to.have.length.of(1);
+      });
 
-    it("should render a select widget", () => {
-      const {node} = createFormComponent({schema});
+      it("should render a select widget with a label", () => {
+        const {node} = createFormComponent({schema});
 
-      expect(node.querySelectorAll("select"))
-        .to.have.length.of(1);
-    });
+        expect(node.querySelector(".field label").textContent)
+          .eql("My field");
+      });
 
-    it("should render a select widget with a label", () => {
-      const {node} = createFormComponent({schema});
+      it("should render a select widget with multiple attribute", () => {
+        const {node} = createFormComponent({schema});
 
-      expect(node.querySelector(".field label").textContent)
-        .eql("My field");
-    });
-
-    it("should render a select widget with multiple attribute", () => {
-      const {node} = createFormComponent({schema});
+        expect(node.querySelector(".field select").getAttribute("multiple"))
+          .not.to.be.null;
+      });
 
-      expect(node.querySelector(".field select").getAttribute("multiple"))
-        .not.to.be.null;
-    });
+      it("should render options", () => {
+        const {node} = createFormComponent({schema});
 
-    it("should render options", () => {
-      const {node} = createFormComponent({schema});
+        expect(node.querySelectorAll("select option"))
+          .to.have.length.of(3);
+      });
 
-      expect(node.querySelectorAll("select option"))
-        .to.have.length.of(3);
-    });
+      it("should handle a change event", () => {
+        const {comp, node} = createFormComponent({schema});
 
-    it("should handle a change event", () => {
-      const {comp, node} = createFormComponent({schema});
+        Simulate.change(node.querySelector(".field select"), {
+          target: {options: [
+            {selected: true, value: "foo"},
+            {selected: true, value: "bar"},
+            {selected: false, value: "fuzz"},
+          ]}
+        });
 
-      Simulate.change(node.querySelector(".field select"), {
-        target: {options: [
-          {selected: true, value: "foo"},
-          {selected: true, value: "bar"},
-          {selected: false, value: "fuzz"},
-        ]}
+        expect(comp.state.formData).eql(["foo", "bar"]);
       });
 
-      expect(comp.state.formData).eql(["foo", "bar"]);
-    });
+      it("should fill field with data", () => {
+        const {node} = createFormComponent({schema, formData: ["foo", "bar"]});
 
-    it("should fill field with data", () => {
-      const {node} = createFormComponent({schema, formData: ["foo", "bar"]});
+        const options = node.querySelectorAll(".field select option");
+        expect(options).to.have.length.of(3);
+        expect(options[0].selected).eql(true);   // foo
+        expect(options[1].selected).eql(true);   // bar
+        expect(options[2].selected).eql(false);  // fuzz
+      });
+
+      it("should render the select widget with the expected id", () => {
+        const {node} = createFormComponent({schema});
 
-      const options = node.querySelectorAll(".field select option");
-      expect(options).to.have.length.of(3);
-      expect(options[0].selected).eql(true);   // foo
-      expect(options[1].selected).eql(true);   // bar
-      expect(options[2].selected).eql(false);  // fuzz
+        expect(node.querySelector("select").id).eql("root");
+      });
     });
 
-    it("should render the select widget with the expected id", () => {
-      const {node} = createFormComponent({schema});
+    describe("CheckboxesWidget", () => {
+      const uiSchema = {
+        "ui:widget": "checkboxes"
+      };
 
-      expect(node.querySelector("select").id).eql("root");
+      it("should be possible to specify a custom widget", () => {
+        const {node} = createFormComponent({schema, uiSchema});
+
+        expect(node.querySelectorAll("[type=checkbox]"))
+          .to.have.length.of(3);
+      });
     });
   });