Feature/props in formstore state (#3)

* Added Props to FieldState.

* Added props form store tests.

* Updated tests (BaseField and FormStore).

* Fixed field contracts.

* Grammar.

* Fixed test form-store.

Author: Martynas Žilinskas

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

@@ -7,6 +7,8 @@ import { FormStoresHandlerClass, FSHContainer } from "../../src/stores/form-stor
 import { FormStore } from "../../src/stores/form-store";
 import { BasicForm } from "../basic-components/basic-form";
 import { BasicField } from "../basic-components/basic-field";
+import { FormChildContext } from "../../src/contracts/form";
+import { MyFieldProps } from "../basic-components/basic-field";
 
 describe("Field Base", () => {
     beforeEach(() => {
@@ -205,4 +207,56 @@ describe("Field Base", () => {
         // Value should be updated
         expect(input.props().value).toEqual(newValue);
     });
+
+    it("registers and passes props", () => {
+        const fieldName = "fieldName";
+        const formId = "form-id";
+        const fieldProps: MyFieldProps = {
+            name: fieldName,
+            value: "initialValue"
+        };
+
+        mount(<BasicForm formId={formId}>
+            <BasicField {...fieldProps} />
+        </BasicForm>);
+        const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
+
+        expect((formStore.GetField(fieldName).Props as MyFieldProps).value).toBe(fieldProps.value);
+    });
+
+    it("updates props when componentWillReceiveProps is called", () => {
+        const formId = "FORM-ID";
+        const fieldId = "field";
+        const fieldProps: MyFieldProps = {
+            name: "field",
+            value: "initialValue"
+        };
+        const fieldPropsNext: MyFieldProps = {
+            name: fieldProps.name,
+            value: "Updated value"
+        };
+
+        // Set spies on methods
+        spy(FormStore.prototype, "UpdateProps");
+        spy(BasicField.prototype, "componentWillReceiveProps");
+
+        // Render form to create FormStore
+        shallow(<BasicForm formId={formId}></BasicForm>);
+
+        const formStore = FSHContainer.FormStoresHandler.GetStore(formId);
+
+        // Mount with formId as a context
+        const field = mount<MyFieldProps>(<BasicField {...fieldProps} />, {
+            context: {
+                FormId: formId
+            } as FormChildContext
+        });
+
+        // Update BasicField props
+        field.setProps(fieldPropsNext);
+
+        expect((FormStore.prototype.UpdateProps as any).callCount).toEqual(1);
+        expect((BasicField.prototype.componentWillReceiveProps as any).callCount).toEqual(1);
+        expect((formStore.GetField(fieldId).Props as MyFieldProps).value).toBe(fieldPropsNext.value);
+    });
 });

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

@@ -3,7 +3,10 @@ import * as React from "react";
 import { BaseField, BaseFieldState } from "../../src/abstractions/base-field";
 import { FieldProps, FieldValue } from "../../src/contracts/field";
 
-export interface MyFieldProps extends FieldProps { }
+export interface MyFieldProps extends FieldProps {
+    value?: string;
+    randomKey?: string;
+}
 
 export interface MyFieldState extends BaseFieldState { }
 

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

@@ -1,5 +1,11 @@
+import { recordify } from "typed-immutable-record";
+import * as Immutable from "immutable";
+
 import { FormStore } from "../../src/stores/form-store";
 import { FormError } from "../../src/contracts/error";
+import { FieldStatePropsRecord, FieldStateProps } from "../../src/contracts/field";
+
+import { MyFieldProps } from "../basic-components/basic-field";
 
 describe("Form store", () => {
     it("returns state", () => {
@@ -150,4 +156,46 @@ describe("Form store", () => {
             done.fail(error);
         }
     });
+
+    it("registers field with props", () => {
+        const formId = "FORM-ID";
+        const fieldId = "FIELD-ID";
+        const fieldProps: MyFieldProps = {
+            name: "fieldName",
+            value: "initial-value",
+            randomKey: "random value"
+        };
+        const formStore = new FormStore(formId);
+
+        formStore.RegisterField(fieldId, fieldProps.value, fieldProps);
+
+        const fieldPropsRecord = recordify<FieldStateProps, FieldStatePropsRecord>(fieldProps);
+
+        // Deep-check the updated props
+        expect(Immutable.is(formStore.GetField(fieldId).Props, fieldPropsRecord)).toBe(true);
+    });
+
+    it("updates field props", () => {
+        const formId = "FORM-ID";
+        const fieldId = "FIELD-ID";
+        const fieldProps: MyFieldProps = {
+            name: "field-name",
+            value: "initialValue",
+            randomKey: "random value"
+        };
+
+        // Changed value and removed randomKey prop
+        const fieldPropsNext: MyFieldProps = {
+            name: fieldProps.name,
+            value: "Updated value"
+        };
+        const fieldPropsNextRecord = recordify<FieldStateProps, FieldStatePropsRecord>(fieldPropsNext);
+        const formStore = new FormStore(formId);
+
+        formStore.RegisterField(fieldId, fieldProps.value, fieldProps);
+        formStore.UpdateProps(fieldId, fieldPropsNext);
+
+        // Deep-check the updated props
+        expect(Immutable.is(formStore.GetField(fieldId).Props, fieldPropsNextRecord)).toBe(true);
+    });
 });

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

@@ -97,7 +97,7 @@ describe("Form stores handler", () => {
         expect(callbackSpy.called).toBe(true);
     });
 
-    fit("emits unregister action when unregistering a form", () => {
+    it("emits unregister action when unregistering a form", () => {
         const storesHandler = new FormStoresHandlerClass();
         const formId = "form-id";
         const callbackSpy = sinon.spy();

packages/simplr-forms-core/src/abstractions/base-field.ts

@@ -83,8 +83,6 @@ export abstract class BaseField<TProps extends FieldProps, TState extends BaseFi
                 FormStoreActions.StateUpdated,
                 this.OnStoreUpdated.bind(this));
         this.registerFieldInFormStore();
-
-        // TODO: Set validators
     }
 
     componentWillReceiveProps(nextProps: FieldProps) {
@@ -93,7 +91,7 @@ export abstract class BaseField<TProps extends FieldProps, TState extends BaseFi
             throw new Error(`simplr-forms-core: Field name must be constant`);
         }
 
-        // TODO: Update validators
+        this.FormStore.UpdateProps(this.FieldId, nextProps);
     }
 
     componentWillUnmount() {
@@ -273,6 +271,11 @@ export abstract class BaseField<TProps extends FieldProps, TState extends BaseFi
         }
 
         const initialValue = this.RawInitialValue;
-        this.FormStore.RegisterField(this.FieldId, initialValue, this.FieldsGroupId);
+        this.FormStore.RegisterField(
+            this.FieldId,
+            initialValue,
+            this.props,
+            this.FieldsGroupId
+        );
     }
 }

packages/simplr-forms-core/src/actions/form-store-actions.ts

@@ -7,3 +7,11 @@ export class ValueChanged {
         return this.fieldId;
     }
 }
+
+export class PropsChanged {
+    constructor(private fieldId: string) { }
+
+    public get FieldId() {
+        return this.fieldId;
+    }
+}

packages/simplr-forms-core/src/contracts/field.ts

@@ -17,7 +17,6 @@ export interface FieldProps {
     validationType?: FieldValidationType;
     onBlur?: (event: any) => void;
     onFocus?: (event: any) => void;
-    children?: React.ReactNode;
 }
 
 export interface FieldState {
@@ -30,9 +29,13 @@ export interface FieldState {
     FieldsGroup?: {
         Id: string;
     };
+    Props?: FieldStatePropsRecord;
 }
 
+export type FieldStateProps = FieldProps & React.Props<any>;
+
 export interface FieldStateRecord extends TypedRecord<FieldStateRecord>, FieldState { }
+export interface FieldStatePropsRecord extends TypedRecord<FieldStatePropsRecord>, FieldStateProps { }
 export interface FormErrorRecord extends TypedRecord<FormErrorRecord>, FormError { }
 
 export enum FieldValidationType {

packages/simplr-forms-core/src/stores/form-store.ts

@@ -7,7 +7,10 @@ import {
     FieldState,
     FieldValue,
     FieldStateRecord,
-    FormErrorRecord
+    FormErrorRecord,
+    FieldProps,
+    FieldStatePropsRecord,
+    FieldStateProps
 } from "../contracts/field";
 import { FormState, FormStateRecord } from "../contracts/form";
 import { FormStoreState, FormStoreStateRecord } from "../contracts/form-store";
@@ -64,13 +67,18 @@ export class FormStore extends ActionEmitter {
     public RegisterField(
         fieldId: string,
         initialValue: FieldValue,
+        props?: FieldProps,
         fieldsGroupId?: string
     ) {
         // Construct field state
         let fieldState = this.GetInitialFieldState();
         fieldState.InitialValue = initialValue;
         fieldState.Value = initialValue;
 
+        if (props != null) {
+            fieldState.Props = recordify<FieldStateProps, FieldStatePropsRecord>(props);
+        }
+
         if (fieldsGroupId != null) {
             fieldState.FieldsGroup = {
                 Id: fieldsGroupId
@@ -98,6 +106,24 @@ export class FormStore extends ActionEmitter {
         return this.State.Fields.get(fieldId);
     }
 
+    public UpdateProps(fieldId: string, props: FieldProps) {
+        const propsRecord = recordify<FieldStateProps, FieldStatePropsRecord>(props);
+        const fieldState = this.State.Fields.get(fieldId);
+
+        if (fieldState.Props == null || fieldState.Props.equals(propsRecord)) {
+            return;
+        }
+
+        this.State = this.State.withMutations(state => {
+            const fieldState = state.Fields.get(fieldId);
+            state.Fields = state.Fields.set(fieldId, fieldState.merge({
+                Props: recordify<FieldStateProps, FieldStatePropsRecord>(props)
+            } as FieldState));
+        });
+
+        this.emit(new Actions.PropsChanged(fieldId));
+    }
+
     public ValueChanged(fieldId: string, newValue: FieldValue) {
         this.emit(new Actions.ValueChanged(fieldId));
 
@@ -174,7 +200,8 @@ export class FormStore extends ActionEmitter {
             Pristine: true,
             Validating: false,
             Error: undefined,
-            FieldsGroup: undefined
+            FieldsGroup: undefined,
+            Props: undefined
         };
     }
 }