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.
Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.
3 comentários em “Como interceptar e mockar a resposta de uma requisição HTTP com Cypress”