Added validation skip if value is not newest (expired).

Author: Martynas Žilinskas

docs/2017-04/2017-04-08.md

@@ -153,6 +153,8 @@ Mind blown? :tada: I hoped so. :clap:
 
 There are more things to cover here, but we are already hyped-up to get our hands dirty and start coding.
 
+------------
+
 The feedback and questions are more than welcome!
 
 ------------

docs/2017-04/2017-04-14.md

@@ -0,0 +1,88 @@
+## April 14 ([discuss](https://github.com/SimplrJS/simplr-forms/pull/4))
+
+### Attendees
+
+* [Dovydas](https://twitter.com/dovydasnav) (QuatroDev)
+* [Martynas](https://twitter.com/MartiogalaLT) (QuatroDev)
+* [Giedrius](https://twitter.com/giedrucis) (QuatroDev)
+* [Aurimas](https://twitter.com/waikys) (QuatroDev)
+
+### simplr-forms-core is done for pre-alpha
+
+During the week, we worked on `simplr-forms-core` to have a solid foundation for `simplr-forms-dom` and `simplr-forms-native`.
+
+Most of the coding was done by Dovydas and Martynas, with valuable and fast reviews by Giedrius.
+Feels good to work with such an amazing team.
+
+Also, Aurimas joined our efforts by preparing react-native app for development of `simplr-forms-native`. Thanks, Aurimas!
+
+We will start working on both `dom` and `native` packages soon.
+
+### So... What happened during the week?
+
+We can confidently say that we have a solid first appearances of `core`, which consists of:
+* [`form-stores-handler`][1] - a general manager for all forms data stores
+* [`form-store`][2] - a data store for one particular form
+* [`base-form`][3] - a base component for a form to register to store and provide context for children, register with `form-stores-handler`, etc.
+* [`base-field`][4] - a base component for field that is aware of the parent form, registers and registers to and from form store, incorporates React lifecycle events, etc. 
+
+These 4 pretty much cover the base of the whole library.
+
+Of course, there is more to it.
+
+[`form-stores-handler`][1] and [`base-form`][3] extend [`ActionEmitter`][5] for you to be able to `addListener`
+for actions and know when the store is created, updates it's state or even more specific [actions][6],
+e.g. [value][7] or [props][8] are updated.
+
+This enables another amazing thing: now we can externalize validation!
+
+> Shoutout to Giedrius for publishing [`ActionEmitter`][5] right on time.
+> And for us all to debugging it in a single day :smile:
+
+### Externalized validation
+
+We understand that most developers use whatever they get out-of-the-box,
+especially if what they get is an easy-to-consume and also an optimal solution.
+
+But sometimes usage of project-specific validation library is a must.
+
+For example, there are quite a few industries with very specific data structures and their validations.
+Medicine, aviation, insurance, finance... And that's just a few on the tip of the tongue.
+
+Therefore, externalizing validation is an amazing step forward to using `simplr-forms`
+no matter what data validation requirements you have.
+
+### Testing
+
+A library without tests these days is a scary and unstable bomb with a timer that shows gibberish on it's timer,
+i.e. you don't know when it is gonna hit you.
+
+Therefore, we already have 44 tests in 4 test suites.
+
+And we will write as much more as we need to ensure everything will progress forward
+and this library becomes de-facto a standard, a no brainer when anyone thinks about React and forms.
+
+### What's next?
+
+Releasing pre-alpha of `simplr-forms-core` and starting development of `simplr-forms-dom` and (maybe) `simplr-forms-native`.
+
+Also, `simplr-validation` is coming into the light as we evaluate all of the peaces for it.
+
+And now... It's coding time again! :tada:
+
+------------
+
+The feedback and questions are more than welcome!
+
+------------
+
+Please feel free to discuss these notes in the [corresponding pull request](https://github.com/SimplrJS/simplr-forms/pull/4).
+  
+[1]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/stores/form-stores-handler.ts
+[2]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/stores/form-store.ts
+[3]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/abstractions/base-form.ts
+[4]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/abstractions/base-field.ts
+[5]: https://github.com/SimplrJS/action-emitter
+[6]: https://github.com/SimplrJS/simplr-forms/tree/dev/packages/simplr-forms-core/src/actions
+[7]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/actions/form-store-actions.ts#L3-L9
+[8]: https://github.com/SimplrJS/simplr-forms/blob/dev/packages/simplr-forms-core/src/actions/form-store-actions.ts#L11-L17

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

@@ -157,6 +157,49 @@ describe("Form store", () => {
         }
     });
 
+    it("skip validation when newValue has expired", async (done) => {
+        const formId = "FORM-ID";
+        const fieldId = "FIELD-ID";
+        const initialValue = "INITIAL-VALUE";
+        const formStore = new FormStore(formId);
+        const formError = "field error";
+
+        formStore.RegisterField(fieldId, initialValue);
+        const validationPromise = new Promise<void>((resolve, reject) => {
+            setTimeout(() => {
+                reject(formError);
+            }, 50);
+        });
+
+        formStore.Validate(fieldId, validationPromise);
+
+        // Imitate removal of last letter
+        formStore.ValueChanged(fieldId, initialValue.slice(0, initialValue.length - 1));
+
+        try {
+            expect(formStore.GetField(fieldId).Validating).toBe(true);
+        } catch (error) {
+            done.fail(error);
+        }
+
+        try {
+            await validationPromise;
+        } catch (err) {
+            // Validation promise was rejected
+            // Expects in the subsequent try block
+        }
+
+        try {
+            // It SHOULD still validating to be true because validation was skipped of expired value
+            expect(formStore.GetField(fieldId).Validating).toBe(true);
+            expect(formStore.GetField(fieldId).Error).toBeUndefined();
+        } catch (err) {
+            done.fail(err);
+        }
+
+        done();
+    });
+
     it("registers field with props", () => {
         const formId = "FORM-ID";
         const fieldId = "FIELD-ID";

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

@@ -46,7 +46,9 @@ export abstract class BaseField<TProps extends FieldProps, TState extends BaseFi
     static defaultProps: FieldProps = {
         // Empty string checked to have value in componentWillMount
         name: "",
-        validationType: FieldValidationType.OnChange,
+        validationType: FieldValidationType.OnFieldRegistered |
+        FieldValidationType.OnValueChange |
+        FieldValidationType.OnPropsChange,
         // By default, fields data should be retained, even if the field is unmounted
         destroyOnUnmount: false
     };

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

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

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

@@ -139,20 +139,24 @@ export class FormStore extends ActionEmitter {
         const field = this.State.Fields.get(fieldId);
         const fieldValue = field.Value;
 
-        this.State = this.State.withMutations(state => {
-            const fieldState = state.Fields.get(fieldId);
-            state.Fields = state.Fields.set(fieldId, fieldState.merge({
-                Validating: true,
-                Error: undefined
-            } as FieldState));
-        });
+        // Skip if it's already validating
+        if (!field.Validating) {
+            this.State = this.State.withMutations(state => {
+                const fieldState = state.Fields.get(fieldId);
+                state.Fields = state.Fields.set(fieldId, fieldState.merge({
+                    Validating: true,
+                    Error: undefined
+                } as FieldState));
+            });
+        }
 
         try {
             // Wait for validation to finish
             await validationPromise;
 
             // Skip validation if the value has changed again
-            if (field.Value !== fieldValue) {
+            const currentFieldValue = this.State.Fields.get(fieldId).Value;
+            if (currentFieldValue !== fieldValue) {
                 return;
             }
 
@@ -164,7 +168,8 @@ export class FormStore extends ActionEmitter {
             });
         } catch (error) {
             // Skip validation if the value has changed again
-            if (field.Value !== fieldValue) {
+            const currentFieldValue = this.State.Fields.get(fieldId).Value;
+            if (currentFieldValue !== fieldValue) {
                 return;
             }
 

packages/simplr-validation/package.json

@@ -14,11 +14,11 @@
     "@types/enzyme": "^2.7.7",
     "@types/jest": "^19.2.2",
     "@types/sinon": "^2.1.2",
-    "enzyme": "^2.8.0",
+    "enzyme": "^2.8.2",
     "jest": "^19.0.2",
-    "jest-enzyme": "^3.0.0",
-    "react-addons-test-utils": "^15.5.1",
+    "jest-enzyme": "^3.0.1",
     "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.5.4",
     "sinon": "^2.1.0",
     "ts-jest": "^19.0.8",
     "tslint": "^5.0.0",

packages/simplr-validation/src/index.ts

@@ -1,9 +1,9 @@
 import * as Abstractions from "./abstractions/index";
 import * as Contracts from "./contracts";
-
-export * from "./validators/index";
+import * as Validators from "./validators/index";
 
 export {
     Abstractions,
-    Contracts
+    Contracts,
+    Validators
 };

packages/simplr-validation/src/validators/alpha.ts

@@ -0,0 +1,23 @@
+import * as Validator from "validator";
+import { Contracts } from "simplr-forms-core";
+
+import { BaseValidator, ValidatorProps } from "../abstractions/base-validator";
+import { ValidationResult } from "../contracts";
+
+export interface AlphaValidatorProps extends ValidatorProps {
+    locale?: ValidatorJS.AlphaLocale;
+}
+
+export class AlphaValidator extends BaseValidator<AlphaValidatorProps> {
+    Validate(value: Contracts.FieldValue): ValidationResult {
+        if (this.SkipValidation(value)) {
+            return this.ValidSync();
+        }
+
+        if (!Validator.isAlpha(value, this.props.locale)) {
+            return this.InvalidSync(this.props.errorMessage);
+        }
+
+        return this.ValidSync();
+    }
+}

packages/simplr-validation/src/validators/alphanumeric.ts

@@ -0,0 +1,23 @@
+import * as Validator from "validator";
+import { Contracts } from "simplr-forms-core";
+
+import { BaseValidator, ValidatorProps } from "../abstractions/base-validator";
+import { ValidationResult } from "../contracts";
+
+export interface AlphanumericValidatorProps extends ValidatorProps {
+    locale?: ValidatorJS.AlphanumericLocale;
+}
+
+export class AlphanumericValidator extends BaseValidator<AlphanumericValidatorProps> {
+    Validate(value: Contracts.FieldValue): ValidationResult {
+        if (this.SkipValidation(value)) {
+            return this.ValidSync();
+        }
+
+        if (!Validator.isAlphanumeric(value, this.props.locale)) {
+            return this.InvalidSync(this.props.errorMessage);
+        }
+
+        return this.ValidSync();
+    }
+}