fix: reset errors correctly on multiple change

leonied7 · May 17, 2024 · 71c2cce · 71c2cce
1 parent eead036
commit 71c2cce
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/components/ValidationProvider.vue b/src/components/ValidationProvider.vue
@@ -281,6 +281,11 @@ onBeforeUnmount(() => {
 provide(registerSymbol, register);
 provide(validateSymbol, async (name: string) => {
   const { errors } = await validate(name);
+  // скидываем ошибки отдельно, т.к. одновременно могу валидироваться несколько полей
+  // валидация асинхронная ошибки могут наслаиваться друг на друга
+  fieldComponents.value.forEach(({ resetErrors }) => {
+    resetErrors();
+  });
   setErrorsList(errors);
 });
 provide(getFieldDefaultValueSymbol, getFieldDefaultValue);

diff --git a/tests/unit/ValidationFieldArray.test.js b/tests/unit/ValidationFieldArray.test.js
@@ -640,11 +640,41 @@ describe('ValidationFieldArray', () => {
       }
     });
     await nextTick();
+    await wrapper.find('button[type=submit]').trigger('click');
+    // wait async yup validate
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    await nextTick();
+    await nextTick();
 
     const formInfoWrapper = wrapper.findComponent(FormInfo);
 
     await wrapper.find('#arrayChange').trigger('click');
+    await nextTick();
+    await nextTick();
 
+    expect(formInfoWrapper.props().errors).toEqual({
+      arrayField: [],
+      'arrayField.0.firstName': [
+        { message: 'invalid', resetBehaviour: ON_FORM_CHANGE, type: 'optionality' }
+      ],
+      'arrayField.0.id': [],
+      'arrayField.0.type': [],
+      'arrayField.1.firstName': [
+        { message: 'invalid', resetBehaviour: ON_FORM_CHANGE, type: 'required' }
+      ],
+      'arrayField.1.id': [],
+      'arrayField.1.type': [],
+      'arrayField.2.firstName': [
+        { message: 'invalid', resetBehaviour: ON_FORM_CHANGE, type: 'required' }
+      ],
+      'arrayField.2.id': [],
+      'arrayField.2.type': [],
+      'my-input': [],
+      'my.nested.value': []
+    });
     expect(formInfoWrapper.props().values).toEqual({
       my: {
         nested: {
@@ -656,6 +686,14 @@ describe('ValidationFieldArray', () => {
         {
           id: 42,
           firstName: undefined
+        },
+        {
+          firstName: '',
+          id: 1
+        },
+        {
+          firstName: '',
+          id: 2
         }
       ]
     });

diff --git a/tests/unit/ValidationForm.vue b/tests/unit/ValidationForm.vue
@@ -130,7 +130,11 @@
             <button id="swap" type="button" @click="swap(0, 2)">Swap</button>
             <button id="move" type="button" @click="move(0, 2)">Move</button>
             <button id="remove" type="button" @click="remove(1)">Remove</button>
-            <button id="arrayChange" type="button" @click="onChange([{ id: 42 }])">
+            <button
+              id="arrayChange"
+              type="button"
+              @click="onChange([{ id: 42 }, { id: 1, firstName: '' }, { id: 2, firstName: '' }])"
+            >
               Change array
             </button>
           </template>