Feature/error template (#98)

* Added template error rendering.

* Updated listeners test.

* Fixed ValidateValue function.

* Updated travis file.

* Update validation.test.tsx

Author: Martynas Žilinskas

.travis.yml

@@ -5,9 +5,6 @@ notifications:
     on_failure: change
 node_js:
 - stable
-before_install:
-- "npm install -g npm@^5.0.3"
-- "npm install -g typescript@^2.3"
 script:
 - npm run generate
 - npm run tools-build

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

@@ -11,6 +11,7 @@ import {
     FieldRegistered,
     FieldPropsChanged,
     ValueChanged,
+    FieldBlurred
 } from "@simplr/react-forms/actions";
 
 import { BaseFormValidator, BaseFormValidatorProps } from "../../src/abstractions/base-form-validator";
@@ -73,13 +74,15 @@ describe("FormStoreSubscriber", () => {
         expect(formStore.listeners(FieldRegistered).length).toBe(0);
         expect(formStore.listeners(FieldPropsChanged).length).toBe(0);
         expect(formStore.listeners(ValueChanged).length).toBe(0);
+        expect(formStore.listeners(FieldBlurred).length).toBe(0);
 
         new FormStoreSubscriber(formStore);
         expect(callback.called).toEqual(true);
 
         expect(formStore.listeners(FieldRegistered).length).toBe(1);
         expect(formStore.listeners(FieldPropsChanged).length).toBe(1);
         expect(formStore.listeners(ValueChanged).length).toBe(1);
+        expect(formStore.listeners(FieldBlurred).length).toBe(1);
     });
 
     it("remove listeners from form store", () => {
@@ -92,7 +95,7 @@ describe("FormStoreSubscriber", () => {
         expect(formStore.listeners(FieldRegistered).length).toBe(0);
         expect(formStore.listeners(FieldPropsChanged).length).toBe(0);
         expect(formStore.listeners(ValueChanged).length).toBe(0);
-
+        expect(formStore.listeners(FieldBlurred).length).toBe(0);
     });
 
     describe("field validation", () => {

packages/react-forms-validation/__tests__/validation.test.tsx

@@ -1,41 +1,78 @@
 import * as React from "react";
 
+import { FormStore } from "@simplr/react-forms/stores";
+
 import * as Validation from "../src/utils/validation";
 import { ContainsValidator } from "../src/validators/index";
+import { ValidationFieldErrorTemplate } from "../src/contracts";
+import * as Sinon from "sinon";
+import { FormError } from "@simplr/react-forms/contracts";
+
+it("Validates value without errors", async done => {
+    try {
+        const errorMessage = "error message";
+        const validValue = "p-ok";
+        const fieldId = "field-id";
+        const formStore = new FormStore("form-id");
+
+        const children = [
+            <ContainsValidator value="ok" error={errorMessage} />,
+            <input type="text" />
+        ];
+        const validationPromise = Validation.ValidateField(children, validValue, fieldId, formStore);
+        let validationResponse;
+
+        validationResponse = await validationPromise;
+        expect(validationResponse).toBeUndefined();
+
+        done();
+    } catch (error) {
+        done.fail(error);
+    }
+});
 
-it("Validate value without errors", async (done) => {
+it("Validates value with error", async done => {
     const errorMessage = "error message";
-    const validValue = "p-ok";
+    const invalidValue = "invalid-value";
+    const fieldId = "field-id";
+    const formStore = new FormStore("form-id");
+
     const children = [
         <ContainsValidator value="ok" error={errorMessage} />,
         <input type="text" />
     ];
-    const validationPromise = Validation.ValidateField(children, validValue);
-    let validationResponse;
+    const validationPromise = Validation.ValidateField(children, invalidValue, fieldId, formStore);
+    let validationResponse: FormError | undefined = undefined;
 
     try {
-        validationResponse = await validationPromise;
+        await validationPromise;
     } catch (error) {
-        done.fail(error);
+        validationResponse = error;
     }
 
     try {
-        expect(validationResponse).toBeUndefined();
+        expect(validationResponse).toBeDefined();
+        expect(validationResponse!.Message).toBe(errorMessage);
         done();
     } catch (error) {
         done.fail(error);
     }
 });
 
-it("Validate value with error", async (done) => {
-    const errorMessage = "error message";
-    const invvalidValue = "invalid-value";
+it("Validates value with error template", async done => {
+    const invalidValue = "invalid-value";
+    const fieldId = "field-id";
+    const formStore = new FormStore("form-id");
+    const errorTemplate: ValidationFieldErrorTemplate = (tFieldId, tFormStore) =>
+        `${tFieldId} error template`;
+    const spyCallback = Sinon.spy(errorTemplate);
+
     const children = [
-        <ContainsValidator value="ok" error={errorMessage} />,
+        <ContainsValidator value="ok" error={spyCallback} />,
         <input type="text" />
     ];
-    const validationPromise = Validation.ValidateField(children, invvalidValue);
-    let validationResponse;
+    const validationPromise = Validation.ValidateField(children, invalidValue, fieldId, formStore);
+    let validationResponse: FormError | undefined = undefined;
 
     try {
         await validationPromise;
@@ -44,7 +81,9 @@ it("Validate value with error", async (done) => {
     }
 
     try {
-        expect(validationResponse).toBe(errorMessage);
+        expect(spyCallback.called).toBe(true);
+        expect(validationResponse).toBeDefined();
+        expect(validationResponse!.Message).toBe(errorTemplate(fieldId, formStore));
         done();
     } catch (error) {
         done.fail(error);

packages/react-forms-validation/src/abstractions/base-field-validator.ts

@@ -1,7 +1,9 @@
-import { ValidationError } from "../contracts";
+import { ValidationError, ValidationFieldErrorTemplate } from "../contracts";
 import { BaseValidator, BaseValidatorProps } from "./base-validator";
 
-export type BaseFieldValidatorProps = BaseValidatorProps;
+export interface BaseFieldValidatorProps extends BaseValidatorProps {
+    error: ValidationError<ValidationFieldErrorTemplate>;
+}
 
 export abstract class BaseFieldValidator<TProps extends BaseFieldValidatorProps>
     extends BaseValidator<TProps, {}> {

packages/react-forms-validation/src/abstractions/base-form-validator.ts

@@ -1,7 +1,9 @@
-import { ValidationError } from "../contracts";
+import { ValidationError, ValidationFormErrorTemplate } from "../contracts";
 import { BaseValidator, BaseValidatorProps } from "./base-validator";
 
-export type BaseFormValidatorProps = BaseValidatorProps;
+export interface BaseFormValidatorProps extends BaseValidatorProps {
+    error: ValidationError<ValidationFormErrorTemplate>;
+}
 
 export abstract class BaseFormValidator<TProps extends BaseFormValidatorProps>
     extends BaseValidator<TProps, {}> {

packages/react-forms-validation/src/abstractions/base-validator.ts

@@ -22,7 +22,7 @@ export abstract class BaseValidator<TProps extends BaseValidatorProps, TState>
         });
     }
 
-    protected async Invalid(error: string): Promise<void> {
+    protected async Invalid(error: ValidationError): Promise<void> {
         return new Promise<void>((resolve, reject) => {
             reject(error);
         });

packages/react-forms-validation/src/contracts.ts

@@ -1,10 +1,14 @@
 import { FormError } from "@simplr/react-forms/contracts";
+import { FormStore } from "@simplr/react-forms/stores";
 
 export interface Validator {
     Validate(value: any): ValidationResult;
 }
 
-export type ValidationError = string | FormError;
+export type ValidationError<TTemplateFunc = Function> = string | FormError | TTemplateFunc;
+
+export type ValidationFormErrorTemplate = (formStore: FormStore) => ValidationError;
+export type ValidationFieldErrorTemplate = (fieldId: string, formStore: FormStore) => ValidationError;
 
 export type ValidationResult = Promise<void> | ValidationError | undefined;
 

packages/react-forms-validation/src/subscribers/form-store-subscriber.ts

@@ -73,7 +73,7 @@ export class FormStoreSubscriber {
         }
 
         const childrenArray = React.Children.toArray(fieldProps.children) as JSX.Element[];
-        const validationPromise = ValidateField(childrenArray, fieldState.Value);
+        const validationPromise = ValidateField(childrenArray, fieldState.Value, fieldId, this.formStore);
         await this.formStore.ValidateField(fieldId, validationPromise);
     }
 
@@ -88,7 +88,7 @@ export class FormStoreSubscriber {
         }
 
         const childrenArray = React.Children.toArray(formProps.children) as JSX.Element[];
-        const validationPromise = ValidateForm(childrenArray, this.formStore.ToObject());
+        const validationPromise = ValidateForm(childrenArray, this.formStore.ToObject(), this.formStore);
         await this.formStore.ValidateForm(validationPromise);
     }
 

packages/react-forms-validation/src/utils/validation.ts

@@ -1,52 +1,80 @@
 import { FieldValue, FormErrorOrigin } from "@simplr/react-forms/contracts";
 import {
-    ProcessValue,
     IsComponentOfType,
     RenderComponents,
     ConstructFormError
 } from "@simplr/react-forms/utils";
+import { FormStore } from "@simplr/react-forms/stores";
 
 import {
     Validator,
     FIELD_VALIDATOR_FUNCTION_NAME,
-    FORM_VALIDATOR_FUNCTION_NAME
+    FORM_VALIDATOR_FUNCTION_NAME,
+    ValidationFieldErrorTemplate,
+    ValidationFormErrorTemplate,
+    ValidationResult,
+    ValidationError
 } from "../contracts";
 
 function IsPromise<T>(value: any): value is Promise<T> {
     return value != null && value.then != null && value.catch != null;
 }
 
+function IsFunction<T>(value: any): value is T {
+    return typeof value === "function";
+}
+
 export async function ValidateValue(
     components: JSX.Element[],
     value: any,
-    validatorTypeFunctionName: string): Promise<void> {
+    validatorTypeFunctionName: string,
+    errorProccessor: (error: ValidationResult) => ValidationResult
+): Promise<void> {
     const validators = components.filter(x => IsComponentOfType(x, validatorTypeFunctionName));
     const renderedValidators = RenderComponents<Validator>(validators);
 
     for (const validator of renderedValidators) {
         const validationResult = validator.Validate(value);
         // Ensure that we have a promise
-        let promise: Promise<void>;
+        let validationError: ValidationError | undefined;
         if (IsPromise<void>(validationResult)) {
-            promise = validationResult;
+            try {
+                await validationResult;
+            } catch (caughtError) {
+                validationError = caughtError;
+            }
         } else {
-            promise = new Promise<void>((resolve, reject) => {
-                const error = ConstructFormError(validationResult, FormErrorOrigin.Validation);
-                if (error !== undefined) {
-                    reject(validationResult);
-                    return;
-                }
-                resolve();
-            });
+            validationError = validationResult;
+        }
+
+        const builtError = errorProccessor(validationError);
+        const error = ConstructFormError(builtError, FormErrorOrigin.Validation);
+        if (error !== undefined) {
+            throw error;
         }
-        await promise;
     }
 }
 
-export async function ValidateField(components: JSX.Element[], value: FieldValue): Promise<void> {
-    return ValidateValue(components, value, FIELD_VALIDATOR_FUNCTION_NAME);
+export async function ValidateField(components: JSX.Element[], value: FieldValue, fieldId: string, formStore: FormStore): Promise<void> {
+    return ValidateValue(components, value, FIELD_VALIDATOR_FUNCTION_NAME, error => {
+        if (IsFunction<ValidationFieldErrorTemplate>(error)) {
+            const errorTemplate = error;
+            const builtError = errorTemplate(fieldId, formStore);
+            return builtError;
+        }
+
+        return error;
+    });
 }
 
-export async function ValidateForm(components: JSX.Element[], value: any): Promise<void> {
-    return ValidateValue(components, value, FORM_VALIDATOR_FUNCTION_NAME);
+export async function ValidateForm(components: JSX.Element[], value: any, formStore: FormStore): Promise<void> {
+    return ValidateValue(components, value, FORM_VALIDATOR_FUNCTION_NAME, error => {
+        if (IsFunction<ValidationFormErrorTemplate>(error)) {
+            const errorTemplate = error;
+            const builtError = errorTemplate(formStore);
+            return builtError;
+        }
+
+        return error;
+    });
 }