@coxy/react-validator 1.3.4 → 2.0.0

package/src/index.test.ts

@@ -0,0 +1,7 @@
+import { ValidatorWrapper, ValidatorField, rules } from './index'
+
+it('renders with or without a name', () => {
+  expect(typeof ValidatorWrapper).toBe('function')
+  expect(typeof ValidatorField).toBe('function')
+  expect(typeof rules).toBe('object')
+})

package/src/index.ts

@@ -0,0 +1,5 @@
+export { rules } from './rules'
+export { ValidatorField } from './validator-field'
+export { ValidatorWrapper } from './validator-wrapper'
+export { Validator } from './validator'
+export { useValidator } from './use-validator'

package/src/jest.d.ts

@@ -0,0 +1 @@
+declare let shallow: any

package/src/rules.test.ts

@@ -0,0 +1,127 @@
+import { rules } from './rules'
+
+it('check rule email', () => {
+  expect(rules.email.length).toBe(2)
+
+  let result
+  // email.length > 0
+  result = rules.email[0].rule('test')
+  expect(result).toBe(true)
+
+  // email check regexp
+  result = rules.email[1].rule('test')
+  expect(result).toBe(false)
+
+  // email check regexp
+  result = rules.email[1].rule('test@gmail.com')
+  expect(result).toBe(true)
+})
+
+it('check rule password', () => {
+  expect(rules.password.length).toBe(2)
+
+  let result
+  // password.length > 0
+  result = rules.password[0].rule('test')
+  expect(result).toBe(true)
+
+  // password.length > 5
+  result = rules.password[1].rule('test')
+  expect(result).toBe(false)
+})
+
+it('check rule bool', () => {
+  expect(rules.bool.length).toBe(1)
+
+  const result = rules.bool[0].rule(true)
+  expect(result).toBe(true)
+})
+
+it('check rule notEmpty', () => {
+  expect(rules.notEmpty.length).toBe(1)
+
+  let result
+  result = rules.notEmpty[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.notEmpty[0].rule('test')
+  expect(result).toBe(true)
+})
+
+it('check rule min', () => {
+  expect(rules.min(1).length).toBe(1)
+  expect(typeof rules.min).toBe('function')
+
+  let result
+  result = rules.min(10)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule('11')
+  expect(result).toBe(true)
+
+  result = rules.min(9)[0].rule(10)
+  expect(result).toBe(true)
+
+  result = rules.min(9)[0].rule('8')
+  expect(result).toBe(false)
+
+  result = rules.min(9)[0].rule(7)
+  expect(result).toBe(false)
+
+  result = rules.min(-1)[0].rule('')
+  expect(result).toBe(false)
+})
+
+it('check rule max', () => {
+  let result
+  result = rules.max(10)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('11')
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule(10)
+  expect(result).toBe(false)
+
+  result = rules.max(9)[0].rule('5')
+  expect(result).toBe(true)
+
+  result = rules.max(9)[0].rule(5)
+  expect(result).toBe(true)
+
+  result = rules.max(-1)[0].rule('')
+  expect(result).toBe(false)
+})
+
+it('check rule length', () => {
+  let result
+  result = rules.length(1)[0].rule('')
+  expect(result).toBe(false)
+
+  result = rules.length(1)[0].rule('1')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[0].rule('testtesttest')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[1].rule('testtesttest')
+  expect(result).toBe(false)
+
+  result = rules.length(1, 10)[0].rule('lol')
+  expect(result).toBe(true)
+
+  result = rules.length(1, 10)[1].rule('lol')
+  expect(result).toBe(true)
+
+  result = rules.length(1)[1].rule('test undefined 2 param')
+  expect(result).toBe(true)
+
+  result = rules.length(10)[0].rule('tes')
+  expect(result).toBe(false)
+})

package/src/{rules.js → rules.ts}

@@ -1,48 +1,59 @@
+import { Value } from './validator-field'
+
 // eslint-disable-next-line
-const emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const emailReg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
+type Fn = (value: Value) => string
+
+export interface RuleInstance {
+  rule: (value: Value) => boolean
+  message: string | Fn
+}
 
-export default {
+export type ValidatorRules = RuleInstance[]
+
+export const rules = {
   notEmpty: [{
     rule: (value) => value !== '' && value.length > 0,
-    message: 'Value is required',
+    message: 'Value is required'
   }],
 
   bool: [{
     rule: (value) => !!value,
-    message: 'Value is required',
+    message: 'Value is required'
   }],
 
   password: [{
     rule: (value) => value.length > 0,
-    message: 'Password field cannot be empty',
+    message: 'Password field cannot be empty'
   }, {
     rule: (value) => value.length > 5,
-    message: 'Password field can not be less than 6 characters',
+    message: 'Password field can not be less than 6 characters'
   }],
 
   email: [{
     rule: (value) => !!value && value !== '' && value.length !== 0,
-    message: 'Email is required',
+    message: 'Email is required'
   }, {
     rule: (value) => emailReg.test(String(value).toLowerCase()),
-    message: 'Email is invalid',
+    message: 'Email is invalid'
   }],
 
   min: (min) => [{
     rule: (value) => parseFloat(value) > min,
-    message: `The value must be greater than ${min}`,
+    message: `The value must be greater than ${min}`
   }],
 
   max: (max) => [{
     rule: (value) => parseFloat(value) < max,
-    message: `The value must be smaller ${max}`,
+    message: `The value must be smaller ${max}`
   }],
 
-  length: (min, max) => [{
+  length: (min, max?) => [{
     rule: (value) => String(value).length >= min,
-    message: `No less than ${min} symbols`,
+    message: `No less than ${min} symbols`
   }, {
     rule: (value) => (max !== undefined ? String(value).length <= max : true),
-    message: `No more than ${max} symbols`,
-  }],
-};
+    message: `No more than ${max} symbols`
+  }]
+}

package/src/use-validator.test.tsx

@@ -0,0 +1,58 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { unmountComponentAtNode } from 'react-dom'
+import { render, screen } from '@testing-library/react'
+import { act } from 'react-dom/test-utils'
+import { useEffect, useState } from 'react'
+
+import { rules } from './rules'
+import { useValidator } from './use-validator'
+
+let container
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  unmountComponentAtNode(container)
+  container.remove()
+  container = null
+})
+
+jest.useFakeTimers()
+
+it('check state change and hide field', () => {
+  function Comp () {
+    const [value, setValue] = useState(false)
+    const [isValid, validateObject] = useValidator(value, rules.bool)
+
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => {
+          setValue(true)
+        })
+      }, 100)
+    }, [])
+
+    return (
+      <>
+        <span data-testid="test1">{isValid ? 'true' : 'false'}</span>
+        <span data-testid="test2">{validateObject.message || 'true'}</span>
+      </>
+    )
+  }
+  act(() => {
+    render(<Comp />)
+  })
+
+  expect(screen.getByTestId('test1').textContent).toContain('false')
+  expect(screen.getByTestId('test2').textContent).toContain('Value is required')
+
+  jest.runAllTimers()
+
+  expect(screen.getByTestId('test1').textContent).toContain('true')
+  expect(screen.getByTestId('test2').textContent).toContain('true')
+})

