# Guia de Testes Frontend - Workspace

Este documento fornece um guia completo para testar o ambiente Workspace **focando exclusivamente no frontend**, já que o ambiente ainda não possui comunicação com o backend.

---

## Contexto

O ambiente Workspace utiliza **dados mockados** armazenados nos hooks (`useContasReceber`, `useContasPagar`, `useConciliacaoV2`). Todas as operações (criar, editar, deletar) são realizadas localmente no estado do React, sem chamadas à API.

---

## Ambiente de Teste

- **URL**: `https://dev.workspace.itguys.com.br/plataforma/workspace/login`
- **Login**: `itguys`
- **Senha**: `itguys@2026`

---

## Checklist de Testes Frontend

### 1. Autenticação (Validação Local)

#### 1.1 Login
- [ ] Acessar URL de login
- [ ] Verificar que campos de usuário e senha estão presentes
- [ ] Verificar que botão "Entrar" está **desabilitado** quando campos estão vazios
- [ ] Preencher apenas usuário → botão continua desabilitado
- [ ] Preencher apenas senha → botão continua desabilitado
- [ ] Preencher ambos os campos → botão fica **habilitado**
- [ ] Clicar no ícone de olho → senha é mostrada/ocultada
- [ ] Inserir credenciais válidas (`itguys` / `itguys@2026`)
- [ ] Clicar em "Entrar"
- [ ] Verificar que spinner de loading aparece
- [ ] Verificar redirecionamento para tela principal após ~800ms
- [ ] Verificar que sidebar aparece
- [ ] Verificar que conteúdo principal aparece

#### 1.2 Validação de Erro
- [ ] Fazer logout (se possível) ou limpar sessionStorage
- [ ] Tentar login com credenciais inválidas
- [ ] Verificar que mensagem de erro aparece: "Usuário ou senha de acesso inválida."
- [ ] Verificar que mensagem tem estilo visual de erro (vermelho, ícone de alerta)
- [ ] Verificar que campos não são limpos após erro
- [ ] Corrigir credenciais e tentar novamente → login deve funcionar

---

### 2. Navegação e Layout

#### 2.1 Sidebar
- [ ] Verificar que sidebar está visível após login
- [ ] Verificar largura da sidebar (280px expandida)
- [ ] Clicar no botão de colapsar → sidebar reduz para 100px
- [ ] Verificar que apenas ícones são mostrados quando colapsada
- [ ] Expandir novamente → sidebar volta para 280px
- [ ] Verificar que conteúdo principal ajusta margem (`ml-[280px]` ou `ml-[100px]`)

#### 2.2 Navegação entre Módulos
- [ ] Clicar em "Receitas (Entradas)" → view muda para ContasReceberView
- [ ] Verificar que header mostra "Financeiro / Receitas"
- [ ] Clicar em "Despesas (Saídas)" → view muda para ContasPagarView
- [ ] Verificar que header mostra "Financeiro / Despesas"
- [ ] Clicar em "Conciliação Bancária" → view muda para ConciliacaoView
- [ ] Verificar que header mostra "Financeiro / Conciliação"
- [ ] Verificar que transições são suaves (sem travamentos)

#### 2.3 Header
- [ ] Verificar que header está fixo no topo (`sticky top-0`)
- [ ] Verificar que header mostra breadcrumb correto
- [ ] Verificar que toggle de tema (dark/light) funciona
- [ ] Verificar que header não sobrepõe conteúdo ao fazer scroll

---

### 3. Módulo Receitas (Entradas)

#### 3.1 Navegação entre Sub-módulos
- [ ] Verificar que sub-navegação aparece abaixo do título
- [ ] Clicar em "CRUZAMENTO" → conteúdo muda
- [ ] Clicar em "ENTRADAS PLANEJADAS" → conteúdo muda
- [ ] Clicar em "BOLETOS" → conteúdo muda
- [ ] Clicar em "CLIENTES" → conteúdo muda
- [ ] Clicar em "SERVIÇOS" → conteúdo muda
- [ ] Verificar que botão ativo tem estilo diferente (fundo, borda)

