Skip to content

Commit

Permalink
Fixes #130: Live validation not fully disabled by default. (#138)
Browse files Browse the repository at this point in the history
  • Loading branch information
@n1k0
n1k0 committed Apr 13, 2016
1 parent 9e0aca5 commit d728909
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 47 deletions.
1 change: 1 addition & 0 deletions playground/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@ class App extends Component {
<div className="col-sm-5">
{!this.state.form ? null :
<Form
liveValidate
schema={schema}
uiSchema={uiSchema}
formData={formData}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@ export default class Form extends Component {
const schema = "schema" in props ? props.schema : this.props.schema;
const uiSchema = "uiSchema" in props ? props.uiSchema : this.props.uiSchema;
const edit = !!props.formData;
const liveValidate = this.props.liveValidate || props.liveValidate;
const {definitions} = schema;
const formData = getDefaultFormState(schema, props.formData, definitions);
const errors = edit ? this.validate(formData, schema) : [];
const errors = edit && liveValidate ? this.validate(formData, schema) : [];
const errorSchema = toErrorSchema(errors);
const idSchema = toIdSchema(schema, uiSchema["ui:rootFieldId"], definitions);
return {status: "initial", formData, edit, errors, errorSchema, idSchema};
Expand Down
113 changes: 67 additions & 46 deletions test/Form_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,17 +436,21 @@ describe("Form", () => {

describe("External formData updates", () => {
describe("root level", () => {
const formProps = {
schema: {type: "string"},
liveValidate: true,
};

it("should update form state from new formData prop value", () => {
const schema = {type: "string"};
const {comp} = createFormComponent({schema});
const {comp} = createFormComponent(formProps);

comp.componentWillReceiveProps({formData: "yo"});

expect(comp.state.formData).eql("yo");
});

it("should validate formData when the schema is updated", () => {
const {comp} = createFormComponent({schema: {type: "string"}});
const {comp} = createFormComponent(formProps);

comp.componentWillReceiveProps({formData: "yo", schema: {type: "number"}});

Expand All @@ -458,15 +462,16 @@ describe("Form", () => {

describe("object level", () => {
it("should update form state from new formData prop value", () => {
const schema = {
type: "object",
properties: {
foo: {
type: "string"
const {comp} = createFormComponent({
schema: {
type: "object",
properties: {
foo: {
type: "string"
}
}
}
};
const {comp} = createFormComponent({schema});
});

comp.componentWillReceiveProps({formData: {foo: "yo"}});

Expand Down Expand Up @@ -571,21 +576,25 @@ describe("Form", () => {
});

describe("root level", () => {
const schema = {
type: "string",
minLength: 8
const formProps = {
liveValidate: true,
schema: {
type: "string",
minLength: 8
},
formData: "short"
};

it("should reflect the contextualized error in state", () => {
const {comp} = createFormComponent({schema, formData: "short"});
const {comp} = createFormComponent(formProps);

expect(comp.state.errorSchema).eql({
errors: ["does not meet minimum length of 8"]
});
});

it("should denote the error in the field", () => {
const {node} = createFormComponent({schema, formData: "short"});
const {node} = createFormComponent(formProps);

expect(node.querySelectorAll(".field-error"))
.to.have.length.of(1);
Expand All @@ -595,14 +604,18 @@ describe("Form", () => {
});

describe("root level with multiple errors", () => {
const schema = {
type: "string",
minLength: 8,
pattern: "\d+"
const formProps = {
liveValidate: true,
schema: {
type: "string",
minLength: 8,
pattern: "\d+",
},
formData: "short"
};

it("should reflect the contextualized error in state", () => {
const {comp} = createFormComponent({schema, formData: "short"});
const {comp} = createFormComponent(formProps);
expect(comp.state.errorSchema).eql({
errors: [
"does not meet minimum length of 8",
Expand All @@ -612,7 +625,7 @@ describe("Form", () => {
});

it("should denote the error in the field", () => {
const {node} = createFormComponent({schema, formData: "short"});
const {node} = createFormComponent(formProps);

const liNodes = node.querySelectorAll(".field-string .error-detail li");
const errors = [].map.call(liNodes, li => li.textContent);
Expand Down Expand Up @@ -640,12 +653,18 @@ describe("Form", () => {
}
};

it("should reflect the contextualized error in state", () => {
const {comp} = createFormComponent({schema, formData: {
const formProps = {
schema,
liveValidate: true,
formData: {
level1: {
level2: "short"
}
}});
}
};

it("should reflect the contextualized error in state", () => {
const {comp} = createFormComponent(formProps);

expect(comp.state.errorSchema).eql({
level1: {
Expand All @@ -657,11 +676,7 @@ describe("Form", () => {
});

it("should denote the error in the field", () => {
const {node} = createFormComponent({schema, formData: {
level1: {
level2: "short"
}
}});
const {node} = createFormComponent(formProps);
const errorDetail = node.querySelector(
".field-object .field-string .error-detail");

Expand All @@ -681,10 +696,14 @@ describe("Form", () => {
}
};

const formProps = {
schema,
liveValidate: true,
formData: ["good", "bad", "good"]
};

it("should contextualize the error for array indices", () => {
const {comp} = createFormComponent({schema, formData: [
"good", "bad", "good"
]});
const {comp} = createFormComponent(formProps);

expect(comp.state.errorSchema)
.eql({
Expand All @@ -693,9 +712,7 @@ describe("Form", () => {
});

it("should denote the error in the item field in error", () => {
const {node} = createFormComponent({schema, formData: [
"good", "bad", "good"
]});
const {node} = createFormComponent(formProps);
const fieldNodes = node.querySelectorAll(".field-string");

const liNodes = fieldNodes[1]
Expand All @@ -708,9 +725,7 @@ describe("Form", () => {
});

it("should not denote errors on non impacted fields", () => {
const {node} = createFormComponent({schema, formData: [
"good", "bad", "good"
]});
const {node} = createFormComponent(formProps);
const fieldNodes = node.querySelectorAll(".field-string");

expect(fieldNodes[0].classList.contains("field-error")).eql(false);
Expand All @@ -732,8 +747,10 @@ describe("Form", () => {
}
};

const formProps = {schema, liveValidate: true};

it("should contextualize the error for nested array indices", () => {
const {comp} = createFormComponent({schema, formData: {
const {comp} = createFormComponent({...formProps, formData: {
level1: ["good", "bad", "good", "bad"]
}});

Expand All @@ -746,7 +763,7 @@ describe("Form", () => {
});

it("should denote the error in the nested item field in error", () => {
const {node} = createFormComponent({schema, formData: {
const {node} = createFormComponent({...formProps, formData: {
level1: ["good", "bad", "good"]
}});

Expand All @@ -772,10 +789,16 @@ describe("Form", () => {
}
};

it("should contextualize the error for array nested items", () => {
const {comp} = createFormComponent({schema, formData: [
const formProps = {
schema,
liveValidate: true,
formData: [
{foo: "good"}, {foo: "bad"}, {foo: "good"}
]});
]
};

it("should contextualize the error for array nested items", () => {
const {comp} = createFormComponent(formProps);

expect(comp.state.errorSchema).eql({
1: {
Expand All @@ -787,9 +810,7 @@ describe("Form", () => {
});

it("should denote the error in the array nested item", () => {
const {node} = createFormComponent({schema, formData: [
{foo: "good"}, {foo: "bad"}, {foo: "good"}
]});
const {node} = createFormComponent(formProps);
const fieldNodes = node.querySelectorAll(".field-string");

const liNodes = fieldNodes[1]
Expand Down

0 comments on commit d728909

Please sign in to comment.