fix: add fixes + tests (#15)

gravity-ui · Mar 28, 2023 · 80113dd · 80113dd
1 parent c664193
commit 80113dd
Show file tree

Hide file tree

Showing 31 changed files with 15,581 additions and 8,266 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -8,4 +8,10 @@ module.exports = {
     transformIgnorePatterns: ['node_modules/(?!(@gravity-ui)/)'],
     coverageDirectory: './coverage',
     collectCoverageFrom: ['src/**/*.{ts,tsx}', '!**/__stories__/**/*', '!**/*/*.stories.{ts,tsx}'],
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: ['<rootDir>/test-utils/setup-tests-after.ts'],
+    moduleNameMapper: {
+        '\\.(css|less|scss|sass)$': 'jest-transform-css',
+    },
+    testMatch: ['**/*.test.[jt]s?(x)'],
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "lint:js": "eslint src --quiet",
     "lint:prettier": "prettier --check 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
     "lint:styles": "stylelint 'src/**/*.scss'",
-    "typecheck": "tsc -p src --noEmit",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
     "build": "gulp",
     "build-storybook": "build-storybook",
     "dev": "start-storybook -p 6006",
@@ -42,10 +43,10 @@
     "lodash": "^4.17.20"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.0",
-    "@commitlint/config-conventional": "^17.0.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
     "@gravity-ui/eslint-config": "^2.0.0",
     "@gravity-ui/prettier-config": "^1.0.1",
     "@gravity-ui/stylelint-config": "^2.0.0",
@@ -54,6 +55,9 @@
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.5.16",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.180",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -67,6 +71,9 @@
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^6.0.0-alpha.1",
     "husky": "^7.0.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-transform-css": "^6.0.1",
     "monaco-editor": "^0.30.1",
     "monaco-editor-webpack-plugin": "^6.0.0",
     "npm-run-all": "^4.1.5",
@@ -83,6 +90,7 @@
     "style-loader": "^2.0.0",
     "stylelint": "^14.15.0",
     "stylelint-scss": "^4.2.0",
+    "ts-jest": "^29.0.5",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {

diff --git a/src/lib/core/components/Form/Controller.tsx b/src/lib/core/components/Form/Controller.tsx
@@ -3,9 +3,16 @@ import _ from 'lodash';
 import {isCorrectSpec} from '../../helpers';
 import {Spec} from '../../types';
 
-import {useComponents, useDynamicFormsCtx, useField, useRender, useValidate} from './hooks';
-import {useSearch} from './hooks/useSearch';
-import {FieldValue, ValidateError} from './types';
+import {
+    useComponents,
+    useControllerMirror,
+    useDynamicFormsCtx,
+    useField,
+    useRender,
+    useSearch,
+    useValidate,
+} from './hooks';
+import {ControllerMirror, FieldValue, ValidateError} from './types';
 
 export interface ControllerProps<Value extends FieldValue, SpecType extends Spec> {
     spec: SpecType;
@@ -28,7 +35,7 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     parentOnChange,
     parentOnUnmount,
 }: ControllerProps<Value, SpecType>) => {
-    const {tools} = useDynamicFormsCtx();
+    const {tools, __mirror} = useDynamicFormsCtx();
     const {inputEntity, Layout} = useComponents(spec);
     const render = useRender({name, spec, inputEntity, Layout});
     const validate = useValidate(spec);
@@ -43,6 +50,18 @@ export const Controller = <Value extends FieldValue, SpecType extends Spec>({
     });
     const withSearch = useSearch(spec, renderProps.input.value, name);
 
+    useControllerMirror(
+        name,
+        {
+            useComponents: {inputEntity, Layout},
+            useRender: render,
+            useValidate: validate,
+            useField: renderProps,
+            useSearch: withSearch,
+        } as ControllerMirror,
+        __mirror,
+    );
+
     if (_.isString(name) && isCorrectSpec(spec)) {
         return withSearch(render(renderProps));
     }

diff --git a/src/lib/core/components/Form/DynamicField.tsx b/src/lib/core/components/Form/DynamicField.tsx
@@ -8,8 +8,15 @@ import {isCorrectSpec} from '../../helpers';
 import {Spec} from '../../types';
 
 import {Controller} from './Controller';
-import {useCreateContext, useCreateSearchContext, useSearchStore, useStore} from './hooks';
-import {DynamicFormConfig, FieldValue} from './types';
+import {
+    useCreateContext,
+    useCreateSearchContext,
+    useDynamicFieldMirror,
+    useIntegrationFF,
+    useSearchStore,
+    useStore,
+} from './hooks';
+import {DynamicFormConfig, FieldValue, WonderMirror} from './types';
 import {getDefaultSearchFunction, isCorrectConfig} from './utils';
 
 export interface DynamicFieldProps {
@@ -18,22 +25,31 @@ export interface DynamicFieldProps {
     config: DynamicFormConfig;
     Monaco?: React.ComponentType<MonacoEditorProps>;
     search?: string | ((spec: Spec, input: FieldValue, name: string) => boolean);
+    __mirror?: WonderMirror;
 }
 
-export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, Monaco, search}) => {
+export const DynamicField: React.FC<DynamicFieldProps> = ({
+    name,
+    spec,
+    config,
+    Monaco,
+    search,
+    __mirror,
+}) => {
     const DynamicFormsCtx = useCreateContext();
     const SearchContext = useCreateSearchContext();
-    const {tools, watcher} = useStore(name);
-
-    const {setField, removeField, isHiddenField} = useSearchStore(name);
+    const {tools, store} = useStore(name);
+    const watcher = useIntegrationFF(store);
+    const {store: searchStore, setField, removeField, isHiddenField} = useSearchStore();
 
     const context = React.useMemo(
         () => ({
             config,
             Monaco: isValidElementType(Monaco) ? Monaco : undefined,
             tools,
+            __mirror,
         }),
-        [tools, config, Monaco],
+        [tools, config, Monaco, __mirror],
     );
 
     const searchContext = React.useMemo(
@@ -51,6 +67,15 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({name, spec, config, M
         [name, spec, config],
     );
 
+    useDynamicFieldMirror(
+        {
+            useStore: {tools, store},
+            useIntegrationFF: watcher,
+            useSearchStore: {store: searchStore, setField, removeField, isHiddenField},
+        },
+        __mirror,
+    );
+
     if (correctParams) {
         return (
             <DynamicFormsCtx.Provider value={context}>