Skip to content

GitLab

Last edited by Dylan Souza Silveira
Page history

Testes

Home Escopo Gerência Processo Mockups Configuração Arquitetura DataBase Infraestrutura Testes

Documentação de Testes Unitários

Visão Geral

Os testes unitários são ferramentas poderosas que garantem que cada componente do front-end funcione conforme o esperado, isoladamente. Neste projeto, utilizamos os frameworks Jest e React Testing Library, integrados ao Vitest para compatibilidade e desempenho de Unity Tests em projetos com Next.js.

image

Imagem: execução automatizada de testes através da pipeline.

Benefícios

  1. Manutenção:

    • Garantia de que mudanças no código não introduzam erros.

  2. Confiabilidade:

    • Aumento da confiança ao lançar novas funcionalidades.

  3. Facilidade:

    • Configuração simples com ferramentas amplamente utilizadas.

Ferramentas Utilizadas

  1. Jest: Framework principal de testes.
  2. React Testing Library: Para testes de interface e interações.
  3. Vitest: Para integração com o ambiente Next.js.
  4. Testing Library User Event: Para simulação de ações do usuário.

Fluxo de Testes

  1. Escrevendo Testes:

    • Criação de testes unitários para cada componente ou página, cobrindo cenários específicos.

  2. Executando Testes:

    • Comando: npm test ou npm run test.
    • Para rodar apenas um teste específico: npm test -- <nome-do-arquivo>.

Estrutura de Testes

Arquivo Utilitário de Testes (test-utils.tsx)

O arquivo test-utils.tsx configura ferramentas utilitárias e funcionalidades essenciais para a execução de testes.

Função customRender

O customRender é uma função utilitária que encapsula o método render fornecido pela React Testing Library. Ele é usado para adicionar configurações globais ou provedores necessários para o contexto da aplicação, como temas, gerenciamento de estado ou configurações específicas para testes. No contexto deste projeto, o customRender:

  • Aplica o tema global do Material-UI a todos os componentes.
  • Adiciona o CssBaseline para garantir estilos consistentes durante os testes.
  • Configura eventos do usuário com userEvent.

Isso garante que todos os componentes sejam renderizados já com as configurações necessárias, proporcionando um ambiente de teste mais próximo ao real e eliminando a necessidade de repetir configurações em cada teste individual. O desenvolvimento desse método torna o processo mais eficiente e menos propenso a erros.

Exemplos de Testes

Testando a Página de Introdução (introducao.test.tsx)

Cenários Testados

  1. Renderização Inicial:

    • Verifica se os principais componentes da página de introdução (texto, carrossel, botão) são renderizados corretamente.

  2. Navegação e Habilitação do Botão:

    • Garante que o botão "Finalizar" só é habilitado após o usuário navegar por todos os slides.

Testando a Página de Login (login.test.tsx)

Cenários Testados

  1. Renderização Inicial:

    • Verifica se todos os elementos da página de login (inputs e botões) estão presentes.

  2. Validação de Formulário:

    • Valida que erros aparecem ao enviar o formulário com dados inválidos ou incompletos.

Melhorias Futuras

  1. Cobertura Ampliada:

    • Expandir os testes para cenários edge case.

  2. Testes de Integração:

    • Garantir a integração correta entre componentes e páginas.

  3. Automação de Pipelines:

    • Adicionar os testes como parte do pipeline CI/CD.