From 948f8d8b57e7efad4b675492559a8430394f2377 Mon Sep 17 00:00:00 2001 From: eran Date: Thu, 30 Nov 2023 08:37:22 +0100 Subject: [PATCH 01/13] Rewrote most of the components, but still WIP --- .eslintrc | 7 +- __tests__/suits/Area.test.tsx | 455 - __tests__/suits/Provider.test.tsx | 188 - babel.config.js | 14 - index.html | 12 + jest.config.json | 4 - jest.config.ts | 8 + package-lock.json | 11670 ---------------- package.json | 90 +- pnpm-lock.yaml | 5296 +++++++ preview/App.tsx | 37 + preview/index.tsx | 8 + preview/vite.config.ts | 9 + setupTests.ts | 5 - src/AreaScope.ts | 22 - src/FieldManager.ts | 25 + src/LocaleManager.ts | 39 + src/Messages.ts | 4 - src/ProviderScope.ts | 10 - src/Rule.ts | 5 +- src/RuleOptions.ts | 4 - src/ValidationContext.ts | 11 + src/ValidationHandlerFn.ts | 1 + src/Validator.ts | 274 +- src/ValidatorContext.ts | 15 - src/common/utils.ts | 10 +- src/components/ValidationArea.tsx | 73 + src/components/ValidationField.tsx | 162 + src/components/ValidatorArea.tsx | 305 - src/components/ValidatorProvider.tsx | 185 - src/index.ts | 23 +- src/locale/en.ts | 18 +- src/locale/nl.ts | 18 +- src/rules/IncorrectArgumentTypeError.ts | 1 - src/rules/activeUrl.ts | 12 +- src/rules/checked.ts | 11 +- src/rules/index.ts | 1 - src/rules/max.ts | 21 +- src/rules/min.ts | 21 +- src/rules/regex.ts | 15 +- src/rules/required.ts | 10 +- {__tests__ => tests}/common/tick.ts | 0 tests/mocks/fileMock.js | 4 + {__tests__ => tests}/suits/Validator.test.tsx | 0 tests/suits/ValidatorArea.test.tsx | 26 + tests/suits/ValidatorField.test.tsx | 38 + .../suits/rules/activeUrl.test.tsx | 0 .../suits/rules/checked.test.tsx | 0 {__tests__ => tests}/suits/rules/max.test.tsx | 0 {__tests__ => tests}/suits/rules/min.test.tsx | 0 .../suits/rules/regex.test.tsx | 0 .../suits/rules/required.test.tsx | 0 {__tests__ => tests}/suits/utils/dom.test.ts | 0 tsconfig-build.json | 2 +- tsconfig.json | 42 +- vite.config.ts | 21 + 56 files changed, 5925 insertions(+), 13307 deletions(-) delete mode 100644 __tests__/suits/Area.test.tsx delete mode 100644 __tests__/suits/Provider.test.tsx delete mode 100644 babel.config.js create mode 100644 index.html delete mode 100644 jest.config.json create mode 100644 jest.config.ts delete mode 100644 package-lock.json create mode 100644 pnpm-lock.yaml create mode 100644 preview/App.tsx create mode 100644 preview/index.tsx create mode 100644 preview/vite.config.ts delete mode 100644 src/AreaScope.ts create mode 100644 src/FieldManager.ts create mode 100644 src/LocaleManager.ts delete mode 100644 src/Messages.ts delete mode 100644 src/ProviderScope.ts delete mode 100644 src/RuleOptions.ts create mode 100644 src/ValidationContext.ts create mode 100644 src/ValidationHandlerFn.ts delete mode 100644 src/ValidatorContext.ts create mode 100644 src/components/ValidationArea.tsx create mode 100644 src/components/ValidationField.tsx delete mode 100644 src/components/ValidatorArea.tsx delete mode 100644 src/components/ValidatorProvider.tsx delete mode 100644 src/rules/IncorrectArgumentTypeError.ts rename {__tests__ => tests}/common/tick.ts (100%) create mode 100644 tests/mocks/fileMock.js rename {__tests__ => tests}/suits/Validator.test.tsx (100%) create mode 100644 tests/suits/ValidatorArea.test.tsx create mode 100644 tests/suits/ValidatorField.test.tsx rename {__tests__ => tests}/suits/rules/activeUrl.test.tsx (100%) rename {__tests__ => tests}/suits/rules/checked.test.tsx (100%) rename {__tests__ => tests}/suits/rules/max.test.tsx (100%) rename {__tests__ => tests}/suits/rules/min.test.tsx (100%) rename {__tests__ => tests}/suits/rules/regex.test.tsx (100%) rename {__tests__ => tests}/suits/rules/required.test.tsx (100%) rename {__tests__ => tests}/suits/utils/dom.test.ts (100%) create mode 100644 vite.config.ts diff --git a/.eslintrc b/.eslintrc index f8e9646..9639f92 100644 --- a/.eslintrc +++ b/.eslintrc @@ -15,7 +15,7 @@ "node": true, "es6": true }, - "ignorePatterns": ["dist", "setupTests.ts", "babel.config.js"], + "ignorePatterns": ["dist", "setupTests.ts", "vite.config.ts"], "rules": { "comma-dangle": "off", "class-methods-use-this": "off", @@ -24,6 +24,9 @@ "global-require": "off", "quotes": ["error", "single", { "allowTemplateLiterals": true }], "@typescript-eslint/indent": ["error", 4], - "@typescript-eslint/no-non-null-assertion": ["off"] + "@typescript-eslint/no-non-null-assertion": ["off"], + "@typescript-eslint/no-explicit-any": ["off"], + "react/react-in-jsx-scope": "off", + "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }] } } diff --git a/__tests__/suits/Area.test.tsx b/__tests__/suits/Area.test.tsx deleted file mode 100644 index 237972a..0000000 --- a/__tests__/suits/Area.test.tsx +++ /dev/null @@ -1,455 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { - ValidatorArea, - ValidatorAreaProps, - Validator, - ValidatorProvider, - ValidatorProviderProps, - ProviderScope, - required -} from '../../src'; -import tick from '../common/tick'; - -describe('test ValidatorProvider', () => { - beforeEach(() => { - Validator.extend('passes_not', { - passed(): boolean { - return false; - }, - message(): string { - return 'not passed'; - } - }); - Validator.extend('required', required); - - Validator.extend('long_wait', { - async passed(): Promise { - return new Promise((resolve: (value: boolean) => void): void => { - setTimeout(() => { - resolve(true); - }, 100); - }) - }, - message(): string { - return 'test'; - } - }); - }); - - afterEach(() => { - jest.useRealTimers(); - }); - - it('should render input', () => { - const area = mount( - - - - ); - - expect(area.find('input')).toBeDefined(); - }); - - it('should render inputs with callback as child', () => { - const area = mount( - - {() => ( - - )} - - ); - - expect(area.find('input')).toBeDefined(); - }) - - it('should throw an exception when no name provided', () => { - const area = () => { - mount( - - {() => ( - <> - - - - )} - - ); - } - expect(() => area()).toThrow(); - }); - - it('should index (nested) inputs', () => { - const area = mount( - - {() => ( - <> - <> -
- - - <> -
- - )} -
- ); - - expect(area.instance().getInputRefs().length).toBe(4); - }); - - it('should apply rules on blur', async () => { - const area = mount( - - - - ); - - area.find('input').at(0).simulate('blur'); - await tick(); - expect(area.state().errors[0]).toBe('Not passed'); - }); - - it('should not apply rules on blur when non-blurrable element', () => { - const area = mount( - - - - ); - - area.find('canvas').at(0).simulate('blur'); - expect(area.state().errors.length).toBe(0); - }); - - it('should render error when area dirty', async () => { - const area = mount( - - {({errors}) => { - return ( - <> - - {!!errors.length &&
{errors[0]}
} - - ); - }} -
- ); - - area.find('input').simulate('blur'); - await tick(); - area.update(); - expect(area.find('div').text()).toBe('Not passed'); - }) - - it('should call element\'s provided blur along validator blur', () => { - const mockFn = jest.fn(); - - const area = mount( - - - - ); - - area.find('input').simulate('blur'); - expect(mockFn).toBeCalled(); - }); - - it('should call element\'s provided onChange along validator onChange', () => { - const mockFn = jest.fn(); - - const area = mount( - - - - ); - - area.find('input').simulate('change'); - expect(mockFn).toBeCalled(); - }); - - it('should get all input refs from the provider', async () => { - Validator.extend('test_all', (validator: Validator) => ({ - passed(): boolean { - return validator.refs().length === 2; - }, - message(): string { - return ''; - } - })) - const mockFn = jest.fn(); - - const provider = mount( - - {({validate}: ProviderScope) => ( - <> - - - - - - -