fix: program validation on multi fields IF-1719

skbkontur · Jun 10, 2024 · 2b05d19 · 2b05d19
1 parent 2b5b6b4
commit 2b05d19
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 4 deletions.
diff --git a/packages/react-ui-validations/src/ValidationWrapperInternal.tsx b/packages/react-ui-validations/src/ValidationWrapperInternal.tsx
@@ -249,10 +249,12 @@ export class ValidationWrapperInternal extends React.Component<
     }
 
     return new Promise((resolve) => {
-      this.setState({ validation }, resolve);
-      if (Boolean(current) !== Boolean(validation)) {
-        this.context.onValidationUpdated(this, !validation);
-      }
+      this.setState({ validation }, () => {
+        if (Boolean(current) !== Boolean(validation)) {
+          this.context.onValidationUpdated(this, !validation);
+        }
+        resolve();
+      });
     });
   }
 

diff --git a/packages/react-ui-validations/tests/ValidationContainer.test.tsx b/packages/react-ui-validations/tests/ValidationContainer.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import {
+  Button,
   ComboBox,
   DatePicker,
   FileUploader,
@@ -15,6 +16,7 @@ import {
   FocusMode,
   ValidationContainer,
   ValidationContainerProps,
+  ValidationInfo,
   ValidationsFeatureFlagsContext,
   ValidationWrapper,
 } from '../src';
@@ -159,4 +161,88 @@ describe('ValidationContainer', () => {
       expect(screen.getByRole('textbox')).not.toHaveFocus();
     });
   });
+
+  describe('on validation updated', () => {
+    const renderValidationContainer = (
+      children: React.ReactElement,
+      props?: ValidationContainerProps,
+    ): React.RefObject<ValidationContainer> => {
+      const containerRef = React.createRef<ValidationContainer>();
+      render(
+        <ValidationContainer ref={containerRef} {...props}>
+          {children}
+        </ValidationContainer>,
+      );
+      return containerRef;
+    };
+    const validate = (value: string) => {
+      return value.includes('bad') ? ({ message: 'Ошибка', type: 'submit' } as ValidationInfo) : null;
+    };
+
+    it('works with one field', async () => {
+      const ValidationForm = () => {
+        const [value1, setValue1] = React.useState('bad');
+
+        return (
+          <>
+            <ValidationWrapper validationInfo={validate(value1)}>
+              <Input value={value1} onValueChange={setValue1} />
+            </ValidationWrapper>
+            <Button onClick={() => setValue1('good')}>Repair</Button>
+          </>
+        );
+      };
+
+      const onValidationUpdated = jest.fn();
+      const containerRef = renderValidationContainer(<ValidationForm />, { onValidationUpdated });
+      await containerRef.current?.submit();
+      const errors = await screen.findAllByText('Ошибка');
+      expect(errors.length).toBe(1);
+
+      screen.getByRole('button', { name: 'Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(true);
+    });
+
+    it('works with multiple fields', async () => {
+      const ValidationForm = () => {
+        const [value1, setValue1] = React.useState('bad');
+        const [value2, setValue2] = React.useState('bad');
+        const validationContainerRef = React.useRef<ValidationContainer>(null);
+
+        return (
+          <>
+            <ValidationWrapper validationInfo={validate(value1)}>
+              <Input value={value1} onValueChange={setValue1} />
+            </ValidationWrapper>
+            <ValidationWrapper validationInfo={validate(value2)}>
+              <Input value={value2} onValueChange={setValue2} />
+            </ValidationWrapper>
+            <Button onClick={() => setValue1('good')}>Partial Repair</Button>
+            <Button
+              onClick={() => {
+                setValue1('good');
+                setValue2('good');
+              }}
+            >
+              Repair
+            </Button>
+            <Button onClick={() => validationContainerRef.current?.submit()}>Submit</Button>
+          </>
+        );
+      };
+
+      const onValidationUpdated = jest.fn();
+      const containerRef = renderValidationContainer(<ValidationForm />, { onValidationUpdated });
+      await containerRef.current?.submit();
+
+      const errors = await screen.findAllByText('Ошибка');
+      expect(errors.length).toBe(1);
+
+      screen.getByRole('button', { name: 'Partial Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(false);
+
+      screen.getByRole('button', { name: 'Repair' }).click();
+      expect(onValidationUpdated).toBeCalledWith(true);
+    });
+  });
 });