Feature/validation (#14)

* simplr-forms-core form-store emit action after value changed.

* Added action-emitter as a dependency.   Updated form-store-subscriber test.

* Added subscriber and exposed all subscribers and subscriber in index.ts.

* Fixed name: FormStoreHandlerSubscriber to FormStoresHandlerSubscriber.

* Changed const enum -> enum. Added fieldProps FormStoreSubscriber tests with validation flag.

* Fixed tests. Added validateField function.

* Added action field registration.

* Added OnRegistered listener for validation.

* Update add listeners test.

* Renamed from SubscriberClass -> Subscriber.

* FormStoreSubscriber fieldOnRegistered added to RemoveFormListeners. And added missing check validationType.

* Deleted compiled files. Added to .gitignore.

* Updated validators base with ValidationError.

* Fixed tests with errorMessage -> error change.

Author: Martynas Žilinskas

.gitignore

@@ -251,3 +251,6 @@ paket-files/
 .idea/
 *.sln.iml
 yarn.lock
+
+dist
+@types

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

@@ -1,7 +1,21 @@
+import { FieldValue } from "../contracts/field";
+
 export class StateUpdated { }
 
+export class FieldRegistered {
+    constructor(private fieldId: string, private initialValue: FieldValue) { }
+
+    public get FieldId() {
+        return this.fieldId;
+    }
+
+    public get InitialValue() {
+        return this.initialValue;
+    }
+}
+
 export class ValueChanged {
-    constructor(private fieldId: string, private newValue: any) { }
+    constructor(private fieldId: string, private newValue: FieldValue) { }
 
     public get FieldId() {
         return this.fieldId;

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

@@ -38,7 +38,7 @@ export interface FieldStateRecord extends TypedRecord<FieldStateRecord>, FieldSt
 export interface FieldStatePropsRecord extends TypedRecord<FieldStatePropsRecord>, FieldStateProps { }
 export interface FormErrorRecord extends TypedRecord<FormErrorRecord>, FormError { }
 
-export const enum FieldValidationType {
+export enum FieldValidationType {
     None,
     OnFieldRegistered = 1 << 1,
     OnValueChange = 1 << 2,

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

@@ -89,6 +89,8 @@ export class FormStore extends ActionEmitter {
         this.State = this.State.withMutations(state => {
             state.Fields = state.Fields.set(fieldId, recordify<FieldState, FieldStateRecord>(fieldState));
         });
+
+        this.emit(new Actions.FieldRegistered(fieldId, initialValue));
     }
 
     public UnregisterField(fieldId: string) {
@@ -125,14 +127,14 @@ export class FormStore extends ActionEmitter {
     }
 
     public ValueChanged(fieldId: string, newValue: FieldValue) {
-        this.emit(new Actions.ValueChanged(fieldId, newValue));
-
         this.State = this.State.withMutations(state => {
             const fieldState = state.Fields.get(fieldId);
             state.Fields = state.Fields.set(fieldId, fieldState.merge({
                 Value: newValue
             } as FieldState));
         });
+
+        this.emit(new Actions.ValueChanged(fieldId, newValue));
     }
 
     public async Validate(fieldId: string, validationPromise: Promise<void>) {

packages/simplr-validation/__tests__/subscribers/form-store-subscriber.test.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
-import { Stores, Actions } from "simplr-forms-core";
+import { Stores, Actions, Contracts as FormsCoreContracts } from "simplr-forms-core";
 import * as Sinon from "sinon";
 
 import { ContainsValidator } from "../../src/validators/index";
 import { FormStoreSubscriber } from "../../src/subscribers/form-store-subscriber";
 
+const { FieldValidationType } = FormsCoreContracts;
+
 class MySubscriber extends FormStoreSubscriber {
-    protected onValueChanged(action: Actions.ValueChanged) {
-        return new Promise<any>((resolve, reject) => {
-            super.onValueChanged(action).then(resolve).catch(reject);
-        });
+    public ValidateField(
+        fieldId: string,
+        value: FormsCoreContracts.FieldValue,
+        validationType: FormsCoreContracts.FieldValidationType
+    ) {
+        return super.ValidateField(fieldId, value, validationType);
     }
 }
 
@@ -19,7 +23,7 @@ describe("FormStoreSubscriber", () => {
         sandbox = Sinon.sandbox.create();
     });
 
-    afterEach(function () {
+    afterEach(() => {
         sandbox.restore();
     });
 
@@ -29,12 +33,14 @@ describe("FormStoreSubscriber", () => {
 
         expect(callback.called).toEqual(false);
 
+        expect(formStore.listeners(Actions.FieldRegistered).length).toBe(0);
         expect(formStore.listeners(Actions.PropsChanged).length).toBe(0);
         expect(formStore.listeners(Actions.ValueChanged).length).toBe(0);
 
         new FormStoreSubscriber(formStore);
         expect(callback.called).toEqual(true);
 
+        expect(formStore.listeners(Actions.FieldRegistered).length).toBe(1);
         expect(formStore.listeners(Actions.PropsChanged).length).toBe(1);
         expect(formStore.listeners(Actions.ValueChanged).length).toBe(1);
     });
@@ -51,82 +57,107 @@ describe("FormStoreSubscriber", () => {
 
     });
 
-    it("MUST validate when value changed without an error", async (done) => {
+    it("MUST validate when specific validationType flag is present without error", async (done) => {
         const fieldId = "field-id";
-        const nextValue = "valid value";
+        const initialValue = "initial valid value";
         const errorMessage = "error message";
 
         const validatorValidateCallback = sandbox.spy(ContainsValidator.prototype, "Validate");
-        const fieldChildren = [<ContainsValidator value="valid" errorMessage={errorMessage} />];
+        const fieldChildren = [<ContainsValidator value="valid" error={errorMessage} />];
         const formStore = new Stores.FormStore("form-id");
         const formStoreValidateCallback = sandbox.spy(Stores.FormStore.prototype, "Validate");
-        const onValueChangedCallback = sandbox.spy(MySubscriber.prototype, "onValueChanged");
-        new MySubscriber(formStore);
-
-        formStore.RegisterField(fieldId, "initial", { name: "field-name", children: fieldChildren });
-        formStore.ValueChanged(fieldId, nextValue);
-
-        const [onValueChangedPromise] = onValueChangedCallback.returnValues;
-
-        try {
-            expect(onValueChangedPromise).toBeDefined();
-            expect(onValueChangedPromise.then).toBeDefined();
-        } catch (err) {
-            done.fail(err);
-        }
+        const subscriber = new MySubscriber(formStore);
 
-        await onValueChangedPromise;
+        const fieldProps: FormsCoreContracts.FieldStateProps = {
+            name: "field-name",
+            children: fieldChildren,
+            validationType: FieldValidationType.OnValueChange
+        };
 
+        formStore.RegisterField(fieldId, initialValue, fieldProps);
         try {
+            await subscriber.ValidateField(fieldId, initialValue, FieldValidationType.OnValueChange);
             expect(formStoreValidateCallback.called).toBe(true);
             expect(validatorValidateCallback.called).toBe(true);
             expect(formStore.GetField(fieldId).Error).toBeUndefined();
+
+            done();
         } catch (error) {
             done.fail(error);
         }
-        done();
     });
 
-    it("MUST validate when value changed with an error", async (done) => {
+    it("MUST validate when specific validationType flag is present with error", async (done) => {
         const fieldId = "field-id";
-        const nextValue = "next value";
+        const initialValue = "initial value";
         const errorMessage = "error message";
 
         const validatorValidateCallback = sandbox.spy(ContainsValidator.prototype, "Validate");
-        const fieldChildren = [<ContainsValidator value="ok" errorMessage={errorMessage} />];
+        const fieldChildren = [<ContainsValidator value="valid" error={errorMessage} />];
         const formStore = new Stores.FormStore("form-id");
         const formStoreValidateCallback = sandbox.spy(Stores.FormStore.prototype, "Validate");
-        const onValueChangedCallback = sandbox.spy(MySubscriber.prototype, "onValueChanged");
-        new MySubscriber(formStore);
-
-        formStore.RegisterField(fieldId, "initial", { name: "field-name", children: fieldChildren });
-        formStore.ValueChanged(fieldId, nextValue);
+        const subscriber = new MySubscriber(formStore);
 
-        const [onValueChangedPromise] = onValueChangedCallback.returnValues;
+        const fieldProps: FormsCoreContracts.FieldStateProps = {
+            name: "field-name",
+            children: fieldChildren,
+            validationType: FieldValidationType.OnValueChange
+        };
 
+        formStore.RegisterField(fieldId, initialValue, fieldProps);
         try {
-            expect(onValueChangedPromise).toBeDefined();
-            expect(onValueChangedPromise.then).toBeDefined();
-            expect(formStore.GetField(fieldId).Validating).toBe(true);
-        } catch (err) {
-            done.fail(err);
-        }
-
-        await onValueChangedPromise;
-
-        try {
-            expect(formStore.GetField(fieldId).Validating).toBe(false);
+            await subscriber.ValidateField(fieldId, initialValue, FieldValidationType.OnValueChange);
             expect(formStoreValidateCallback.called).toBe(true);
             expect(validatorValidateCallback.called).toBe(true);
             expect(formStore.GetField(fieldId).Error).toBeDefined();
-            expect(formStore.GetField(fieldId).Error!.Message).toEqual(errorMessage);
+
+            done();
         } catch (error) {
             done.fail(error);
         }
-        done();
     });
 
-    // TODO: OnPropsChanged tests
-    it("validate when props changed without an error", () => { });
-    it("validate when props changed with an error", () => { });
+    it("MUST NOT validate when specific validationType flag is missing", () => {
+        const fieldId = "field-id";
+        const initialValue = "initial value";
+        const errorMessage = "error message";
+
+        const validatorValidateCallback = sandbox.spy(ContainsValidator.prototype, "Validate");
+        const fieldChildren = [<ContainsValidator value="valid" error={errorMessage} />];
+        const formStore = new Stores.FormStore("form-id");
+        const formStoreValidateCallback = sandbox.spy(Stores.FormStore.prototype, "Validate");
+        const subscriber = new MySubscriber(formStore);
+
+        const fieldProps: FormsCoreContracts.FieldStateProps = {
+            name: "field-name",
+            children: fieldChildren,
+            validationType: FieldValidationType.OnPropsChange
+        };
+
+        formStore.RegisterField(fieldId, initialValue, fieldProps);
+        // ValidateField should skip this validation because OnValueChange flag is missing
+        subscriber.ValidateField(fieldId, initialValue, FieldValidationType.OnValueChange);
+
+        expect(formStoreValidateCallback.called).toBe(false);
+        expect(validatorValidateCallback.called).toBe(false);
+        expect(formStore.GetField(fieldId).Error).toBeUndefined();
+    });
+
+    it("MUST NOT validate when field props is undefined", () => {
+        const fieldId = "field-id";
+        const initialValue = "initial value";
+
+        const validatorValidateCallback = sandbox.spy(ContainsValidator.prototype, "Validate");
+        const formStore = new Stores.FormStore("form-id");
+        const formStoreValidateCallback = sandbox.spy(Stores.FormStore.prototype, "Validate");
+        const subscriber = new MySubscriber(formStore);
+
+        // Validation is skipped because props are undefined
+        formStore.RegisterField(fieldId, initialValue, undefined);
+        subscriber.ValidateField(fieldId, initialValue, FieldValidationType.OnValueChange);
+
+        expect(formStoreValidateCallback.called).toBe(false);
+        expect(validatorValidateCallback.called).toBe(false);
+        expect(formStore.GetField(fieldId).Error).toBeUndefined();
+    });
 });

packages/simplr-validation/__tests__/subscribers/form-store-handler-subscriber.test.ts renamed to packages/simplr-validation/__tests__/subscribers/form-stores-handler-subscriber.test.ts

@@ -1,12 +1,12 @@
 import { Stores, Actions } from "simplr-forms-core";
 import * as Sinon from "sinon";
 
-import { FormStoreHandlerSubscriber } from "../../src/subscribers/form-store-handler-subscriber";
+import { FormStoresHandlerSubscriber } from "../../src/subscribers/form-stores-handler-subscriber";
 import { FormStoreSubscriber } from "../../src/subscribers/form-store-subscriber";
 
 const { FSHContainer } = Stores;
 
-class FormStoreHandlerSubscriberTest extends FormStoreHandlerSubscriber {
+class FormStoreHandlerSubscriberTest extends FormStoresHandlerSubscriber {
     public get TestFormStoresSubscribers() {
         return this.FormStoresSubscribers;
     }
@@ -16,21 +16,21 @@ let sandbox: Sinon.SinonSandbox;
 describe("FormStoreHandlerSubscriber", () => {
     beforeEach(() => {
         sandbox = Sinon.sandbox.create();
-        FSHContainer.SetFormStoresHandler(new Stores.FormStoresHandlerClass());
+        FSHContainer.SetFormStoresHandler(new Stores.FormStoresHandler());
     });
 
     afterEach(function () {
         sandbox.restore();
     });
 
     it("add listeners on form stores handler", () => {
-        const callback = sandbox.spy(Stores.FormStoresHandlerClass.prototype, "addListener");
+        const callback = sandbox.spy(Stores.FormStoresHandler.prototype, "addListener");
         const formStoreHandler = FSHContainer.FormStoresHandler;
 
         expect(formStoreHandler.listeners(Actions.FormRegistered).length).toBe(0);
         expect(formStoreHandler.listeners(Actions.FormUnregistered).length).toBe(0);
 
-        new FormStoreHandlerSubscriber(FSHContainer);
+        new FormStoresHandlerSubscriber(FSHContainer);
 
         expect(callback.called).toBe(true);
 
@@ -55,7 +55,7 @@ describe("FormStoreHandlerSubscriber", () => {
     it("remove FormStoreSubscriber and it listeners when form unregisters", () => {
         const formId = "form-id";
         const callback = sandbox.spy(FormStoreSubscriber.prototype, "RemoveFormListeners");
-        new FormStoreHandlerSubscriber(FSHContainer);
+        new FormStoresHandlerSubscriber(FSHContainer);
         const formStoreHandler = FSHContainer.FormStoresHandler;
 
         formStoreHandler.RegisterForm(formId);

packages/simplr-validation/__tests__/validation.test.tsx

@@ -7,7 +7,7 @@ it("Validate value without errors", async (done) => {
     const errorMessage = "error message";
     const validValue = "p-ok";
     const children = [
-        <ContainsValidator value="ok" errorMessage={errorMessage} />,
+        <ContainsValidator value="ok" error={errorMessage} />,
         <input type="text" />
     ];
     const validationPromise = Validation.Validate(children, validValue);
@@ -31,7 +31,7 @@ it("Validate value with error", async (done) => {
     const errorMessage = "error message";
     const invvalidValue = "invalid-value";
     const children = [
-        <ContainsValidator value="ok" errorMessage={errorMessage} />,
+        <ContainsValidator value="ok" error={errorMessage} />,
         <input type="text" />
     ];
     const validationPromise = Validation.Validate(children, invvalidValue);

packages/simplr-validation/package.json

@@ -28,6 +28,7 @@
     "@types/react": "^15.0.21",
     "@types/react-dom": "^0.14.23",
     "@types/validator": "^6.2.0",
+    "action-emitter": "^0.2.1",
     "immutable": "^3.8.1",
     "react": "^15.5.4",
     "simplr-forms-core": "4.0.0-pre-alpha.4",

packages/simplr-validation/src/abstractions/base-validator.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Contracts as FormsCoreContracts } from "simplr-forms-core";
 
-import { Validator, ValidationResult } from "../contracts";
+import { Validator, ValidationResult, ValidationError } from "../contracts";
 
 export interface ValidatorProps {
-    errorMessage: string;
+    error: ValidationError;
 }
 
 export abstract class BaseValidator<TProps extends ValidatorProps>
@@ -33,7 +33,7 @@ export abstract class BaseValidator<TProps extends ValidatorProps>
         return;
     }
 
-    protected InvalidSync(error: string): string {
+    protected InvalidSync(error: ValidationError): ValidationError {
         return error;
     }