package/src/use-validator.ts

@@ -0,0 +1,10 @@
+import { Validator } from './validator'
+import { ValidatorRules } from './rules'
+import { Validity, Value } from './validator-field'
+
+export function useValidator (value: Value, rules: ValidatorRules): [boolean, Pick<Validity, 'message' | 'errors'>] {
+  const validator = new Validator()
+  validator.addField({ value, rules })
+  const { isValid, ...validateObject } = validator.validate()
+  return [isValid, validateObject]
+}

package/src/validator-field.test.tsx

@@ -0,0 +1,161 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createRef, useEffect, useState } from 'react'
+import { render, act } from '@testing-library/react'
+
+import { ValidatorWrapper } from './validator-wrapper'
+import { ValidatorField } from './validator-field'
+import { rules } from './rules'
+
+it('render without wrapper', () => {
+  expect(() => shallow(<ValidatorField />)).toThrowError()
+})
+
+it('normal render', () => {
+  render((
+    <ValidatorWrapper>
+      <ValidatorField rules={[]} value="" />
+    </ValidatorWrapper>
+  ))
+})
+
+it('check context validator', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} />
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check failed validation', () => {
+  const validator1 = createRef<ValidatorWrapper>()
+  const validator2 = createRef<ValidatorWrapper>()
+
+  render((
+    <>
+      <ValidatorWrapper ref={validator1}>
+        <ValidatorField rules={rules.email} value="test" />
+      </ValidatorWrapper>
+      <ValidatorWrapper ref={validator2}>
+        <ValidatorField rules={rules.email} value="" />
+      </ValidatorWrapper>
+    </>
+  ))
+
+  act(() => {
+    const validateResult1 = validator1.current.validate()
+
+    expect(validateResult1.isValid).toBe(false)
+    expect(validateResult1.message).toBe('Email is invalid')
+    expect(validateResult1.errors.length).toBe(1)
+
+    const validateResult2 = validator2.current.validate()
+
+    expect(validateResult2.isValid).toBe(false)
+    expect(validateResult2.message).toBe('Email is required')
+    expect(validateResult2.errors.length).toBe(1)
+  })
+})
+
+jest.useFakeTimers()
+
+it('check state change and hide field', () => {
+  const validator1 = createRef<ValidatorWrapper>()
+
+  function Comp () {
+    const [st, setSt] = useState(true)
+
+    useEffect(() => {
+      setTimeout(() => {
+        act(() => {
+          setSt(false)
+        })
+      }, 100)
+    }, [])
+
+    return (
+      <ValidatorWrapper ref={validator1}>
+        <ValidatorField rules={rules.email} value="test" />
+        {st && (
+          <ValidatorField rules={rules.email} value="" />
+        )}
+      </ValidatorWrapper>
+    )
+  }
+
+  render(<Comp />)
+
+  jest.runAllTimers()
+
+  const validateResult1 = validator1.current.validate()
+
+  expect(validateResult1.isValid).toBe(false)
+  expect(validateResult1.message).toBe('Email is invalid')
+  expect(validateResult1.errors.length).toBe(1)
+})
+
+it('check success validation', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={rules.email} value="email@email.com" />
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check success validation fot child function', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={rules.email} value="email@email.com">
+        {({ isValid, message }) => (
+          <>
+            {!isValid && <div>{message}</div>}
+          </>
+        )}
+      </ValidatorField>
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(true)
+  expect(validateResult.message).toBe('')
+})
+
+it('check custom rule message function', () => {
+  const validator = createRef<ValidatorWrapper>()
+  const rule = [{
+    rule: (value) => value !== 'test',
+    message: (value) => `test message ${value}`
+  }]
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={rule} value="test">
+        {({ isValid, message }) => (
+          <>
+            {!isValid && <div>{message}</div>}
+          </>
+        )}
+      </ValidatorField>
+    </ValidatorWrapper>
+  ))
+
+  const validateResult = validator.current.validate()
+
+  expect(validateResult.isValid).toBe(false)
+  expect(validateResult.message).toBe('test message test')
+})

