React: avançando em testes e2e com Cypress

Visão geral da aplicação - Apresentação

Oi, tudo bem? Eu sou o Neilton e vou te acompanhar em mais um mergulho nessa ferramenta incrível: o Cypress.

Vamos conversar sobre os testes de ponta a ponta feitos no React.

Autodescrição: Neilton Seguins é um homem negro cisgênero, com cabelos curtos, escuros e encaracolados e olhos castanho-escuros. Possui um óculos com lentes retangulares e bordas metálicas, além de uma camiseta amarela sem estampa. Ao fundo, há uma parede lisa que recebe iluminação em degradê, do rosa para o azul.

Testes de ponta a ponta em React

Recebemos a aplicação do Bytebank, uma startup de banco digital. Sabemos que sempre que ela recebe uma nova funcionalidade, precisamos cobrir os novos cenários com testes, inclusive os de ponta a ponta.

Estamos com o aplicativo Bytebank aberto no navegador. Vamos visualizar a nova funcionalidade adicionada: a página "Minha conta", acessando o explorador lateral e clicando em "Minha conta".

Nela, podemos atualizar informações da pessoa usuária que possui uma conta no Bytebank, preenchendo e alterando dados como o seu nome e a sua senha. Essas informações são importantes para realizar o login, por exemplo.

O que aprenderemos?

Coisas legais, como:

• Otimizar testes, principalmente no processo de login
• Testar APIs
• Carregar dados de arquivos, APIs ou banco de dados
• Utilizar dados para tornar os testes mais dinâmicos
• Proteger dados sensíveis
• Testar a interface e a API em uma única jornada de pessoa usuária

Cada tópico nos ensinará coisas novas, o que expandirá nossa mente em relação à escrita de testes ponta a ponta no Cypress.

Pré-requisitos

Para fazer este curso, é recomendado concluir previamente o Curso de React: escreva testes end to end com Cypress, pois aqui, daremos continuidade a ele.

Pegue o seu café, suco ou água, sente-se confortavelmente, abra o bloco de anotações e vamos começar. Nos vemos no próximo vídeo.

Visão geral da aplicação - Conhecendo a aplicação

Nosso foco será a startup Bytebank. Conforme ela avança nas funcionalidades, precisamos cobrir os novos cenários com testes.

Neste caso, serão testes de ponta a ponta.

Conhecendo a aplicação

Instalaremos as dependências do projeto. Para baixar os arquivos necessários, devemos acessar as Atividades desta aula.

Após o download, extrairemos os arquivos da aplicação para uma pasta chamada "bytebank-app" e os arquivos da API para uma pasta chamada "api-bytebank-v2", ambas na área de trabalho.

Faremos um clique duplo na pasta da API para abri-la no explorador. Nesta janela, clicaremos com o botão direito e selecionaremos "Abrir no terminal".

Dica: Caso não haja a opção "Abrir no terminal" em seu sistema, basta clicar na barra de pesquisa do explorador, digitar "cmd" no lugar do caminho de pastas exibido e pressionar "Enter".

Com isso, o terminal será aberto na pasta da API. Nele, faremos a instalação das dependências com o comando abaixo.

npm install

Após a instalação, rodaremos a API com o comando abaixo.

npm run dev

O terminal retornará uma mensagem informando que o servidor está rodando em "http://localhost:8000".

Minimizaremos o terminal, fecharemos a janela do explorador e faremos o mesmo processo para a pasta "bytebank-app".

Após rodarmos o npm install, pediremos para que a pasta seja aberta no VS Code, ambiente que utilizaremos para desenvolvimento. Para isso, rodaremos o comando abaixo.

code .

Após pressionarmos "Enter", a tela do VS Code será aberta para nós.

Como visto anteriormente, a aplicação do Bytebank evoluiu. Por isso, encontraremos coisas novas.

Por meio do explorador, acessaremos o caminho "src > paginas" e dentro desta encontraremos uma nova pasta denominada "Minha Conta". Ela foi criada para editar informações como, por exemplo, o nome e a senha da pessoa usuária.

Vamos rodar a aplicação e abri-la no navegador. Com o atalho "Ctrl+J", abriremos o terminal do VS Code e nele rodaremos o comando abaixo para subir a aplicação no navegador.

npm start

Após a execução, o navegador será aberto na URL "http://localhost:8000", onde será exibida a página inicial da nossa aplicação. Já podemos interagir com ela.

Clicaremos no botão "Já tenho conta", localizado à direita, na barra superior. Isso abrirá o modal de login.

Realizaremos o login para visualizarmos a nova página, inserindo informações nos campos "E-mail" e "Senha" e clicando em "Acessar".

Com isso, a página principal será aberta. No explorador lateral, temos seis menus alinhados na vertical: "Início", "Minha conta", "Cartões", "Serviços" e "Investimentos".

Clicaremos em "Minha conta", o que abrirá a página "Minha conta". Nela, veremos os campos "Nome", "Senha" e o botão "Salvar alterações", alinhados na vertical. Neste formulário, podemos alterar nossos dados de nome e de senha.

