corrige smoke test: botao cancelar no passo 0 do formulario

No passo 0 o botão exibe 'Cancelar', não 'Voltar'.
'Voltar' só aparece no passo 1.

Author: wellington1993

README.md

@@ -1,61 +1,59 @@
 # Flugo Staff Manager
 
-Gerenciador de colaboradores desenvolvido com foco em performance, UX resiliente e suporte offline.
+Gerenciador de colaboradores feito com React + Firebase. Formulário multi-etapa com rascunho automático e sincronização com o Firestore.
 
-A aplicação utiliza um formulário multi-etapa com persistência de rascunho e sincronização automática com o Firebase Firestore.
-
-## 🚀 Demo
-Produção na Vercel: [https://flugo-employees-theta.vercel.app](https://flugo-employees-theta.vercel.app)
+Demo: [https://flugo-employees-theta.vercel.app](https://flugo-employees-theta.vercel.app)
 
 ---
 
-## 🛠 Tech Stack
-- **Framework:** React 19 + TypeScript + Vite
-- **UI:** Material UI v7 + Emotion
-- **State & Data:** TanStack Query (React Query) v5
-- **Forms:** React Hook Form + Zod
-- **Backend:** Firebase Firestore
-- **Roteamento:** React Router v7
+## Stack
 
-## ✨ Diferenciais Técnicos
-- **Optimistic Updates:** Feedback instantâneo na UI ao cadastrar, sem esperar resposta do servidor.
-- **Offline-First:** Persistência nativa do Firestore (IndexedDB) + Fallback em LocalStorage para garantir que dados nunca se percam.
-- **Draft Persistence:** Rascunho automático do formulário no LocalStorage (evita perda de dados ao atualizar a página).
-- **Skeleton Loading:** Transições fluidas e sem saltos de layout durante o carregamento inicial.
+- React 19 + TypeScript + Vite
+- Material UI v7 + Emotion
+- TanStack Query v5
+- React Hook Form + Zod
+- Firebase Firestore
+- React Router v7
 
 ---
 
-## 📦 Como Rodar
+## Como rodar
+
+**Localmente**
+
+```bash
+npm install
+# configure o .env com base no .env.example
+npm run dev
+# http://localhost:5173
+```
 
-### Localmente
-1. Instale as dependências: `npm install`
-2. Configure o `.env` (baseie-se no `.env.example`)
-3. Inicie o dev: `npm run dev` (disponível em `http://localhost:5173`)
+**Com Docker**
 
-### Com Docker
 ```bash
 docker compose up --build
+# http://localhost:3000
 ```
-Disponível em `http://localhost:3000`.
 
 ---
 
-## 🧪 Testes
-O projeto conta com uma suíte de testes robusta:
-- **Unitários (Vitest):** Lógica de negócio, validações e hooks.
-  - `npm run test`
-- **E2E (Playwright):** Fluxo real de usuário e integração.
-  - `npm run test:e2e`
+## Testes
+
+```bash
+npm run test        # unitários (Vitest)
+npm run test:e2e    # E2E (Playwright)
+```
 
 ---
 
-## ⚙️ Configuração do Firebase
-1. Crie um projeto no Firebase Console.
-2. Ative o **Firestore Database** em modo de teste.
-3. Obtenha as chaves web e configure no seu `.env`.
+## Firebase
+
+1. Crie um projeto no Firebase Console
+2. Ative o Firestore em modo de teste
+3. Copie as chaves web para o `.env`
+
+As regras de segurança estão em `firestore.rules`. Para publicar:
 
-### Regras do Firestore
-As regras estão no arquivo `firestore.rules`. Para deploy:
 ```bash
 npx firebase-tools deploy --only firestore:rules --project SEU_ID
 ```

src/components/staff-list.tsx

@@ -37,10 +37,6 @@ const columns: { id: keyof Staff; label: string; align?: TableCellProps['align']
   { id: 'status', label: 'Status', align: 'center' },
 ]
 
-/**
- * Componente de Listagem de Colaboradores.
- * Focado em legibilidade, performance e feedback de sincronização.
- */
 export function StaffList() {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
@@ -50,7 +46,6 @@ export function StaffList() {
   const { order, orderBy, createSortHandler } = useSortTable('name', setPage)
   const { pendingCount, sync } = useSyncPending()
 
-  // Sincronização automática ao carregar a página se houver itens offline
   useEffect(() => {
     if (pendingCount > 0) {
       sync().catch(console.error)
@@ -62,7 +57,6 @@ export function StaffList() {
 
   return (
     <Box sx={{ p: isMobile ? 1 : 2 }}>
-      {/* Cabeçalho da Página */}
       <Stack
         direction={{ xs: 'column', sm: 'row' }}
         alignItems={{ xs: 'stretch', sm: 'center' }}
@@ -97,7 +91,6 @@ export function StaffList() {
         </Button>
       </Stack>
 
-      {/* Tabela de Dados */}
       <TableContainer 
         component={Paper} 
         elevation={0} 
@@ -145,7 +138,6 @@ export function StaffList() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {/* Estado de Carregamento (Skeleton) */}
             {isLoading &&
               Array.from(new Array(5)).map((_, index) => (
                 <TableRow key={index}>
@@ -167,7 +159,6 @@ export function StaffList() {
                 </TableRow>
               ))}
 
-            {/* Estado de Erro */}
             {isError && (
               <TableRow>
                 <TableCell colSpan={4} align="center" sx={{ py: 8 }}>
@@ -181,7 +172,6 @@ export function StaffList() {
               </TableRow>
             )}
 
-            {/* Lista Vazia */}
             {!isLoading && !isError && !sorted.length && (
               <TableRow>
                 <TableCell colSpan={4} align="center" sx={{ py: 10 }}>
@@ -195,7 +185,6 @@ export function StaffList() {
               </TableRow>
             )}
 
-            {/* Dados da Tabela */}
             {paginated.map((row) => (
               <TableRow key={row.id} hover sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                 <TableCell>
@@ -237,7 +226,7 @@ export function StaffList() {
                 </TableCell>
                 <TableCell align="center">
                   {row._pendingSync ? (
-                    <Tooltip title="Salvo localmente, aguardando conexão para enviar ao servidor">
+                    <Tooltip title="Salvo localmente, aguardando conexão">
                       <Chip
                         icon={<SyncIcon sx={{ fontSize: 14 }} />}
                         label="Sincronizando"
@@ -267,7 +256,6 @@ export function StaffList() {
           </TableBody>
         </Table>
 
-        {/* Paginação */}
         <TablePagination
           component="div"
           count={sorted.length}

src/features/staff/use-staff-form.test.ts

@@ -60,7 +60,7 @@ describe('useStaffForm', () => {
     })
   })
 
-  describe('handleNext — validação de e-mail duplicado', () => {
+  describe('handleNext', () => {
     it('bloqueia avanço e seta erro quando e-mail já existe', async () => {
       vi.mocked(staffHooks.useStaffs).mockReturnValue({
         data: [{ id: '1', email: 'ana@empresa.com', name: 'Ana', department: 'TI', status: 'ACTIVE' }],

src/features/staff/use-staff-form.ts

@@ -11,10 +11,6 @@ const STEP_FIELDS: Array<Array<keyof StaffSchema>> = [
   ['department'],
 ]
 
-/**
- * Hook customizado para gerenciar o formulário de cadastro de funcionários.
- * Segue boas práticas de persistência de rascunho e validação multi-etapas.
- */
 export function useStaffForm() {
   const navigate = useNavigate()
   const [activeStep, setActiveStep] = useState(0)
@@ -26,7 +22,6 @@ export function useStaffForm() {
 
   const draftKey = 'staff_form_draft'
 
-  // Inicialização de valores padrão com suporte a rascunho (LocalStorage)
   const defaultValues = useMemo(() => {
     try {
       const savedDraft = localStorage.getItem(draftKey)
@@ -49,7 +44,6 @@ export function useStaffForm() {
     defaultValues,
   })
 
-  // Sincronização automática do rascunho enquanto o usuário digita
   const formValues = form.watch()
   useEffect(() => {
     if (!submittedRef.current) {
@@ -61,21 +55,18 @@ export function useStaffForm() {
     try {
       const result = await createStaff(data)
 
-      // Limpeza imediata do rascunho após sucesso ou salvamento local (offline)
       submittedRef.current = true
       localStorage.removeItem(draftKey)
 
       if (result.synced) {
         setToast({ message: 'Colaborador cadastrado com sucesso!', severity: 'success' })
       } else {
-        // Feedback visual amigável para o modo offline
         setToast({ 
           message: `Salvo no dispositivo. Será enviado quando houver internet.`, 
           severity: 'success' 
         })
       }
 
-      // Pequeno atraso para o usuário ver o feedback de sucesso antes de mudar de página
       setTimeout(() => navigate('/staffs'), 1500)
     } catch (err: unknown) {
       setToast({
@@ -88,7 +79,6 @@ export function useStaffForm() {
   const handleNext = async () => {
     const fields = STEP_FIELDS[activeStep]
 
-    // Validação de e-mail duplicado (UX Preventiva)
     if (activeStep === 0) {
       const email = form.getValues('email').trim().toLowerCase()
       const isDuplicate = staffs?.some(s => s.email.trim().toLowerCase() === email)
@@ -105,7 +95,6 @@ export function useStaffForm() {
     const isValid = await form.trigger(fields)
     if (!isValid) return false
 
-    // Se for o último passo, submete. Senão, avança.
     if (activeStep === STEPS.length - 1) {
       await form.handleSubmit(onSubmit)()
     } else {
@@ -131,7 +120,6 @@ export function useStaffForm() {
     setToast,
     handleNext,
     handleBack,
-    // Cálculo do progresso visual
     currentProgress: (activeStep / STEPS.length) * 100,
   }
 }

src/libs/firebase.ts

@@ -2,7 +2,6 @@ import { initializeApp, getApps, getApp, type FirebaseApp } from 'firebase/app'
 import { initializeFirestore, persistentLocalCache, persistentMultipleTabManager, type Firestore } from 'firebase/firestore'
 import { z } from 'zod'
 
-// 1. Schema de Validação de Ambiente
 const envSchema = z.object({
   VITE_FIREBASE_API_KEY: z.string().min(1),
   VITE_FIREBASE_PROJECT_ID: z.string().min(1),
@@ -31,10 +30,8 @@ const parseEnv = () => {
 
 const env = parseEnv()
 
-// 2. Exportação do Status de Configuração
 export const isFirebaseConfigured = !!env
 
-// 3. Inicialização Segura (Fallback para Mocks se não configurado)
 let app: FirebaseApp
 let db: Firestore
 

src/services/staffs.ts

@@ -3,10 +3,8 @@ import { FirebaseStorage, LocalOnlyStorage, type StaffStorage } from './storage-
 import type { Staff } from '@/features/staff/types'
 import type { StaffSchema } from '@/features/staff/validation'
 
-// 4. Seleção Dinâmica do Provider
 const storage: StaffStorage = isFirebaseConfigured ? FirebaseStorage : LocalOnlyStorage
 
-// 5. API Pública do Serviço (Mantendo compatibilidade)
 export async function listStaffs(): Promise<Staff[]> {
   return storage.list()
 }

src/services/storage-provider.ts

@@ -4,7 +4,6 @@ import { addPendingStaff, getPendingStaffs, removePendingByEmail } from '@/servi
 import type { Staff } from '@/features/staff/types'
 import type { StaffSchema } from '@/features/staff/validation'
 
-// 1. Definição da Interface do Storage
 export interface StaffStorage {
   list(): Promise<Staff[]>;
   create(data: StaffSchema): Promise<{ synced: boolean; error?: string }>;
@@ -13,15 +12,13 @@ export interface StaffStorage {
   delete(id: string): Promise<void>;
 }
 
-// Utilitário de Timeout
 function withTimeout<T>(promise: Promise<T>, ms = 30000): Promise<T> {
   const timeout = new Promise<never>((_, reject) =>
-    setTimeout(() => reject(new Error('Timeout: Banco de dados não respondeu.')), ms)
+    setTimeout(() => reject(new Error('Timeout de conexão com o banco.')), ms)
   )
   return Promise.race([promise, timeout])
 }
 
-// Utilitário de Log Remoto
 async function logRemoteError(context: string, error: unknown) {
   if (!isFirebaseConfigured) return
   try {
@@ -38,7 +35,6 @@ async function logRemoteError(context: string, error: unknown) {
   }
 }
 
-// 2. Implementação Firebase (Online)
 export const FirebaseStorage: StaffStorage = {
   async list(): Promise<Staff[]> {
     const pending = getPendingStaffs()
@@ -66,7 +62,7 @@ export const FirebaseStorage: StaffStorage = {
   async create(data: StaffSchema): Promise<{ synced: boolean; error?: string }> {
     if (!isFirebaseConfigured) {
       addPendingStaff(data)
-      return { synced: false, error: 'Firebase não configurado' }
+      return { synced: false, error: 'Firebase offline' }
     }
 
     try {
@@ -120,22 +116,21 @@ export const FirebaseStorage: StaffStorage = {
   }
 }
 
-// 3. Implementação Local (Offline Fallback Permanente)
 export const LocalOnlyStorage: StaffStorage = {
   async list(): Promise<Staff[]> {
     return getPendingStaffs()
   },
   async create(data: StaffSchema): Promise<{ synced: boolean; error?: string }> {
     addPendingStaff(data)
-    return { synced: false, error: 'Modo Offline' }
+    return { synced: false, error: 'Offline' }
   },
   async sync(): Promise<boolean> {
     return false
   },
   async update(): Promise<void> {
-    console.warn('Update not supported in LocalOnly mode')
+    console.warn('Update local not supported')
   },
   async delete(): Promise<void> {
-    console.warn('Delete not supported in LocalOnly mode')
+    console.warn('Delete local not supported')
   }
 }

tests/e2e/smoke.spec.ts

@@ -20,10 +20,10 @@ test.describe('Smoke', () => {
     await expect(page.getByLabel('E-mail')).toBeVisible()
   })
 
-  test('botão Voltar no formulário retorna para a lista', async ({ page }) => {
+  test('botão Cancelar no formulário retorna para a lista', async ({ page }) => {
     await page.goto('/staffs/new', { waitUntil: 'domcontentloaded' })
     await expect(page.getByText('Informações Básicas')).toBeVisible({ timeout: 20000 })
-    await page.getByRole('button', { name: /Voltar/i }).click()
+    await page.getByRole('button', { name: /Cancelar/i }).click()
     await expect(page).toHaveURL(/\/staffs/, { timeout: 10000 })
   })