#### 3.2 Entradas Planejadas
- [ ] Verificar que tabela de estimativas é exibida
- [ ] Verificar que dados mockados aparecem na tabela
- [ ] Clicar em uma linha da tabela → painel detalhado abre
- [ ] Verificar que painel ocupa 50% da tela em desktop
- [ ] Verificar que painel ocupa 100% da tela em mobile
- [ ] Verificar que tabela permanece parcialmente visível em desktop
- [ ] Clicar no botão "X" → painel fecha
- [ ] Clicar no backdrop (mobile) → painel fecha
- [ ] Clicar em "Novo" → dialog de criação abre
- [ ] Preencher formulário de estimativa
- [ ] Verificar que botão "Salvar" está desabilitado se campos obrigatórios vazios
- [ ] Preencher todos os campos obrigatórios
- [ ] Clicar em "Salvar" → dialog fecha, nova estimativa aparece na tabela
- [ ] Clicar em uma estimativa existente → dialog de edição abre com dados preenchidos
- [ ] Modificar dados e salvar → tabela atualiza
- [ ] Testar filtro por status (Rascunho, Enviada, Aprovada)
- [ ] Testar busca por texto (filtra localmente)

#### 3.3 Clientes
- [ ] Navegar para sub-módulo "CLIENTES"
- [ ] Verificar que tabela de clientes é exibida
- [ ] Clicar em um cliente → painel detalhado abre
- [ ] Verificar que painel mostra todas as abas (Visão Geral, Comentários, Transações, E-mails, Extrato, Faturas, Serviços/Produtos)
- [ ] Navegar entre abas → conteúdo muda
- [ ] Verificar que dados do cliente são exibidos corretamente
- [ ] Clicar em "Editar" → dialog de edição abre
- [ ] Modificar dados e salvar → painel atualiza
- [ ] Testar busca de clientes (filtra localmente)

#### 3.4 Serviços
- [ ] Navegar para sub-módulo "SERVIÇOS"
- [ ] Verificar que tabela de serviços é exibida
- [ ] Clicar em "Novo" → dialog de criação abre
- [ ] Preencher formulário e salvar → novo serviço aparece na tabela
- [ ] Clicar em "Editar" em um serviço → dialog de edição abre
- [ ] Modificar e salvar → tabela atualiza
- [ ] Clicar em "Deletar" → confirmação aparece, serviço é removido

#### 3.5 Boletos
- [ ] Navegar para sub-módulo "BOLETOS"
- [ ] Verificar que tabela de boletos é exibida
- [ ] Verificar que filtros por tipo funcionam
- [ ] Testar busca de boletos
- [ ] Verificar que ações (Download, Enviar, Agendar) estão presentes

---

### 4. Módulo Despesas (Saídas)

#### 4.1 Navegação entre Sub-módulos
- [ ] Verificar sub-navegação (Fornecedores, Despesas, Cruzamento)
- [ ] Navegar entre sub-módulos → conteúdo muda

#### 4.2 Fornecedores
- [ ] Navegar para "FORNECEDORES"
- [ ] Verificar que tabela de fornecedores é exibida
- [ ] Clicar em um fornecedor → painel detalhado abre
- [ ] Verificar que painel mostra abas (Visão Geral, Despesas, etc.)
- [ ] Clicar em "Novo" → dialog de criação abre
- [ ] Preencher formulário e salvar → novo fornecedor aparece
- [ ] Testar busca de fornecedores

#### 4.3 Despesas
- [ ] Navegar para "DESPESAS"
- [ ] Verificar que tabela de despesas é exibida
- [ ] Clicar em uma despesa → painel detalhado abre
- [ ] Verificar que painel mostra lançamentos contábeis (diário)
- [ ] Verificar que seção de upload de recibos está presente
- [ ] Clicar em "Novo" → dialog de criação abre
- [ ] Preencher formulário (data, conta, fornecedor, montante, etc.)
- [ ] Verificar que botão salvar valida campos obrigatórios
- [ ] Salvar → nova despesa aparece na tabela
- [ ] Testar filtro por status (Faturável, Não Faturável, Pendente, Pago)
- [ ] Testar busca de despesas

