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.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s