Hoje em “pitadas de Cypress”, aprenda como mockar a resposta do servidor
As vezes precisamos rodar testes automatizados em ambientes os quais não temos controle sobre os dados.
Em tais situações, seria útil se pudéssemos interceptar a chamada ao servidor, e então mockar sua resposta, com dados conhecidos.
Tenho uma boa notícia. Com Cypress você pode atingir isso facilmente.
Irei apresentar um exemplo simples, mas a idéia é a mesma quando trabalhando com exemplos mais complexos.
Imaginemos uma aplicação que permite a criação, leitura, atualização e deleção de anotações.
Após logar na aplicação, o usuário é direcionado para sua lista pessoal de anotações.
O que fazer caso não tenhamos controle sobre a quantidade de anotações existentes para o usuário utilizado para os testes, por exemplo, em um ambiente de produção?
Pois afinal, porquê não rodar testes em produção, certo? 😜
O cenário de teste é o seguinte. Quero testar que quando não há nenhuma anotação na listagem para o usuário logado, somente um elemento com a classe list-group-item é exibido, o qual renderiza o botão para adicionar uma nova anotação.
Obs.: Caso houvesem mais anotações, cada uma seria também renderizada em uma elemnto com a classe list-group-item.
O teste seria assim.
describe('Lista de anotações vazia', () => {
beforeEach(() => {
cy.intercept('GET', '**/notes', []).as('getNotes')
cy.login()
cy.wait('@getNotes')
})
it('renderiza somente o botão para adicionar uma nova anotação', () => {
cy.get('.list-group-item')
.should('have.length', 1)
.and('contain', 'Criar nova anotação')
})
})
Perceba que na primeira linha do beforeEach invoco o cy.intercept passando como argumentos o método GET, o endereço '**/notes', e como resposta, um array vazio ([]).
O retorno do servidor quando fazemos uma requisição do tipo GET para o endereço '**/notes' é um array de anotações, porém, como estamos mockando a resposta com um array vazio ([]), é isso que o frontend recebe, e portanto, nenhuma anotação é renderizada.
É isso aí!
O que está achando da série “pitadas de Cypress“?
Aguardo teu feedback.
Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.
Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça os cursos da Escola TAT.
- Cypress, do Zero à Nuvem
- Cypress intermediário
- Cypress avançado
- Boas práticas em automação de testes com Cypress
- Testes end-to-end com Cypress
Bons testes! 🎉
TALKING ABOUT TESTING 
Muito bom o conteúdo, sempre direto ao ponto!!
Tenho uma duvida sobre requisições com o cypress, é possível simular uma requisição no meu teste, que ainda não existe?
Não entendi o que você quer dizer com “simular uma requisição no meu teste, que ainda não existe?” O que não existe? A rota para fazer a requisição? O Teste?
Não fui clara com a minha dúvida, seria simular uma requisição que ainda não existe.
Ainda não está claro. O que você quer dizer com uma requisição que ainda não existe?
Certo, vou tentar exemplificar melhor. Quando vamos realizar o teste de uma API que ainda está em desenvolvimento pelo time, ou seja, ela ainda não existe, mas já estou ciente da sua estrutura, dos envios, retornos, etc… é possível simular essa requisição com o cypress, de um endpoint que ainda não existe?
Não faz sentido testar a nível de API uma API que ainda não existe. O que você pode fazer é testar o frontend desacoplado da API, conforme ensino no curso avançado de Cypress.
Caso tenha interesse, segue um cupom de desconto https://www.udemy.com/course/testes-automatizados-com-cypress-avancado/?couponCode=C34245400E55E2B70808
Entendi, atualmente onde trabalho utilizo o cypress para teste e2e e teste de API, mas em alguns não tenho endpoint disponível para execução desses testes, mas sim apenas a estrutura dele, por isso a minha pergunta.
Obrigada pela atenção e parabéns pelos conteúdos!!!
De nada.
Entendi, atualmente onde trabalho utilizo o cypress para teste e2e e teste de API, mas em alguns não tenho endpoint disponível para execução desses testes, mas sim apenas a estrutura dele, por isso a minha pergunta.
Obrigada pela atenção e parabéns pelos conteúdos!!!
De nada.
muito bom conteúdo, vindo do curso avançado de cypress aula 04.
🙌