WIP

Author: EranNL

__tests__/suits/Area.test.tsx

@@ -452,4 +452,30 @@ describe('test ValidatorProvider', () => {
         area.setProps({ errors: ['test error'] });
         expect(area.state().errors.length).toBe(1);
     });
+
+    it('should get other area', async () => {
+        Validator.extend('test_other_area', (validator: Validator) => ({
+            passed(): boolean {
+                return !!validator.area('other');
+            },
+            message(): string {
+                return 'test';
+            }
+        }))
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules="test_other_area">
+                <ValidatorArea>
+                    <input name="test" />
+                </ValidatorArea>
+                <ValidatorArea>
+                    <input name="other" />
+                </ValidatorArea>
+            </ValidatorProvider>
+        );
+
+        await provider.instance().validate();
+        await tick();
+        expect(provider.state().valid).toBeTruthy();
+    })
 })

__tests__/suits/rules/same.test.tsx

@@ -0,0 +1,49 @@
+import { Validator, ValidatorProviderProps, ValidatorProviderState } from '../../../src';
+import React from 'react';
+import same from '../../../src/rules/same';
+import { mount } from 'enzyme';
+import { ValidatorArea, ValidatorProvider } from '../../../src';
+import tick from '../../common/tick';
+
+describe('test same rule', () => {
+    beforeEach(() => {
+        Validator.extend('same', same);
+    });
+
+    it('should validate true', async () => {
+        const area = mount<ValidatorProvider, ValidatorProviderProps, ValidatorProviderState>(
+            <ValidatorProvider>
+                <ValidatorArea rules="same:bar">
+                    <input value="foo" name="foo" />
+                </ValidatorArea>
+
+                <ValidatorArea validationName="test">
+                    <input value="foo" name="bar" />
+                </ValidatorArea>
+            </ValidatorProvider>
+        );
+
+        await area.instance().validate();
+        await tick();
+        expect(area.state().valid).toBeTruthy();
+    });
+
+    it('should validate false', async () => {
+        const area = mount<ValidatorProvider, ValidatorProviderProps, ValidatorProviderState>(
+            <ValidatorProvider>
+                <ValidatorArea rules="same:bar">
+                    <input value="foo" name="foo" />
+                </ValidatorArea>
+
+                <ValidatorArea>
+                    <input value="baz" name="bar" />
+                </ValidatorArea>
+            </ValidatorProvider>
+        );
+
+        await area.instance().validate();
+        await tick();
+        console.log(area.find(ValidatorArea).first().state());
+        expect(area.state().valid).toBeFalsy();
+    });
+})

__tests__/suits/utils/utils.test.ts

@@ -0,0 +1,15 @@
+import { arraysEqual } from '../../../src/common/utils';
+
+describe('utils test', () => {
+    it('should check if arrays are equal', () => {
+        expect(arraysEqual(['foo'], ['foo'])).toBeTruthy();
+    });
+
+    it('should check if arrays are not equal', () => {
+        expect(arraysEqual(['foo'], ['bar'])).toBeFalsy();
+    });
+
+    it('should check if arrays are not equal', () => {
+        expect(arraysEqual(['foo'], ['foo', 'bar'])).toBeFalsy();
+    });
+});

src/Rule.ts

@@ -17,6 +17,10 @@ export type RuleObject = {
      * Message shown when the rule doesn't pass
      */
     message(): string;
+    /**
+     * Array of strings to replace the rule args
+     */
+    messageArgs?(): string[];
 }
 
 export type Rule = RuleObject | RuleFunction;

src/Validator.ts

