CI: Implementar Testes Automatizados no Frontend e Integrar ao Pipeline
🎯 Descrição
Atualmente, nosso pipeline de Integração Contínua (CI) foca principalmente no Backend. Para garantir a estabilidade da interface do usuário e evitar que Regressões visuais ou lógicas cheguem à produção, precisamos ativar os testes automatizados no Frontend.
Como o projeto utiliza react-scripts (Create React App), o Jest já está instalado. Precisamos apenas garantir que existe um teste básico (“smoke test”) e configurar o GitHub Actions para executá-lo corretamente (evitando o modo interativo).
✅ Objetivos
- Garantir que o Frontend seja testado automaticamente a cada Push/PR.
- Impedir que o deploy ocorra se o Frontend estiver quebrado (ex: não renderizando).
- Atualizar o workflow do GitHub Actions para suportar testes de interface.
📝 Tarefas (To-Do)
- Validar Teste Básico (
App.test.js):- Garantir que existe um arquivo de teste em
Oncomap/frontend/src/. - O teste deve verificar se o componente principal renderiza (ex: procurar pelo texto “OncoMap”).
- Garantir que existe um arquivo de teste em
- Configurar Script de Teste:
- Verificar se o
package.jsondo frontend possui o script"test": "react-scripts test".
- Verificar se o
- Atualizar Workflow (
.github/workflows/ci.yml):- Adicionar o step de testes no job
frontend-verificacao. - Importante: Configurar a variável de ambiente
CI: truepara que o Jest não fique aguardando input do usuário e trave o pipeline. - (Opcional) Adicionar step de Lint (
npm run lint) no frontend.
- Adicionar o step de testes no job
📊 Critérios de Aceitação
- O comando
npm testroda localmente na pastafrontende passa com sucesso. - O Pipeline do GitHub Actions exibe uma etapa “Rodar Testes” no job do Frontend.
- O Pipeline finaliza com sucesso (Verde ✅) sem travar por timeout.
- Se um teste falhar propositalmente, o Pipeline deve falhar e bloquear o Merge.
🔗 Referências
- Documentação do Create React App sobre CI: Running Tests