#### 4.4 Cruzamento de Despesas
- [ ] Navegar para "CRUZAMENTO"
- [ ] Verificar que gráfico "Planejado vs Executado" é exibido
- [ ] Verificar que gráfico tem altura adequada (não muito grande)
- [ ] Verificar que tabelas comparativas são exibidas
- [ ] Verificar que dados são calculados corretamente

---

### 5. Módulo Conciliação

#### 5.1 Navegação Hierárquica
- [ ] Navegar para "Conciliação"
- [ ] Verificar que sub-navegação aparece (Transações Conciliadas, Não Categorizadas, Gerenciamento)
- [ ] Clicar em "Transações Conciliadas"
- [ ] Verificar que nível 0 (Caixas) é exibido
- [ ] Verificar que gráfico de Pizza é exibido
- [ ] Clicar em um caixa → nível 1 (Categorias) é exibido
- [ ] Verificar que gráfico muda para Bar Chart
- [ ] Clicar em uma categoria → nível 2 (Regras/Beneficiários) é exibido
- [ ] Verificar que gráfico muda para Horizontal Bar Chart
- [ ] Clicar em uma regra → nível 3 (Transações) é exibido
- [ ] Verificar que gráfico muda para Area Chart (timeline)
- [ ] Clicar em "Voltar" → retorna ao nível anterior
- [ ] Verificar que breadcrumb mostra caminho atual

#### 5.2 Gráficos Dinâmicos
- [ ] Verificar que gráficos renderizam corretamente
- [ ] Verificar que tooltips aparecem ao passar mouse
- [ ] Verificar que legendas são legíveis
- [ ] Verificar que cores têm bom contraste
- [ ] Verificar que gráficos têm largura máxima (`max-w-2xl`)
- [ ] Verificar que gráficos não quebram layout

#### 5.3 Transações Não Categorizadas
- [ ] Clicar em "Não Categorizadas"
- [ ] Verificar que tabela de transações é exibida
- [ ] Clicar em "Categorizar" em uma transação
- [ ] Verificar que dialog de categorização abre
- [ ] Preencher formulário e salvar → transação é categorizada (localmente)

#### 5.4 Gerenciamento
- [ ] Clicar em "Gerenciamento"
- [ ] Verificar que abas aparecem (Caixas, Categorias, Regras)
- [ ] Navegar entre abas → conteúdo muda
- [ ] Testar CRUD de caixas
- [ ] Testar CRUD de categorias
- [ ] Testar CRUD de regras

---

### 6. Responsividade

#### 6.1 Mobile (375px - iPhone SE)
- [ ] Redimensionar janela para 375px
- [ ] Verificar que sidebar colapsa automaticamente ou fica oculta
- [ ] Verificar que tabelas têm scroll horizontal
- [ ] Verificar que painéis detalhados ocupam 100% da tela
- [ ] Verificar que textos são legíveis
- [ ] Verificar que botões são clicáveis (tamanho adequado)
- [ ] Verificar que formulários empilham campos verticalmente
- [ ] Verificar que dialogs são responsivos

#### 6.2 Tablet (768px - iPad)
- [ ] Redimensionar para 768px
- [ ] Verificar que layout adapta corretamente
- [ ] Verificar que grids mudam número de colunas
- [ ] Verificar que painéis detalhados têm largura adequada

#### 6.3 Desktop (1920px)
- [ ] Redimensionar para 1920px
- [ ] Verificar que layout expande bem
- [ ] Verificar que não há espaços vazios excessivos
- [ ] Verificar que conteúdo não fica muito largo

---

### 7. Formulários e Validações

