tests: adiciona suite de testes com Jest e Github Actions #29

filipedeschamps · 2020-02-23T04:02:25Z

Pessoal, tudo bem? Segue minha proposta para suíte de testes do projeto. Mas antes, existem duas outras propostas: uma utilizando o Cypress https://github.com/filipedeschamps/BrasilAPI/pull/11 e outra integrando com o Travis CI https://github.com/filipedeschamps/BrasilAPI/pull/27

Resumo

O objetivo desta proposta é disponibilizar uma suíte de testes que utiliza a combinação do Jest com o Github Actions. O resultado esperado é, de uma forma simples, conseguir realizar testes locais utilizando o servidor local do Next.js e também testes remotos dentro do CI do Github utilizando a Preview URL disponibilizada pela Zeit (Now) que é uma URL única criada cada commit. Como bônus, o CORS é automaticamente testado pelo fato do Jest utilizar o jsdom que simula de forma programática o ambiente de um navegador (e CORS está incluso): mais informações.

Fluxo

Testes no seu ambiente local de desenvolvimento

Existem dois comandos para você rodar os testes na sua máquina local, um que roda os testes uma única vez e outro que roda os testes de forma contínua (a cada alteração que os arquivos sofrerem).

npm test
npm test:watch

Para isso acontecer, antes de todos os testes rodarem, o helper /tests/helpers/server.js identifica se você está em ambiente local ou ambiente do CI do Github. Se estiver em ambiente local (test injetado pelo Jest), ele irá:

Rodar o servidor de desenvolvimento do Next.js
Aguardar para que o endpoint /api/status/v1 fique disponível
Rodar os testes contra a url http://localhost:3000
Em seguida matar o servidor de desenvolvimento do Next.js.

Este é o resultado esperado de rodar npm test:

Testes de CI com Github Actions

Isto é feito utilizando os Workflows do Github Actions e esse arquivo de configuração pode ser encontrado na pasta /.github/workflows/e2e-tests.yml e o fluxo segue dessa forma:

Ao realizar um Push, automaticamente o hook da Zeit começa a realizar o deploy com o código do commit para uma URL chamada de Preview URL.

Este hook da Zeit dispara um evento no Github Actions chamado deployment_status e que neste momento estará com o status pending. O workflow fica escutando por este evento (no status pending) e no momento que ele acontece, o job mark-commit-status-pending marca esse novo commit enviado por você com o status de pending para bloquear o merge até que esse fluxo termine.

Quando a Zeit termina o deploy, o hook deployment_status novamente é disparado, mas agora com o status success e outro job chamado e2e-tests começa a rodar. O interessante desse job é que a primeira coisa que ele faz é manter o status do commit como pending, porém agora adiciona uma target_url e com isso você consegue navegar diretamente para a URL deste Workflow e ver ele rodando (nota que um link Details apareceu na direita). Após isso, ele irá executar os mesmos passos de quando você roda os testes localmente (npm test) só que agora injetando uma variável de ambiente NODE_ENV='ci' para que o helper server.js não levante o servidor local do Next.js e utilize a Preview URL, que será algo como https://brasilapi-branch.filipedeschamps.now.sh (ao invés do http://localhost:3000).

Caso os testes falhem, o passo seguinte do workflow é atualizar o commit com o status failure.

E caso os testes passem com sucesso, o passo seguinte do workflow é atualizar o commit com o status success.

E é isso turma! Ainda faltam coisas como criar um workflow caso o deploy da Zeit falhe, mas é bem simples, outro ponto importante é definir de forma automática a porta do servidor local (caso a 3000 esteja sendo utilizada) e também qualquer outra sugestão que será super bem vinda 👍

E a explicação pareceu longa, mas é super simples e eu gostei MUITO do Github Actions porque além de fácil, o nível de integração com todo o ecossistema do Github é impressionante, você consegue disparar workflows para diversos tipos de eventos e manipular qualquer coisa pela API.

Por fim, agradecimento em especial ao @paulogdm que é colaborador da Zeit por me dar o pontapé inicial sobre a Preview URL 🤝

Closes https://github.com/filipedeschamps/BrasilAPI/issues/4

vercel · 2020-02-23T04:02:29Z

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/filipedeschamps/brasilapi/bjz3z4thr
✅ Preview: https://brasilapi-git-actions.filipedeschamps.now.sh

filipedeschamps · 2020-03-03T16:16:07Z

Turma, pós carnaval, vamos bater o martelo nesse ponto? Tem um outro PR que integrou os testes https://github.com/filipedeschamps/BrasilAPI/pull/35 Gostaria de mirar o repositório para a versão 1.0 para criar um vídeo no canal sobre tudo o que foi feito e a participação de todos 😍

