test(Form): fix race conditions in touchedFields and dirtyFields

Author: benjamincanac

test/components/Form.spec.ts

@@ -1,5 +1,5 @@
 import { nextTick, watch } from 'vue'
-import { describe, expect, it, beforeEach, vi } from 'vitest'
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { flushPromises } from '@vue/test-utils'
 import * as z from 'zod'
@@ -148,6 +148,19 @@ describe('Form', () => {
       })
       form = wrapper.setupState.form.value
       state = wrapper.setupState.state
+
+      // Wait for all mounting and initialization to complete
+      await nextTick()
+      await flushPromises()
+
+      // Ensure form state is clean
+      form.touchedFields.clear()
+      form.dirtyFields.clear()
+      form.blurredFields.clear()
+    })
+
+    afterEach(() => {
+      wrapper?.unmount()
     })
 
     it('setErrors works', async () => {
@@ -327,16 +340,18 @@ describe('Form', () => {
       const email = wrapper.find('#email')
 
       email.trigger('focus')
+      await nextTick()
       await flushPromises()
 
       expect(form.touchedFields.has('email')).toBe(true)
       expect(form.touchedFields.has('password')).toBe(false)
     })
 
-    it('touchedFields works', async () => {
+    it('dirtyFields works', async () => {
       const email = wrapper.find('#email')
 
       email.trigger('change')
+      await nextTick()
       await flushPromises()
 
       expect(form.dirtyFields.has('email')).toBe(true)
@@ -350,6 +365,7 @@ describe('Form', () => {
       const email = wrapper.find('#email')
 
       email.trigger('blur')
+      await nextTick()
       await flushPromises()
 
       expect(form.blurredFields.has('email')).toBe(true)
@@ -363,6 +379,7 @@ describe('Form', () => {
       watch(() => form.touchedFields, mockWatchCallback, { deep: true })
 
       email.trigger('focus')
+      await nextTick()
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalled()
     })
@@ -374,6 +391,7 @@ describe('Form', () => {
       watch(() => form.touchedFields, mockWatchCallback, { deep: true })
 
       email.trigger('change')
+      await nextTick()
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalled()
     })
@@ -385,6 +403,7 @@ describe('Form', () => {
       watch(() => form.blurredFields, mockWatchCallback, { deep: true })
 
       email.trigger('blur')
+      await nextTick()
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalled()
     })
@@ -395,6 +414,7 @@ describe('Form', () => {
       watch(() => form.dirtyFields, mockWatchCallback, { deep: true })
 
       email.trigger('change')
+      await nextTick()
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalled()
     })
@@ -404,6 +424,7 @@ describe('Form', () => {
       expect(form.dirty).toBe(false)
 
       email.trigger('change')
+      await nextTick()
       await flushPromises()
 
       expect(form.dirty).toBe(true)
@@ -429,6 +450,19 @@ describe('Form', () => {
       })
       form = wrapper.setupState.form.value
       state = wrapper.setupState.state
+
+      // Wait for all mounting and initialization to complete
+      await nextTick()
+      await flushPromises()
+
+      // Ensure form state is clean
+      form.touchedFields.clear()
+      form.dirtyFields.clear()
+      form.blurredFields.clear()
+    })
+
+    afterEach(() => {
+      wrapper?.unmount()
     })
 
     it('submit error works', async () => {
@@ -483,6 +517,19 @@ describe('Form', () => {
       vi.clearAllMocks()
       wrapper = await renderForm({ fixture: 'FormNested', props: { onSubmit, onError } })
       form = wrapper.setupState.form.value
+
+      // Wait for all mounting and initialization to complete
+      await nextTick()
+      await flushPromises()
+
+      // Ensure form state is clean
+      form.touchedFields.clear()
+      form.dirtyFields.clear()
+      form.blurredFields.clear()
+    })
+
+    afterEach(() => {
+      wrapper?.unmount()
     })
 
     it('getErrors returns nested errors', async () => {