#### 7.1 Campos Obrigatórios
- [ ] Abrir qualquer formulário de criação
- [ ] Tentar salvar sem preencher campos obrigatórios
- [ ] Verificar que botão "Salvar" está desabilitado
- [ ] Preencher campos obrigatórios
- [ ] Verificar que botão fica habilitado

#### 7.2 Formatação de Dados
- [ ] Inserir valor monetário → verificar formatação BRL
- [ ] Inserir data → verificar formatação brasileira (DD/MM/YYYY)
- [ ] Verificar que CPF/CNPJ são exibidos formatados (se aplicável)

#### 7.3 Estados de Loading
- [ ] Realizar qualquer ação que simule loading
- [ ] Verificar que spinner aparece
- [ ] Verificar que botões ficam desabilitados durante loading
- [ ] Verificar que loading desaparece após ação

#### 7.4 Feedback Visual
- [ ] Realizar ação de sucesso (criar, editar)
- [ ] Verificar se há mensagem de sucesso (toast, alert)
- [ ] Realizar ação que gera erro
- [ ] Verificar se há mensagem de erro visível

---

### 8. Performance Visual

#### 8.1 Transições
- [ ] Navegar entre views → verificar que transições são suaves
- [ ] Abrir/fechar painéis → verificar animações
- [ ] Abrir/fechar dialogs → verificar animações
- [ ] Verificar que não há travamentos ou "lag"

#### 8.2 Renderização
- [ ] Carregar página inicial → verificar tempo de carregamento
- [ ] Navegar entre módulos → verificar que conteúdo aparece rapidamente
- [ ] Abrir tabelas grandes → verificar que renderização é rápida
- [ ] Verificar console do navegador → não deve haver erros

#### 8.3 Memória
- [ ] Navegar extensivamente entre módulos
- [ ] Abrir/fechar múltiplos painéis
- [ ] Verificar que não há aumento drástico de uso de memória
- [ ] Verificar que não há memory leaks (performance tab do DevTools)

---

## Problemas Comuns e Como Testar

### Problema: Painel detalhado não abre
**Teste**: Clicar em item da tabela → verificar que `selectedItem` é setado → verificar que drawer renderiza

### Problema: Formulário não valida
**Teste**: Tentar salvar com campos vazios → verificar que botão está desabilitado → verificar lógica de validação

### Problema: Dados não atualizam após ação
**Teste**: Criar item → verificar que estado local é atualizado → verificar que tabela re-renderiza

### Problema: Layout quebra em mobile
**Teste**: Redimensionar para 375px → verificar que elementos não saem da tela → verificar scroll horizontal

---

## Ferramentas de Teste Recomendadas

1. **DevTools do Navegador**:
   - Console (erros JavaScript)
   - Network (verificar que não há chamadas de API)
   - Performance (medir renderização)
   - Lighthouse (métricas gerais)

2. **Responsive Design Mode**:
   - Chrome DevTools → Toggle device toolbar
   - Testar em diferentes resoluções

3. **React DevTools**:
   - Verificar estado dos componentes
   - Verificar props passadas
   - Verificar re-renders

---

## Critérios de Sucesso

Um teste é considerado **bem-sucedido** quando:

1. ✅ Interface responde corretamente às interações
2. ✅ Validações de formulário funcionam no frontend
3. ✅ Estados visuais (loading, erro, sucesso) são exibidos
4. ✅ Dados são atualizados localmente após ações
5. ✅ Layout não quebra em diferentes resoluções
6. ✅ Não há erros no console do navegador
7. ✅ Performance é aceitável (sem travamentos)

---

## Notas Importantes

- **Não há comunicação com backend**: Todas as ações são locais (estado React)
- **Dados são mockados**: Os dados vêm dos hooks, não de API
- **Persistência**: Dados não persistem após refresh (são mockados)
- **Foco**: Testar UI/UX, interações, validações e responsividade

---

*Guia criado para testes frontend do ambiente Workspace. Última atualização: 2026-01-24*