350 lines
14 KiB
Markdown
350 lines
14 KiB
Markdown
# 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*
|