|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Home](home)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Escopo](escopo)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Gerência](ger%C3%AAncia)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Processo](processo)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Mockups](mockups)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Configuração](configura%C3%A7%C3%A3o)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Arquitetura](arquitetura)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[DataBase](database)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Infraestrutura](infraestrutura)
|
|
|
|
</th>
|
|
|
|
<th>
|
|
|
|
|
|
|
|
[Testes](testes)
|
|
|
|
</th>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
# 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.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## 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. |
