Aguardando requisições de rede

Logo no início da suíte de testes existente, há espaço para melhorias.

Estou me referindo ao seguinte trecho de código:

beforeEach(() => {
  cy.visit('/')

  cy.assertLoadingIsShownAndHidden()
  cy.contains('button', 'More').should('be.visible')
})

Esse código (às vezes) funciona, mas não é como um usuário real se comporta ao usar uma aplicação web que realiza buscas. O usuário não fica primeiro esperando o componente Loading ... ficar visível, depois não visível, e então esperar o botão de paginação ficar visível.

Se nos colocarmos no lugar do usuário, após visitar a aplicação, simplesmente esperamos que ela esteja pronta para receber uma nova busca. Nada mais.

Com isso em mente, seria ótimo se pudéssemos interceptar a requisição que a aplicação faz à API do Hacker News, dar a ela um alias e então aguardar essa requisição terminar antes de seguir em frente.

Por sorte, estamos usando o Cypress para escrever os nossos testes. 🚀

O Cypress oferece um recurso chamado cy.intercept() que pode nos ajudar bastante. Você define uma rota que quer que o Cypress intercepte, fornece um alias com .as('alias'), então realiza uma ação que dispara a requisição, e finalmente aguarda por ela antes de prosseguir, usando o comando cy.wait('@alias').

Aqui está um exemplo completo:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')
cy.visit('/') // This triggers the default search request defined above.
cy.wait('@getStories')

Visão geral dos comandos 📖

cy.intercept()

Espiona (e opcionalmente faz stub de) requisições de rede que correspondem a uma dada rota, para que você possa aguardar por elas, fazer asserções sobre elas ou controlar o seu comportamento.

Sintaxe:

cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)

Exemplo:

cy.intercept('GET', '**/search?query=React&page=0')

.as()

Atribui um alias a uma rota interceptada (ou a qualquer subject), para que você possa se referir a ela mais tarde por um nome amigável.

Sintaxe:

.as(aliasName)

Exemplo:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')

👨‍🏫 Um objeto routeMatcher oferece uma forma mais expressiva de corresponder requisições. Por exemplo:

cy.intercept({
  method: 'GET',
  pathname: '**/search',
  query: { query: 'React', page: '0' }
}).as('getStories')

cy.wait()

Aguarda uma requisição com alias acontecer antes de continuar, tornando os seus testes determinísticos em vez de depender de elementos visíveis/inexistentes ou de esperas fixas arbitrárias.

Sintaxe:

cy.wait('@alias')

Exemplo:

cy.wait('@getStories')

Conteúdo sugerido 📚

• cy.intercept() - documentação oficial
• cy.wait() - documentação oficial
• How to wait for a request to finish before moving on with Cypress

Exercício 1 🎯

Refatore o primeiro bloco beforeEach da suíte de testes para que, em vez de esperar por elementos ficarem visíveis ou não, ele aguarde uma requisição GET para **/search?query=React&page=0 antes de seguir em frente.

Exercício 2 🎯

Refatore o bloco beforeEach mais uma vez para que ele aguarde uma requisição GET para o pathname **/search, passando os valores de query e page como propriedades do objeto query aceito pelo cy.intercept() (veja a nota do instrutor acima).

Exercício 3 🎯

Nos testes a seguir, requisições GET também são feitas à API do Hacker News.

Refatore-os usando uma das abordagens acima, para que testemos a aplicação o mais próximo possível de como usuários reais interagem com ela:

• shows 20 stories, then the next 20 after clicking "More"
• types and hits ENTER
• types and clicks the submit button
• searches via the last searched term
• shows a max of 5 buttons for the last searched terms

👨‍🏫 Quando terminar, rode os testes (com npm test, ou com o Cypress App rodando npm run cy:open) e certifique-se de que todos passam antes de seguir em frente.

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta aula, publique o seguinte no LinkedIn.

Estou fazendo o curso "Cypress Interception" com @Walmyr Lima e Silva Filho na @Talking About Testing school, onde aprendi como interceptar e aguardar requisições de rede para tornar os meus testes mais confiáveis e mais próximos do comportamento de um usuário real. #TalkingAboutTesting #TATSchool #CypressInterception #Cypress

👨‍🏫 Lembre-se de me marcar na sua publicação. Aqui está o meu perfil no LinkedIn.