Esta é uma nova funcionalidade adicionada ao Bytebank — um novo cenário que cobriremos com testes.

Além disso, precisaremos verificar pontos em nossa API, por isso, também adicionaremos a ela testes de ponta a ponta.

É possível que surja a dúvida: testar APIs não é uma tarefa de pessoas desenvolvedoras back-end? De fato, é mais comum que devs do back-end e QAs (pessoas responsáveis pela qualidade do código) escrevam esses testes.

Contudo, se por algum motivo essas pessoas não estiverem disponíveis (seja por férias ou por outro motivo), esta tarefa pode ser designada a nós. Portanto, é importante que tenhamos este conhecimento.

Voltando ao VS Code, veremos que nossa aplicação já possui alguns testes. No explorador, acessaremos o caminho "cypress > e2e", cujo interior contém seis especificações (arquivos com a extensão .cy.js):

• dispositivoMovel.cy.js
• formularioCadastro.cy.js
• formularioLogin.cy.js
• inicio.cy.js
• jornadaUsuario.cy.js
• paginas.cy.js

A partir deles, temos uma direção a seguir com os testes. Entretanto, precisamos entender o que fazer quando não sabemos por onde começá-los.

Entenderemos isso no próximo vídeo. Nos vemos lá!

Visão geral da aplicação - Entendendo o que testar

Ficamos responsáveis por escrever testes de ponta a ponta e testar uma aplicação do zero. Algumas dúvidas comuns podem aparecer, como:

• "O que precisamos fazer?"
• "O que é mais importante testar?"

Se a aplicação já tiver alguns testes, como no caso do Bytebank, é possível entrar em contato com a pessoa que os escreveu e tentar entender do que se tratam. Caso não haja contato com essa pessoa, recomendamos explorar os testes.

Explorando os testes

Vamos explorar nossos testes voltando ao VS Code. Pelo explorador, veremos na pasta "e2e" dentro da pasta "cypress" os arquivos .cy.js. Eles são especificações que testam cenários, principalmente focados na interface da pessoa usuária e no front-end.

Eles verificam, por exemplo:

• Se os formulários de cadastro e de login nos dá feedbacks sobre envio de informações corretas e incorretas
• Se recebemos mensagens de cadastros bem-sucedidos

Abriremos um novo terminal do Powershell, selecionando o botão que possui o ícone "+", no canto superior direito da aba de terminal.

Dica: É possível abrir um novo terminal por meio do atalho "Ctrl+Shift+'".

Abriremos a aplicação do Cypress rodando o comando abaixo no terminal.

npx cypress open

Com isso, uma nova janela com o título "Welcome to Cypress!" (Boas-vindas ao Cypress!) será aberta, exibindo a interface da aplicação. Em seu interior, veremos duas opções, dentre as quais selecionaremos "E2E Testing" (Testes com E2E), à esquerda, para configurar o teste de ponta a ponta.

Após a tela de inicialização da configuração, será exibida a tela "Choose a browser", onde devemos escolher nosso navegador de preferência e clicar no botão "Start E2E Testing".

Neste momento, conforme vimos anteriormente, o Cypress abrirá a aplicação em uma nova aba no navegador, exibindo na barra de busca a URL "http://localhost:3000/__/#/specs", enquanto no corpo vemos a página "Specs".

Nesta, vemos a lista com nossas especificações, previamente mencionadas. Vamos clicar na especificação inicio.cy.js que é bem simples.

Ela será aberta e ocupará toda a página, onde veremos uma tela que exibe a página inicial do Bytebank e também uma aba na lateral esquerda.

Nesta aba lateral, na seção "Test Body", veremos que o teste passou normalmente, apesar de ter exibido um erro no get para alguma rota. Posteriormente, entenderemos o que este erro significa.

Esta aba nos permite entender sobre o que trata cada especificação existente na nossa aplicação. Por exemplo, este teste visita a nossa página, verifica se ela contém o H1 com o texto que deve ser exibido e exibe alguma coisa.

Cenários críticos

Se não tivermos nenhum teste na aplicação, podemos escolher cenários críticos de teste como, por exemplo, formulários.

No caso do modal de login, o formulário deve exibir mensagens de erro para as informações erradas, já que não queremos levar estes problemas para o back-end. Portanto, recomendamos iniciar com testes nos cenários que não podem passar despercebidos e que podem travar nossa aplicação.

A partir daí, devemos explorar as jornadas de pessoa usuária, ou seja, os fluxos percorridos por na aplicação.

Já falamos bastante. A seguir, começaremos a codar, escrevendo um teste ou melhorando os que já temos. Nos vemos no próximo vídeo!

Sobre o curso React: avançando em testes e2e com Cypress

O curso React: avançando em testes e2e com Cypress possui 147 minutos de vídeos, em um total de 58 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Visão geral da aplicação
• Testando a API
• Utilizando dados dinâmicos
• Explorando jornadas de usuário
• Dados sensíveis e viewport