Merge pull request #92 from mozilla-services/fixed-live-errorschema-u…

…pdates Fixed inoperent live errorSchema updates.
rjsf-team · Mar 24, 2016 · 0818fb2 · 0818fb2
2 parents 9bdf783 + 2a61046
commit 0818fb2
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -52,10 +52,14 @@ export default class Form extends Component {
   }
 
   onChange(formData, options={validate: true}) {
+    const errors = options.validate ? this.validate(formData) :
+                                      this.state.errors;
+    const errorSchema = toErrorSchema(errors);
     this.setState({
       status: "editing",
       formData,
-      errors: options.validate ? this.validate(formData) : this.state.errors
+      errors,
+      errorSchema
     }, _ => {
       if (this.props.onChange) {
         this.props.onChange(this.state);
@@ -68,7 +72,8 @@ export default class Form extends Component {
     this.setState({status: "submitted"});
     const errors = this.validate(this.state.formData);
     if (Object.keys(errors).length > 0) {
-      this.setState({errors}, _ => {
+      const errorSchema = toErrorSchema(errors);
+      this.setState({errors, errorSchema}, _ => {
         if (this.props.onError) {
           this.props.onError(errors);
         } else {

diff --git a/test/Form_test.js b/test/Form_test.js
@@ -495,6 +495,59 @@ describe("Form", () => {
   });
 
   describe("Error contextualization", () => {
+    describe("on form state updated", () => {
+      const schema = {
+        type: "string",
+        minLength: 8
+      };
+
+      it("should update the errorSchema when the formData changes", () => {
+        const {comp, node} = createFormComponent({schema});
+
+        Simulate.change(node.querySelector("input[type=text]"), {
+          target: {value: "short"}
+        });
+
+        expect(comp.state.errorSchema).eql({
+          errors: ["does not meet minimum length of 8"]
+        });
+      });
+
+      it("should denote the new error in the field", () => {
+        const {node} = createFormComponent({schema});
+
+        Simulate.change(node.querySelector("input[type=text]"), {
+          target: {value: "short"}
+        });
+
+        expect(node.querySelectorAll(".field-error"))
+          .to.have.length.of(1);
+        expect(node.querySelector(".field-string .error-detail").textContent)
+          .eql("does not meet minimum length of 8");
+      });
+    });
+
+    describe("on form submitted", () => {
+      const schema = {
+        type: "string",
+        minLength: 8
+      };
+
+      it("should update the errorSchema on form submission", () => {
+        const {comp, node} = createFormComponent({schema});
+
+        Simulate.change(node.querySelector("input[type=text]"), {
+          target: {value: "short"}
+        });
+
+        Simulate.submit(node);
+
+        expect(comp.state.errorSchema).eql({
+          errors: ["does not meet minimum length of 8"]
+        });
+      });
+    });
+
     describe("root level", () => {
       const schema = {
         type: "string",