change ValidationFieldArray tests, merge conflicts

leonied7 · Nov 8, 2024 · 6d79659 · 6d79659
1 parent 308f3b7
commit 6d79659
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/tests/unit/ValidationFieldArray.test.js b/tests/unit/ValidationFieldArray.test.js
@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { yupResolver } from '@vue-validate-form/resolvers';
 import { nextTick } from 'vue';
@@ -21,14 +21,17 @@ const resolver = yupResolver(
 
 describe('ValidationFieldArray', () => {
   let wrapper;
-  let handleFocus;
 
   const createComponent = ({ props } = {}) => {
     wrapper = mount(ValidationForm, {
       props,
       attachTo: document.body
     });
-    handleFocus = vi.spyOn(wrapper.vm, 'handleFocus');
+  };
+
+  const focusTest = (name) => {
+    const emits = wrapper.emitted().focus;
+    expect(emits[emits.length - 1]).toContainEqual({ name });
   };
 
   it('should render array fields', async () => {
@@ -149,7 +152,7 @@ describe('ValidationFieldArray', () => {
     expect(wrapper.findAllComponents(BaseInput).length).toBe(3);
 
     await wrapper.find('#append').trigger('click');
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.1.firstName' });
+    focusTest('arrayField.1.firstName');
 
     const baseInputWrappers = wrapper.findAllComponents(BaseInput);
     expect(baseInputWrappers.length).toBe(4);
@@ -205,7 +208,8 @@ describe('ValidationFieldArray', () => {
     });
 
     await wrapper.find('#remove').trigger('click');
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.0.firstName' });
+
+    focusTest('arrayField.0.firstName');
 
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
@@ -276,7 +280,7 @@ describe('ValidationFieldArray', () => {
     });
 
     await wrapper.find('#prepend').trigger('click');
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.0.firstName' });
+    focusTest('arrayField.0.firstName');
 
     expect(wrapper.findComponent(FormInfo).props().errors).toEqual({
       'my.nested.value': [],
@@ -359,7 +363,7 @@ describe('ValidationFieldArray', () => {
       ]
     });
     expect(wrapper.findComponent(FormInfo).props().values.arrayField[1].type).toEqual(undefined);
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.1.firstName' });
+    focusTest('arrayField.1.firstName');
     expect(wrapper.findAllComponents(BaseInput).at(3).props().modelValue).toBe('insert');
   });
 
@@ -413,7 +417,7 @@ describe('ValidationFieldArray', () => {
     const formInfoWrapper = wrapper.findComponent(FormInfo);
 
     await wrapper.find('#swap').trigger('click');
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.2.firstName' });
+    focusTest('arrayField.2.firstName');
 
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],
@@ -547,7 +551,7 @@ describe('ValidationFieldArray', () => {
 
     await wrapper.find('#move').trigger('click');
 
-    expect(handleFocus).toHaveBeenLastCalledWith({ name: 'arrayField.2.firstName' });
+    focusTest('arrayField.2.firstName');
 
     expect(formInfoWrapper.props().errors).toEqual({
       'my.nested.value': [],

diff --git a/tests/unit/ValidationForm.vue b/tests/unit/ValidationForm.vue
@@ -103,7 +103,10 @@
             >
               <ValidationField :name="`${arrayName}.${index}.id`" />
               <ValidationField :name="`${arrayName}.${index}.type`" />
-              <ValidationField :name="`${arrayName}.${index}.firstName`">
+              <ValidationField
+                :name="`${arrayName}.${index}.firstName`"
+                @should-focus="$emit('focus', $event)"
+              >
                 <template
                   #default="{
                     modelValue,
@@ -267,14 +270,12 @@ export default {
   emits: {
     submit: null,
     dirty: null,
-    change: null
+    change: null,
+    focus: null
   },
   methods: {
     onSubmit(values, options) {
       this.$emit('submit', values, options);
-    },
-    handleFocus({ name }) {
-      document.querySelector(`[name="${name}"]`)?.focus();
     }
   }
 };