@@ -58,7 +58,7 @@ export class Validator {
     /**
      * Validator area used to access other areas and the provider
      */
-    private area?: ValidatorArea;
+    private _area?: ValidatorArea;
 
     /**
      * Name used to overwrite name attribute, to allow messages to be more specific
@@ -151,6 +151,17 @@ export class Validator {
         return [name, parameters.split(',')];
     }
 
+    private static parseArgs(rule: RuleObject, args: string[]): string[] {
+        if (rule.messageArgs) {
+            return [
+                ...rule.messageArgs(),
+                ...args.slice(rule.messageArgs().length, args.length - 1)
+            ];
+        }
+
+        return args;
+    }
+
     /**
      * Validate a specific rule
      */
@@ -165,7 +176,10 @@ export class Validator {
             const passed = await ruleObj.passed(this.elements, ...ruleParameters);
 
             if(!passed) {
-                this.errors.push(this.localize(ruleObj.message(), ...ruleParameters));
+                this.errors.push(this.localize(
+                    ruleObj.message(),
+                    Validator.parseArgs(ruleObj, ruleParameters)
+                ));
                 return false;
             }
 
@@ -192,7 +206,7 @@ export class Validator {
     /*
      * Get the capitalized, localized message
      */
-    public localize(message: string, ...ruleArgs: string[]): string {
+    public localize(message: string, ruleArgs: string[]): string {
         return capitalize(this.intl.formatMessage({
             id: message,
             defaultMessage: message
@@ -213,7 +227,7 @@ export class Validator {
      * Sets the current area
      */
     public setArea(area: ValidatorArea): Validator {
-        this.area = area;
+        this._area = area;
 
         return this;
     }
@@ -222,8 +236,8 @@ export class Validator {
      * Gets the area where this validator instance is used
      */
     public getArea(): ValidatorArea {
-        if (this.area) {
-            return this.area;
+        if (this._area) {
+            return this._area;
         }
 
         throw new Error('Areas are only available when validating React components.');
@@ -236,6 +250,10 @@ export class Validator {
         return this.getArea().context.getRefs(name, type);
     }
 
+    public area(name: string): ValidatorArea | undefined {
+        return this.getArea().context.getArea(name);
+    }
+
     /**
      * Merges rules from different sources into one array
      */

src/ValidatorContext.ts

@@ -6,10 +6,12 @@ export interface ValidatorContextProps {
     rules: RuleOptions;
     addArea: (name: string, ref: ValidatorArea) => void;
     getRefs: (name?: string, type?: typeof HTMLElement) => HTMLElement[];
+    getArea: (name: string) => ValidatorArea | undefined;
 }
 
 export const ValidatorContext = React.createContext<ValidatorContextProps>({
     rules: [],
     addArea: () => undefined,
-    getRefs: () => []
+    getRefs: () => [],
+    getArea: () => undefined
 });

src/components/ValidatorProvider.tsx

@@ -55,6 +55,14 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
         return !!Object.prototype.hasOwnProperty.call(this.state.areas, name);
     }
 
+    protected getArea(name: string): ValidatorArea | undefined {
+        if (!this.hasArea(name)) {
+            return undefined;
+        }
+
+        return this.state.areas[name];
+    }
+
     /**
      * Sets the errors given via props in the indicated area
      */
@@ -95,7 +103,7 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
     /**
      * Validate all areas within this provider
      */
-    private async validate(onValidated?: () => void): Promise<void> {
+    public async validate(onValidated?: () => void): Promise<void> {
         const { areas } = this.state;
 
         this.setState({
@@ -105,8 +113,10 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
                 .map((area) => area.validate())
             )).filter((valid: boolean) => !valid);
 
-            if (!invalidAreas.length && onValidated) {
-                onValidated();
+            if (!invalidAreas.length) {
+                if (onValidated) {
+                    onValidated();
+                }
             } else {
                 this.setState({
                     valid: false
@@ -173,7 +183,8 @@ export class ValidatorProvider extends React.Component<ValidatorProviderProps, V
                 value={{
                     rules: rules || [],
                     addArea: (name: string, ref: ValidatorArea): void => this.addArea(name, ref),
-                    getRefs: (name?: string, type?: typeof HTMLElement) => this.getRefs(name, type)
+                    getRefs: (name?: string, type?: typeof HTMLElement) => this.getRefs(name, type),
+                    getArea: (name: string) => this.getArea(name)
                 }}
             >
                 {children}

src/locale/en.ts

@@ -10,7 +10,8 @@ const en: LocaleMessagesMap = {
         required: '{name} is required',
         length: '{name} should be {0} characters',
         minLength: '{name} should have at least {0} characters',
-        maxLength: '{name} shouldn\'t be more than {0} characters'
+        maxLength: '{name} shouldn\'t be more than {0} characters',
+        same: '{name} should be the same as {0}'
     }
 }
 

src/locale/nl.ts

@@ -11,6 +11,7 @@ const nl: LocaleMessagesMap = {
         length: '{name} moet {0} karakters lang zijn',
         minLength: '{name} moet minstens {0} karakters lang zijn',
         maxLength: '{name} mag maximaal {0} karakters lang zijn',
+        same: '{name} moet hetzelfde zijn als {0}'
     }
 }
 

src/rules/same.ts

@@ -3,8 +3,9 @@ import {
 } from '../common/dom';
 import { Validator } from '../Validator';
 import { arraysEqual } from '../common/utils';
+import { RuleObject } from '../Rule';
 
-export default(validator: Validator)  => ({
+export default(validator: Validator): RuleObject => ({
     passed(elements: HTMLElement[], name: string): boolean {
         const values = elements.reduce((prev: string[], element: HTMLElement) => ([
             ...prev,
@@ -18,7 +19,12 @@ export default(validator: Validator)  => ({
 
         return arraysEqual(values, otherValues);
     },
+    messageArgs(): string[] {
+        return [
+            'fooo'
+        ];
+    },
     message(): string {
-        return 'minLength';
+        return 'same';
     }
 });