package/src/validator-field.tsx

@@ -0,0 +1,71 @@
+import { Component, ReactNode } from 'react'
+
+import { Context } from './context'
+import { Field } from './validator'
+import { ValidatorRules } from './rules'
+
+export type Value = any
+
+export interface ErrorMessage {
+  message: string
+  isValid: boolean
+}
+
+export interface Validity {
+  message: string
+  isValid: boolean
+  errors?: ErrorMessage[]
+  id?: string | number
+}
+
+type Fn = (validity: Validity, value: Value) => ReactNode
+
+interface Props {
+  rules?: ValidatorRules,
+  required?: boolean,
+  value?: Value
+  id?: string | number
+  children?: ReactNode | Fn
+  unregisterField: (val: any) => void
+  registerField: (val: any) => void
+}
+
+class ValidationFieldWrapper extends Component<Props> {
+  componentWillUnmount () {
+    this.props.unregisterField(this)
+  }
+
+  componentDidMount () {
+    this.props.registerField(this)
+  }
+
+  validate (): Validity {
+    const field = new Field({
+      rules: this.props.rules,
+      required: this.props.required,
+      value: this.props.value,
+      id: this.props.id
+    })
+    return field.validate()
+  }
+
+  render () {
+    const { children, value } = this.props
+    const validity = this.validate()
+    return (typeof children === 'function' ? children(validity, value) : children)
+  }
+}
+
+export function ValidatorField (props: Omit<Props, 'registerField' | 'unregisterField'>) {
+  return (
+    <Context.Consumer>
+      {(data) => (
+        <ValidationFieldWrapper
+          {...props}
+          registerField={data.registerField}
+          unregisterField={data.unregisterField}
+        />
+      )}
+    </Context.Consumer>
+  )
+}