Algum comentário @kevenleone e @mukaschultze que fizeram os outros PR?

E @juniorpb como foi a experiência no seu PR https://github.com/filipedeschamps/BrasilAPI/pull/35 ?

juniorpb · 2020-03-03T17:53:50Z

Ao abrir a pull request #35 o Workflows realiza os testes e o deploy automático. Após validado, foi gerado a Preview URL - uma delicinha! Com ela é possível usar a atual versão da PR em 'ambiente stage' rodando em tempo real.

@filipedeschamps o Workflows do Github Actions é show! 😍

mukaschultze · 2020-03-03T18:38:14Z

Coloca a badge no readme

[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/filipedeschamps/BrasilAPI/Testes%20E2E?label=tests)](https://github.com/filipedeschamps/BrasilAPI/actions?query=workflow%3A%22Testes+E2E%22)

mukaschultze · 2020-03-03T18:38:54Z

E pq os testes estão com skip? Não tem como verificar se a requisição falha com o jest?

filipedeschamps · 2020-03-03T18:45:28Z

@mukaschultze ótima pergunta! Eu deixei assim para ser uma primeira iteração, como o projeto está num estágio beta acredito ser melhor deixar margem para fazer o merge de algo assim para outra pessoa ter a oportunidade de mexer no projeto. Então para finalizar o trabalho do skip tem que mexer na interface pública da /cep/v1 e se certificar disso nos testes, é uma tarefa muito massa, ainda mais massa se fizer usando alguma metodologia tipo TDD 👍

Quem quiser treinar no mundo open source, esta é uma chance num ambiente super controlado 🤝

filipedeschamps · 2020-03-03T18:46:22Z

Pingando o @lucianopf por ter participado da issue original https://github.com/filipedeschamps/BrasilAPI/issues/4

lucianopf · 2020-03-03T21:10:18Z

Maaaaano, vc leu meus pensamentos! hahaha

Tava querendo brincar com isso agora! 😂 (planejando inclusive migrar o Superbowleto do Trevis pro Gh Actions hehehe)

Só pra deixar aqui registrado uma coisinha que tbm queria brincar relacionado ao tópico!
https://github.com/nektos/act

O massa do Github Actions é que da mais contexto dos testes no próprio GH, as mensagens de erro ficam sensacionais! 👏 🚀

lucianopf

Mestre, ta bem show! 😬
Só fiquei com uma duvidazinha, mas fica a vontade de dar resolve! 🤘

package.json

pages/api/status/v1/index.js

filipedeschamps · 2020-03-03T22:05:27Z

Que massaaaa esse act @lucianopf você teria me salvo horas de desenvolvimento de action 😂 matou a pau!

Vou pinar as versões do package, adicionar a versão do lamba (e também da região, achei interessante) e colocar nesse PR. As outras alterações sugiro fazer em novos PRs 👍

…as de AWS da Zeit Também muda o retorno do `date` para um simples `new Date()`

filipedeschamps · 2020-03-03T22:19:19Z

Tem margem para melhorar os atuais hooks, porque eles estão Queued e enquanto não rodar o primeiro hook não vai colocar o status do commit para pending e travar o merge.

filipedeschamps · 2020-03-03T22:23:37Z

O hook demorou 4 minutos para sair de Queued

Em paralelo, olha o response do /status/v1 na url de preview dessa branch:

https://brasilapi-git-actions.filipedeschamps.now.sh/api/status/v1

{
  "status": "ok",
  "date": "2020-03-03T22:20:08.766Z",
  "environment": "production",
  "aws": {
    "region": "us-west-1",
    "function_version": "$LATEST"
  }
}

process.env.AWS_LAMBDA_FUNCTION_VERSION = "$LATEST"

Estranho... depois seria interessante também escrever teste para essa interface 👍

filipedeschamps · 2020-03-03T23:51:45Z

Turma, se não tiver ninguém contra, gostaria de fazer o merge desse PR para seguirmos com o restante das implementações. Depois que o repo estiver em forma, prevejo que vou fazer 2 vídeos, um sobre o Next.js (que vai convidar as pessoas aqui para esse repositório) e outro específico sobre o BrasilAPI 👍

mukaschultze · 2020-03-04T02:56:45Z

Só uma coisa que eu pensei aleatoriamente agora, o que acontece se uma pessoa der fork? O deploy ta ligado a esse repositório em específico, porem as actions vão funcionar em todos os forks. Nessa situação as actions deixam de ser executadas? Dão erro?

filipedeschamps · 2020-03-04T03:36:37Z

Excelente pergunta! Meu palpite é que o action rode, mas quebre por conta que o hook da Zeit que faz o deploy não vai conseguir ser executado.

…

On Tue, Mar 3, 2020 at 6:56 PM Samuel Schultze ***@***.***> wrote: Só uma coisa que eu pensei aleatoriamente agora, o que acontece se uma pessoa der fork? O deploy ta ligado a esse repositório em específico, porem as actions vão funcionar em todos os forks. Nessa situação as actions deixam de ser executadas? Dão erro? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/filipedeschamps/BrasilAPI/pull/29?email_source=notifications&email_token=ABANEEMGX72MH7Q3O65TDG3RFW7O5A5CNFSM4KZXFRPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENWEOEY#issuecomment-594298643>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABANEEKBKZH3JWTLMRXRRGTRFW7O5ANCNFSM4KZXFRPA> .

lucianopf

LGTM! 🚀 ❤️

Poxan, o version ia ficar massa, mas na vdd ele acaba pegando a versão da lambda e não do deployment =/

Dps a gnt estuda melhor isso! 😬

filipedeschamps · 2020-03-04T15:31:25Z

Show! Merged 👍 como reflexo:

É preciso mudar o status code de retorno do /cep/v1 para erros de cep mal formatado ou não encontrado e cobrir isso com testes
Cobrir o /status/v1 com testes também

filipedeschamps · 2020-03-04T15:49:42Z

Olha que benchmark massa: vercel/next.js#10814

Fazer o Jest retornar para a issue qual teste falhou 👍

tests: adiciona suite de testes com Jest e Github Actions

ae611cb

filipedeschamps mentioned this pull request Feb 25, 2020

Rota para rastreio de encomendas #31

Closed

lucianopf reviewed Mar 3, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

pages/api/status/v1/index.js Show resolved Hide resolved

filipedeschamps added 2 commits March 3, 2020 14:07

package: pina para a versão exata das dependências

3be0690

status: adiciona region e function_version das variáveis reservad…

72d6710

…as de AWS da Zeit Também muda o retorno do `date` para um simples `new Date()`

vercel bot deployed to Preview March 3, 2020 22:16 View deployment

lucianopf approved these changes Mar 4, 2020

View reviewed changes

filipedeschamps merged commit 050bcd6 into master Mar 4, 2020

This was referenced Mar 4, 2020

feat: adicionado cypress e criado alguns casos de testes #4 #11

Closed

[WIP] chore: update tests #26

Closed

[WIP] chore: add travis ci tests #27

Closed

paulo-santana mentioned this pull request Mar 5, 2020

feat: adiciona código de erro semântico em casos de ceps mal formatados #38

Merged

filipedeschamps mentioned this pull request Apr 6, 2020

Habilitar CORS no serviço #9

Closed

filipedeschamps deleted the actions branch July 15, 2020 02:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tests: adiciona suite de testes com Jest e Github Actions #29

tests: adiciona suite de testes com Jest e Github Actions #29

filipedeschamps commented Feb 23, 2020 •

edited

vercel bot commented Feb 23, 2020 •

edited

filipedeschamps commented Mar 3, 2020

juniorpb commented Mar 3, 2020

mukaschultze commented Mar 3, 2020 •

edited

mukaschultze commented Mar 3, 2020 •

edited

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

lucianopf commented Mar 3, 2020

lucianopf left a comment

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020 •

edited

mukaschultze commented Mar 4, 2020

filipedeschamps commented Mar 4, 2020 via email

lucianopf left a comment •

edited

filipedeschamps commented Mar 4, 2020

filipedeschamps commented Mar 4, 2020

tests: adiciona suite de testes com Jest e Github Actions #29

tests: adiciona suite de testes com Jest e Github Actions #29

Conversation

filipedeschamps commented Feb 23, 2020 • edited

Resumo

Fluxo

Testes no seu ambiente local de desenvolvimento

Testes de CI com Github Actions

vercel bot commented Feb 23, 2020 • edited

filipedeschamps commented Mar 3, 2020

juniorpb commented Mar 3, 2020

mukaschultze commented Mar 3, 2020 • edited

mukaschultze commented Mar 3, 2020 • edited

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

lucianopf commented Mar 3, 2020

lucianopf left a comment

Choose a reason for hiding this comment

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020

filipedeschamps commented Mar 3, 2020 • edited

mukaschultze commented Mar 4, 2020

filipedeschamps commented Mar 4, 2020 via email

lucianopf left a comment • edited

Choose a reason for hiding this comment

filipedeschamps commented Mar 4, 2020

filipedeschamps commented Mar 4, 2020

filipedeschamps commented Feb 23, 2020 •

edited

vercel bot commented Feb 23, 2020 •

edited

mukaschultze commented Mar 3, 2020 •

edited

mukaschultze commented Mar 3, 2020 •

edited

filipedeschamps commented Mar 3, 2020 •

edited

lucianopf left a comment •

edited