Feature/setup

.eslintrc

@@ -0,0 +1,27 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint/eslint-plugin"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "project": "./tsconfig.json"
+    },
+    "env": {
+        "node": true,
+        "es6": true
+    },
+    "rules": {
+        "comma-dangle": "off",
+        "class-methods-use-this": "off",
+        "import/prefer-default-export": "off",
+        "import/no-dynamic-require": "off",
+        "global-require": "off",
+        "quotes": ["error", "single", { "allowTemplateLiterals": true }],
+        "@typescript-eslint/indent": ["error", 4]
+    }
+}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

__tests__/Area.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ValidatorArea, Validator } from '../src';
+import { ValidatorAreaProps } from '../src/ValidatorArea';
+import required from '../src/rules/required';
+
+describe('test Provider', () => {
+    it('should render input', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea>
+                <input name="test" />
+            </ValidatorArea>
+        );
+
+        expect(area.find('input')).toBeDefined();
+    });
+
+    it('should render inputs with callback as child', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea>
+                {() => (
+                    <input name="test" />
+                )}
+            </ValidatorArea>
+        );
+
+        expect(area.find('input')).toBeDefined();
+    })
+
+    it('should throw an exception when no name provided', () => {
+        const area = () => {
+            mount<ValidatorArea, ValidatorAreaProps>(
+                <ValidatorArea>
+                    {() => (
+                        <>
+                            <input/>
+                            <input/>
+                        </>
+                    )}
+                </ValidatorArea>
+            );
+        }
+        expect(() => area()).toThrow();
+    });
+
+    it('should index (nested) inputs', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea name="test">
+                {() => (
+                    <>
+                        <><input/></>
+                        <div>
+                            <input />
+                            <input />
+                            <><input/></>
+                        </div>
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        expect(area.instance().getInputRefs().length).toBe(4);
+    });
+
+    it('should apply rules on blur', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <input name="test" />
+            </ValidatorArea>
+        );
+
+        area.find('input').at(0).simulate('blur');
+        expect(area.state().errors[0]).toBe('This field is required');
+    });
+
+    it('should render error when area dirty', async () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                {({ errors }) => (
+                    <>
+                        <input name="test" />
+                        {errors.length && <div>{errors[0]}</div>}
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(area.find('div').text()).toBe('This field is required');
+    })
+
+    it('should validate element with rule string', () => {
+        Validator.extend('testrule', {
+            passed(): boolean {
+                return false;
+            },
+            message(): string {
+                return 'string rule passed';
+            }
+        });
+
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={['testrule']}>
+                {({ errors }) => (
+                    <>
+                        <input name="test" />
+                        {errors.length && <div>{errors[0]}</div>}
+                    </>
+                )}
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(area.find('div').text()).toBe('string rule passed');
+    })
+
+    it('should call element\'s provided blur along validator blur', () => {
+        const mockFn = jest.fn();
+
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <input name="test" onBlur={mockFn} />
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(mockFn).toBeCalled();
+    });
+})

__tests__/Provider.test.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ValidatorArea, ValidatorProvider } from '../src';
+import required from '../src/rules/required';
+import { ValidatorProviderProps } from '../src/Provider';
+
+
+const tick = () => {
+    return new Promise(resolve => {
+        setTimeout(resolve, 0);
+    })
+}
+
+describe('test Provider', () => {
+    it('should render Provider', () => {
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider rules={[required]} />
+        );
+
+        expect(provider.instance().props.rules).toBeDefined();
+    });
+
+    it('should throw error when area with existing name is addeded', () => {
+            const provider = () => {
+                mount<ValidatorProvider, ValidatorProviderProps>(
+                    <ValidatorProvider>
+                        <ValidatorArea name="test">
+                            <div />
+                        </ValidatorArea>
+                        <ValidatorArea name="test">
+                            <div />
+                        </ValidatorArea>
+                    </ValidatorProvider>
+                );
+            }
+
+            expect(() => provider()).toThrow('Validation area names should be unique');
+    })
+
+    it('should render with function as child', () => {
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                {() => <div>test</div>}
+            </ValidatorProvider>
+        );
+
+        expect(provider.find('div').text()).toBe('test');
+    })
+
+    it('should add an area when provided as child', () => {
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                <ValidatorArea name="test">
+                    <div />
+                </ValidatorArea>
+            </ValidatorProvider>
+        );
+
+        const areas = provider.state().areas;
+
+        expect(areas.test).toBeDefined();
+        expect(areas.test).toBeInstanceOf(ValidatorArea);
+    })
+
+    it('should not call callback when areas dirty', async () => {
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                {({ validate }) => (
+                    <>
+                        <ValidatorArea rules={[required]} name="test1">
+                            <input value="" />
+                        </ValidatorArea>
+                        <ValidatorArea rules={[required]} name="test2">
+                            <input value="" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).not.toHaveBeenCalled()
+    })
+
+    it('should call callback when areas not dirty', async () => {
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                {({ validate }) => (
+                    <>
+                        <ValidatorArea rules={[required]} name="test1">
+                            <input value="foo" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled()
+    })
+
+
+    it('should just validate when not rules prop is given', async () => {
+        const mockFn = jest.fn();
+
+        const provider = mount<ValidatorProvider, ValidatorProviderProps>(
+            <ValidatorProvider>
+                {({ validate }) => (
+                    <>
+                        <ValidatorArea name="test1">
+                            <input value="" />
+                        </ValidatorArea>
+                        <button onClick={() => validate(mockFn)} />
+                    </>
+                )}
+            </ValidatorProvider>
+        );
+
+        provider.find('button').simulate('click');
+        await tick();
+        expect(mockFn).toHaveBeenCalled()
+    })
+})

__tests__/Validator.test.ts

@@ -0,0 +1,19 @@
+import { Rule } from '../src/Rule';
+import { Validator } from '../src';
+
+describe('test validator', () => {
+    it('should add custom rules', () => {
+        const rule: Rule = {
+            passed(): boolean {
+                return true;
+            },
+            message(): string {
+                return '';
+            }
+        }
+
+        Validator.extend('testRule', rule);
+
+        expect(Validator.hasRule('testRule')).toBeTruthy();
+    });
+});

__tests__/rules/required.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ValidatorArea } from '../../src';
+import { ValidatorAreaProps } from '../../src/ValidatorArea';
+import required from '../../src/rules/required';
+
+describe('test required rule', () => {
+    it('should validate input', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <input name="test" />
+            </ValidatorArea>
+        );
+
+        area.find('input').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('This field is required');
+    });
+
+    it('should validate textarea', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <textarea name="test" />
+            </ValidatorArea>
+        );
+
+        area.find('textarea').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('This field is required');
+    });
+
+    it('should validate select', () => {
+        const area = mount<ValidatorArea, ValidatorAreaProps>(
+            <ValidatorArea rules={[required]}>
+                <select name="test">
+                    <option value="">Choose...</option>
+                </select>
+            </ValidatorArea>
+        );
+
+        area.find('select').simulate('blur');
+        expect(area.state().errors.length).toBe(1);
+        expect(area.state().errors[0]).toBe('This field is required');
+    });
+});

babel.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    plugins: [
+        '@babel/plugin-proposal-class-properties'
+    ],
+    presets: [
+        '@babel/typescript',
+        ['@babel/env', {
+            targets: {
+                esmodules: true,
+            },
+        },],
+        '@babel/react',
+    ],
+};

jest.config.json

@@ -0,0 +1,4 @@
+{
+    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$",
+    "setupFilesAfterEnv": ["./setupTests.ts"]
+}