package/src/validator-wrapper.test.tsx

@@ -0,0 +1,138 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createRef } from 'react'
+import { render } from '@testing-library/react'
+
+import { ValidatorWrapper } from './validator-wrapper'
+import { ValidatorField } from './validator-field'
+import { rules } from './rules'
+
+it('render without child', () => {
+  expect(() => shallow(<ValidatorWrapper />)).toThrowError()
+})
+
+it('check wrapper validator', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} />
+      <ValidatorField rules={[]} />
+    </ValidatorWrapper>
+  ))
+
+  expect(typeof validator.current).toBe('object')
+  expect(typeof validator.current.validate).toBe('function')
+})
+
+it('check getField validator', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} id="test" />
+      <ValidatorField rules={[]} id="test-fields" />
+    </ValidatorWrapper>
+  ))
+  expect(typeof validator.current.getField).toBe('function')
+  const field = validator.current.getField('test')
+
+  expect(typeof field.validate).toBe('function')
+  const fieldValidate = field.validate()
+
+  expect(fieldValidate.isValid).toBe(true)
+  expect(fieldValidate.message).toBe('')
+})
+
+it('check getField undefined field', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} id="test-empty-field" />
+    </ValidatorWrapper>
+  ))
+
+  const field = validator.current.getField('8')
+  expect(field).toBe(null)
+})
+
+it('check stopAtFirstError validator', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator} stopAtFirstError>
+      <ValidatorField rules={[]} value="test" />
+      <ValidatorField rules={rules.email} value="test" />
+      <ValidatorField rules={rules.password} value="" />
+    </ValidatorWrapper>
+  ))
+  const fieldValidate = validator.current.validate()
+  expect(fieldValidate.isValid).toBe(false)
+  expect(fieldValidate.message).toBe('Email is invalid')
+  expect(fieldValidate.errors.length).toBe(1)
+})
+
+it('check unregisterField, registerField', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]} id="test-register-field" />
+    </ValidatorWrapper>
+  ))
+
+  expect(typeof validator.current.registerField).toBe('function')
+  expect(typeof validator.current.unregisterField).toBe('function')
+})
+
+it('check filed in field', () => {
+  const validator = createRef<ValidatorWrapper>()
+  render(
+    <ValidatorWrapper ref={validator}>
+      <ValidatorField rules={[]}>
+        <ValidatorField rules={[]} id="check-validate-field-1" />
+        <ValidatorField rules={[]} id="check-validate-field-2" />
+      </ValidatorField>
+    </ValidatorWrapper>
+  )
+
+  expect(typeof validator.current).toBe('object')
+  expect(typeof validator.current.validate).toBe('function')
+  const result = validator.current.validate()
+  expect(result.isValid).toBe(true)
+})
+
+it('check wrapper in wrapper', () => {
+  const validatorOut = createRef<ValidatorWrapper>()
+  const validatorIn = createRef<ValidatorWrapper>()
+  render((
+    <ValidatorWrapper ref={validatorOut}>
+      <ValidatorField rules={rules.email} value="" />
+      <ValidatorWrapper ref={validatorIn}>
+        <ValidatorField rules={rules.password} value="successpasswword" />
+      </ValidatorWrapper>
+    </ValidatorWrapper>
+  ))
+  expect(validatorIn.current.validate().isValid).toBe(true)
+  expect(validatorOut.current.validate().isValid).toBe(false)
+})
+
+it('check two validators', () => {
+  const validatorSuccess = createRef<ValidatorWrapper>()
+  const validatorFailed = createRef<ValidatorWrapper>()
+  render((
+    <>
+      <ValidatorWrapper ref={validatorSuccess}>
+        <ValidatorField rules={rules.password} value="successpasswword" />
+      </ValidatorWrapper>
+      <ValidatorWrapper ref={validatorFailed}>
+        <ValidatorField rules={rules.email} value="" />
+      </ValidatorWrapper>
+    </>
+  ))
+
+  expect(validatorFailed.current.validate().isValid).toBe(false)
+  expect(validatorSuccess.current.validate().isValid).toBe(true)
+})