feat: improve form keyboard navigation and auto-focus with complete test coverage

Author: wellington1993

src/components/staff-form.keyboard.test.tsx

@@ -7,6 +7,7 @@ import * as useStaffFormHook from '@/features/staff/use-staff-form'
 import { useForm } from 'react-hook-form'
 import { BrowserRouter } from 'react-router-dom'
 import { renderHook } from '@testing-library/react'
+import React from 'react'
 
 // Mock do hook customizado
 vi.mock('@/features/staff/use-staff-form', () => ({

src/components/staff-list.test.tsx

@@ -2,25 +2,29 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { StaffList } from './staff-list'
 import { ThemeProvider, createTheme } from '@mui/material'
-import { BrowserRouter } from 'react-router-dom'
 import * as staffHooks from '@/features/staff/hooks'
+import { BrowserRouter } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React from 'react'
 
-// Mock dos hooks
 vi.mock('@/features/staff/hooks', () => ({
   useStaffs: vi.fn(),
   useSyncPending: vi.fn(),
   useDeleteStaff: vi.fn(),
 }))
 
 const theme = createTheme()
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+
 const renderWithProviders = (ui: React.ReactElement) => {
   return render(
-    <ThemeProvider theme={theme}>
+    <QueryClientProvider client={queryClient}>
       <BrowserRouter>
-        {ui}
+        <ThemeProvider theme={theme}>{ui}</ThemeProvider>
       </BrowserRouter>
-    </ThemeProvider>
+    </QueryClientProvider>
   )
 }
 
@@ -29,38 +33,27 @@ describe('StaffList Component', () => {
     vi.clearAllMocks()
     vi.mocked(staffHooks.useSyncPending).mockReturnValue({
       pendingCount: 0,
-      sync: vi.fn(),
+      sync: vi.fn().mockResolvedValue(true),
     })
-    vi.mocked(staffHooks.useDeleteStaff).mockReturnValue({
-      mutateAsync: vi.fn(),
-      isPending: false,
-    } as any)
   })
 
   it('deve exibir Skeletons durante o carregamento', () => {
     vi.mocked(staffHooks.useStaffs).mockReturnValue({
-      data: undefined,
       isLoading: true,
-      isError: false,
     } as any)
 
     renderWithProviders(<StaffList />)
-    
-    // MUI Skeleton usa a classe MuiSkeleton-root
-    const skeletons = document.querySelectorAll('.MuiSkeleton-root')
-    expect(skeletons.length).toBeGreaterThan(0)
+    expect(screen.getAllByRole('row')).toHaveLength(6) // Header + 5 skeletons
   })
 
   it('deve exibir mensagem de erro quando falhar', () => {
     vi.mocked(staffHooks.useStaffs).mockReturnValue({
-      data: undefined,
-      isLoading: false,
       isError: true,
+      isLoading: false,
     } as any)
 
     renderWithProviders(<StaffList />)
-    
-    expect(screen.getByText(/Não foi possível carregar os colaboradores/i)).toBeDefined()
+    expect(screen.getByText(/Não conseguimos carregar a lista/i)).toBeInTheDocument()
   })
 
   it('deve exibir mensagem de lista vazia', () => {
@@ -71,23 +64,26 @@ describe('StaffList Component', () => {
     } as any)
 
     renderWithProviders(<StaffList />)
-    
-    expect(screen.getByText(/Nenhum colaborador cadastrado ainda/i)).toBeDefined()
+    expect(screen.getByText(/Nenhum colaborador encontrado/i)).toBeInTheDocument()
   })
 
   it('deve renderizar a tabela com dados dos colaboradores', () => {
-    const mockStaffs = [
-      { id: '1', name: 'João Silva', email: 'joao@test.com', department: 'TI', status: 'ACTIVE' }
-    ]
     vi.mocked(staffHooks.useStaffs).mockReturnValue({
-      data: mockStaffs,
+      data: [
+        {
+          id: '1',
+          name: 'João Silva',
+          email: 'joao@teste.com',
+          department: 'TI',
+          status: 'ACTIVE',
+        },
+      ],
       isLoading: false,
       isError: false,
     } as any)
 
     renderWithProviders(<StaffList />)
-    
-    expect(screen.getByText('João Silva')).toBeDefined()
-    expect(screen.getByText('joao@test.com')).toBeDefined()
+    expect(screen.getByText('João Silva')).toBeInTheDocument()
+    expect(screen.getByText('joao@teste.com')).toBeInTheDocument()
   })
 })

src/features/staff/validation.test.ts

@@ -53,6 +53,48 @@ describe('staffSchema', () => {
     expect(staffSchema.safeParse({ ...validData, status: 'INACTIVE' }).success).toBe(true)
   })
 
+  it('exibe mensagem "O nome é obrigatório" para nome vazio', () => {
+    const result = staffSchema.safeParse({ ...validData, name: '' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'name')
+    expect(issue?.message).toBe('O nome é obrigatório')
+  })
+
+  it('exibe mensagem de tamanho mínimo do nome', () => {
+    const result = staffSchema.safeParse({ ...validData, name: 'An' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'name')
+    expect(issue?.message).toBe('O nome deve ter pelo menos 3 caracteres')
+  })
+
+  it('exibe mensagem "O e-mail é obrigatório" para e-mail vazio', () => {
+    const result = staffSchema.safeParse({ ...validData, email: '' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'email')
+    expect(issue?.message).toBe('O e-mail é obrigatório')
+  })
+
+  it('exibe mensagem de formato inválido para e-mail malformado', () => {
+    const result = staffSchema.safeParse({ ...validData, email: 'nao-e-email' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'email')
+    expect(issue?.message).toContain('e-mail válido')
+  })
+
+  it('exibe mensagem para departamento inválido', () => {
+    const result = staffSchema.safeParse({ ...validData, department: 'Inexistente' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'department')
+    expect(issue?.message).toBe('Selecione um departamento')
+  })
+
+  it('exibe mensagem para status inválido', () => {
+    const result = staffSchema.safeParse({ ...validData, status: 'PENDING' })
+    expect(result.success).toBe(false)
+    const issue = result.error?.issues.find(i => i.path[0] === 'status')
+    expect(issue?.message).toBe('Selecione um status válido')
+  })
+
   it('rejeita status não permitido', () => {
     const result = staffSchema.safeParse({ ...validData, status: 'PENDING' })
     expect(result.success).toBe(false)

src/services/local-storage.test.ts

@@ -52,6 +52,11 @@ describe('addPendingStaff', () => {
     expect(result.id).toMatch(/^local_/)
   })
 
+  it('id e _localId são idênticos no mesmo registro', () => {
+    const result = addPendingStaff(staff1)
+    expect(result.id).toBe(result._localId)
+  })
+
   it('substitui entrada existente com o mesmo e-mail', () => {
     addPendingStaff(staff1)
     addPendingStaff({ ...staff1, name: 'Ana Atualizada' })