Skip to content

Commit f28c269

Browse files
DovydasNavickasDovydasNavickas
authored
Merge pull request #33 from SimplrJS/feature/disable
Disable, Touched and Props diffing
2 parents 9a1147d + 28c4c52 commit f28c269

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1102
-370
lines changed

‎packages/simplr-forms-core/__tests__/abstractions/base-field.test.tsx

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react";
22
import * as ReactDOM from "react-dom";
33
import { shallow, mount } from "enzyme";
4-
import { spy } from "sinon";
4+
import * as Sinon from "sinon";
55

66
import { FormStoresHandler, FSHContainer } from "../../src/stores/form-stores-handler";
77
import { FormStore } from "../../src/stores/form-store";
@@ -10,10 +10,17 @@ import { MyTestField, MyFieldProps } from "../test-components/test-field";
1010
import { FormChildContext } from "../../src/contracts/form";
1111

1212
describe("Field Base", () => {
13+
let sandbox: Sinon.SinonSandbox;
14+
1315
beforeEach(() => {
16+
sandbox = Sinon.sandbox.create();
1417
FSHContainer.SetFormStoresHandler(new FormStoresHandler(), true);
1518
});
1619

20+
afterEach(function () {
21+
sandbox.restore();
22+
});
23+
1724
it("works", () => {
1825
expect(true).toBe(true);
1926
});
@@ -164,15 +171,15 @@ describe("Field Base", () => {
164171
const newValue = "NEW_VALUE";
165172
const formId = "FORM_ID";
166173

167-
spy(FormStore.prototype, "ValueChanged");
174+
sandbox.spy(FormStore.prototype, "UpdateFieldValue");
168175

169176
const fieldName = "fieldName";
170177
const form = mount(<MyTestForm formId={formId}>
171178
<MyTestField name={fieldName}></MyTestField>
172179
</MyTestForm>);
173180
const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
174181

175-
expect((FormStore.prototype.ValueChanged as any).callCount).toEqual(0);
182+
expect((FormStore.prototype.UpdateFieldValue as any).callCount).toEqual(0);
176183

177184
const input = form.find("input");
178185

@@ -182,7 +189,7 @@ describe("Field Base", () => {
182189
// Simulate value change
183190
input.simulate("change", { target: { value: newValue } });
184191

185-
expect((FormStore.prototype.ValueChanged as any).callCount).toEqual(1);
192+
expect((FormStore.prototype.UpdateFieldValue as any).callCount).toEqual(1);
186193
// Check if it really changed value in form store
187194
expect(formStore.GetField(fieldName).Value).toBe(newValue);
188195
});
@@ -236,8 +243,46 @@ describe("Field Base", () => {
236243
};
237244

238245
// Set spies on methods
239-
spy(FormStore.prototype, "UpdateProps");
240-
spy(MyTestField.prototype, "componentWillReceiveProps");
246+
sandbox.spy(FormStore.prototype, "UpdateFieldProps");
247+
sandbox.spy(MyTestField.prototype, "componentWillReceiveProps");
248+
249+
// Render form to create FormStore
250+
shallow(<MyTestForm formId={formId}></MyTestForm>);
251+
252+
const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
253+
254+
// Mount with formId as a context
255+
const field = mount<MyFieldProps>(<MyTestField {...fieldProps} />, {
256+
context: {
257+
FormId: formId
258+
} as FormChildContext
259+
});
260+
261+
// Update MyTestField props
262+
field.setProps(fieldPropsNext);
263+
264+
expect((FormStore.prototype.UpdateFieldProps as any).callCount).toEqual(1);
265+
expect((MyTestField.prototype.componentWillReceiveProps as any).callCount).toEqual(1);
266+
expect((formStore.GetField(fieldId).Props as MyFieldProps).value).toBe(fieldPropsNext.value);
267+
});
268+
269+
it("updates props when componentWillReceiveProps is called with multi-level object", () => {
270+
const formId = "FORM-ID";
271+
const fieldId = "field";
272+
const fieldProps: MyFieldProps = {
273+
name: "field",
274+
value: "initialValue",
275+
deepObject: { value: "1" }
276+
};
277+
const fieldPropsNext: MyFieldProps = {
278+
name: fieldProps.name,
279+
value: "Updated value",
280+
deepObject: { value: "2" }
281+
};
282+
283+
// Set spies on methods
284+
sandbox.spy(FormStore.prototype, "UpdateFieldProps");
285+
sandbox.spy(MyTestField.prototype, "componentWillReceiveProps");
241286

242287
// Render form to create FormStore
243288
shallow(<MyTestForm formId={formId}></MyTestForm>);
@@ -254,7 +299,7 @@ describe("Field Base", () => {
254299
// Update MyTestField props
255300
field.setProps(fieldPropsNext);
256301

257-
expect((FormStore.prototype.UpdateProps as any).callCount).toEqual(1);
302+
expect((FormStore.prototype.UpdateFieldProps as any).callCount).toEqual(1);
258303
expect((MyTestField.prototype.componentWillReceiveProps as any).callCount).toEqual(1);
259304
expect((formStore.GetField(fieldId).Props as MyFieldProps).value).toBe(fieldPropsNext.value);
260305
});

‎packages/simplr-forms-core/__tests__/stores/form-store.test.ts

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ describe("Form store", () => {
8585
formStore.RegisterField(fieldId, undefined, undefined, value);
8686
expect(formStore.GetField(fieldId).Value).toBe(value);
8787

88-
formStore.ValueChanged(fieldId, nextValue);
88+
formStore.UpdateFieldValue(fieldId, nextValue);
8989
expect(formStore.GetField(fieldId).Value).toBe(nextValue);
9090
});
9191

@@ -99,7 +99,7 @@ describe("Form store", () => {
9999
}, 50);
100100
});
101101

102-
formStore.Validate(fieldId, validationPromise);
102+
formStore.ValidateField(fieldId, validationPromise);
103103
try {
104104
expect(formStore.GetField(fieldId).Validating).toBe(true);
105105
} catch (error) {
@@ -126,7 +126,7 @@ describe("Form store", () => {
126126
}, 50);
127127
});
128128

129-
formStore.Validate(fieldId, validationPromise);
129+
formStore.ValidateField(fieldId, validationPromise);
130130
try {
131131
expect(formStore.GetField(fieldId).Validating).toBe(true);
132132
} catch (error) {
@@ -166,10 +166,10 @@ describe("Form store", () => {
166166
}, 50);
167167
});
168168

169-
formStore.Validate(fieldId, validationPromise);
169+
formStore.ValidateField(fieldId, validationPromise);
170170

171171
// Imitate removal of last letter
172-
formStore.ValueChanged(fieldId, value.slice(0, value.length - 1));
172+
formStore.UpdateFieldValue(fieldId, value.slice(0, value.length - 1));
173173

174174
try {
175175
expect(formStore.GetField(fieldId).Validating).toBe(true);
@@ -224,7 +224,7 @@ describe("Form store", () => {
224224
const fieldPropsNextRecord = recordify<FieldStateProps, FieldStatePropsRecord>(fieldPropsNext);
225225

226226
formStore.RegisterField(fieldId, undefined, undefined, undefined, fieldProps);
227-
formStore.UpdateProps(fieldId, fieldPropsNext);
227+
formStore.UpdateFieldProps(fieldId, fieldPropsNext);
228228

229229
// Deep-check the updated props
230230
expect(Immutable.is(formStore.GetField(fieldId).Props, fieldPropsNextRecord)).toBe(true);
@@ -298,7 +298,7 @@ describe("Form store", () => {
298298

299299
for (const fieldId of fieldsIds) {
300300
formStore.RegisterField(fieldId, undefined, fieldProps.initialValue, fieldProps.value, fieldProps);
301-
formStore.ValueChanged(fieldId, nextValue);
301+
formStore.UpdateFieldValue(fieldId, nextValue);
302302
}
303303
formStore.ResetFields();
304304

@@ -324,7 +324,7 @@ describe("Form store", () => {
324324

325325
for (const fieldId of fieldsIds) {
326326
formStore.RegisterField(fieldId, undefined, undefined, fieldProps.value, fieldProps);
327-
formStore.ValueChanged(fieldId, nextValue);
327+
formStore.UpdateFieldValue(fieldId, nextValue);
328328
}
329329
formStore.ResetFields([fieldToResetId]);
330330

@@ -337,4 +337,65 @@ describe("Form store", () => {
337337
}
338338
}
339339
});
340+
341+
describe("state properties", () => {
342+
it("pristine false after field value changed", () => {
343+
const fieldId = "field id";
344+
345+
formStore.RegisterField(fieldId, "");
346+
expect(formStore.GetState().Pristine).toBe(true);
347+
348+
formStore.UpdateFieldValue(fieldId, "next value");
349+
expect(formStore.GetState().Pristine).toBe(false);
350+
});
351+
352+
it("touched true after field value changed", () => {
353+
const fieldId = "field id";
354+
355+
formStore.RegisterField(fieldId, "");
356+
expect(formStore.GetState().Touched).toBe(false);
357+
358+
formStore.UpdateFieldValue(fieldId, "next value");
359+
expect(formStore.GetState().Touched).toBe(true);
360+
});
361+
362+
it("touched false after value updated to identical one", () => {
363+
const fieldId = "field id";
364+
365+
formStore.RegisterField(fieldId, "");
366+
expect(formStore.GetState().Touched).toBe(false);
367+
368+
formStore.UpdateFieldValue(fieldId, "");
369+
expect(formStore.GetState().Touched).toBe(false);
370+
});
371+
372+
it("error true is after field error ", async done => {
373+
const fieldId = "field id";
374+
try {
375+
formStore.RegisterField(fieldId, "");
376+
expect(formStore.GetState().HasError).toBe(false);
377+
378+
await formStore.ValidateField(fieldId, new Promise<void>((resolve, reject) => {
379+
reject("error message");
380+
}));
381+
expect(formStore.GetState().HasError).toBe(true);
382+
} catch (error) {
383+
done.fail(error);
384+
}
385+
386+
done();
387+
});
388+
389+
it("validating true after field error ", () => {
390+
const fieldId = "field id";
391+
formStore.RegisterField(fieldId, "");
392+
expect(formStore.GetState().Validating).toBe(false);
393+
394+
formStore.ValidateField(fieldId, new Promise<void>((resolve, reject) => {
395+
reject("error message");
396+
}));
397+
398+
expect(formStore.GetState().Validating).toBe(true);
399+
});
400+
});
340401
});

‎packages/simplr-forms-core/__tests__/test-components/test-field.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface MyFieldProps extends FieldProps {
88
initialValue?: string;
99
value?: string;
1010
randomKey?: string;
11+
deepObject?: any;
1112
}
1213

1314
export interface MyFieldState extends BaseFieldState { }

0 commit comments

Comments
 (0)