Props diffing algorithm updated and extracted.

Author: DovydasNavickas

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { shallow, mount } from "enzyme";
-import { spy } from "sinon";
+import * as Sinon from "sinon";
 
 import { FormStoresHandler, FSHContainer } from "../../src/stores/form-stores-handler";
 import { FormStore } from "../../src/stores/form-store";
@@ -10,10 +10,17 @@ import { MyTestField, MyFieldProps } from "../test-components/test-field";
 import { FormChildContext } from "../../src/contracts/form";
 
 describe("Field Base", () => {
+    let sandbox: Sinon.SinonSandbox;
+
     beforeEach(() => {
+        sandbox = Sinon.sandbox.create();
         FSHContainer.SetFormStoresHandler(new FormStoresHandler(), true);
     });
 
+    afterEach(function () {
+        sandbox.restore();
+    });
+
     it("works", () => {
         expect(true).toBe(true);
     });
@@ -164,15 +171,15 @@ describe("Field Base", () => {
         const newValue = "NEW_VALUE";
         const formId = "FORM_ID";
 
-        spy(FormStore.prototype, "ValueChanged");
+        sandbox.spy(FormStore.prototype, "UpdateFieldValue");
 
         const fieldName = "fieldName";
         const form = mount(<MyTestForm formId={formId}>
             <MyTestField name={fieldName}></MyTestField>
         </MyTestForm>);
         const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
 
-        expect((FormStore.prototype.ValueChanged as any).callCount).toEqual(0);
+        expect((FormStore.prototype.UpdateFieldValue as any).callCount).toEqual(0);
 
         const input = form.find("input");
 
@@ -182,7 +189,7 @@ describe("Field Base", () => {
         // Simulate value change
         input.simulate("change", { target: { value: newValue } });
 
-        expect((FormStore.prototype.ValueChanged as any).callCount).toEqual(1);
+        expect((FormStore.prototype.UpdateFieldValue as any).callCount).toEqual(1);
         // Check if it really changed value in form store
         expect(formStore.GetField(fieldName).Value).toBe(newValue);
     });
@@ -236,8 +243,46 @@ describe("Field Base", () => {
         };
 
         // Set spies on methods
-        spy(FormStore.prototype, "UpdateProps");
-        spy(MyTestField.prototype, "componentWillReceiveProps");
+        sandbox.spy(FormStore.prototype, "UpdateFieldProps");
+        sandbox.spy(MyTestField.prototype, "componentWillReceiveProps");
+
+        // Render form to create FormStore
+        shallow(<MyTestForm formId={formId}></MyTestForm>);
+
+        const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
+
+        // Mount with formId as a context
+        const field = mount<MyFieldProps>(<MyTestField {...fieldProps} />, {
+            context: {
+                FormId: formId
+            } as FormChildContext
+        });
+
+        // Update MyTestField props
+        field.setProps(fieldPropsNext);
+
+        expect((FormStore.prototype.UpdateFieldProps as any).callCount).toEqual(1);
+        expect((MyTestField.prototype.componentWillReceiveProps as any).callCount).toEqual(1);
+        expect((formStore.GetField(fieldId).Props as MyFieldProps).value).toBe(fieldPropsNext.value);
+    });
+
+    it("updates props when componentWillReceiveProps is called with multi-level object", () => {
+        const formId = "FORM-ID";
+        const fieldId = "field";
+        const fieldProps: MyFieldProps = {
+            name: "field",
+            value: "initialValue",
+            deepObject: { value: "1" }
+        };
+        const fieldPropsNext: MyFieldProps = {
+            name: fieldProps.name,
+            value: "Updated value",
+            deepObject: { value: "2" }
+        };
+
+        // Set spies on methods
+        sandbox.spy(FormStore.prototype, "UpdateFieldProps");
+        sandbox.spy(MyTestField.prototype, "componentWillReceiveProps");
 
         // Render form to create FormStore
         shallow(<MyTestForm formId={formId}></MyTestForm>);
@@ -254,7 +299,7 @@ describe("Field Base", () => {
         // Update MyTestField props
         field.setProps(fieldPropsNext);
 
-        expect((FormStore.prototype.UpdateProps as any).callCount).toEqual(1);
+        expect((FormStore.prototype.UpdateFieldProps as any).callCount).toEqual(1);
         expect((MyTestField.prototype.componentWillReceiveProps as any).callCount).toEqual(1);
         expect((formStore.GetField(fieldId).Props as MyFieldProps).value).toBe(fieldPropsNext.value);
     });

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

@@ -85,7 +85,7 @@ describe("Form store", () => {
         formStore.RegisterField(fieldId, undefined, undefined, value);
         expect(formStore.GetField(fieldId).Value).toBe(value);
 
-        formStore.ValueChanged(fieldId, nextValue);
+        formStore.UpdateFieldValue(fieldId, nextValue);
         expect(formStore.GetField(fieldId).Value).toBe(nextValue);
     });
 
@@ -99,7 +99,7 @@ describe("Form store", () => {
             }, 50);
         });
 
-        formStore.Validate(fieldId, validationPromise);
+        formStore.ValidateField(fieldId, validationPromise);
         try {
             expect(formStore.GetField(fieldId).Validating).toBe(true);
         } catch (error) {
@@ -126,7 +126,7 @@ describe("Form store", () => {
             }, 50);
         });
 
-        formStore.Validate(fieldId, validationPromise);
+        formStore.ValidateField(fieldId, validationPromise);
         try {
             expect(formStore.GetField(fieldId).Validating).toBe(true);
         } catch (error) {
@@ -166,10 +166,10 @@ describe("Form store", () => {
             }, 50);
         });
 
-        formStore.Validate(fieldId, validationPromise);
+        formStore.ValidateField(fieldId, validationPromise);
 
         // Imitate removal of last letter
-        formStore.ValueChanged(fieldId, value.slice(0, value.length - 1));
+        formStore.UpdateFieldValue(fieldId, value.slice(0, value.length - 1));
 
         try {
             expect(formStore.GetField(fieldId).Validating).toBe(true);
@@ -224,7 +224,7 @@ describe("Form store", () => {
         const fieldPropsNextRecord = recordify<FieldStateProps, FieldStatePropsRecord>(fieldPropsNext);
 
         formStore.RegisterField(fieldId, undefined, undefined, undefined, fieldProps);
-        formStore.UpdateProps(fieldId, fieldPropsNext);
+        formStore.UpdateFieldProps(fieldId, fieldPropsNext);
 
         // Deep-check the updated props
         expect(Immutable.is(formStore.GetField(fieldId).Props, fieldPropsNextRecord)).toBe(true);
@@ -298,7 +298,7 @@ describe("Form store", () => {
 
         for (const fieldId of fieldsIds) {
             formStore.RegisterField(fieldId, undefined, fieldProps.initialValue, fieldProps.value, fieldProps);
-            formStore.ValueChanged(fieldId, nextValue);
+            formStore.UpdateFieldValue(fieldId, nextValue);
         }
         formStore.ResetFields();
 
@@ -324,7 +324,7 @@ describe("Form store", () => {
 
         for (const fieldId of fieldsIds) {
             formStore.RegisterField(fieldId, undefined, undefined, fieldProps.value, fieldProps);
-            formStore.ValueChanged(fieldId, nextValue);
+            formStore.UpdateFieldValue(fieldId, nextValue);
         }
         formStore.ResetFields([fieldToResetId]);
 

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

@@ -8,6 +8,7 @@ export interface MyFieldProps extends FieldProps {
     initialValue?: string;
     value?: string;
     randomKey?: string;
+    deepObject?: any;
 }
 
 export interface MyFieldState extends BaseFieldState { }