14 KiB

Raw Blame History

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)

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

DevTools do Navegador:
- Console (erros JavaScript)
- Network (verificar que não há chamadas de API)
- Performance (medir renderização)
- Lighthouse (métricas gerais)
Responsive Design Mode:
- Chrome DevTools → Toggle device toolbar
- Testar em diferentes resoluções
React DevTools:
- Verificar estado dos componentes
- Verificar props passadas
- Verificar re-renders

Critérios de Sucesso

Um teste é considerado bem-sucedido quando:

✅ Interface responde corretamente às interações
✅ Validações de formulário funcionam no frontend
✅ Estados visuais (loading, erro, sucesso) são exibidos
✅ Dados são atualizados localmente após ações
✅ Layout não quebra em diferentes resoluções
✅ Não há erros no console do navegador
✅ 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

14 KiB Raw Blame History