Como testar que o cache funciona em um teste escrito com Cypress

Aprenda como verificar que o resultado de uma busca veio do cache em vez de uma requisição HTTP com o framework Cypress.io

Aí vai mais uma “pitada de Cypress“. Espero que goste!

No curso avançado de testes automatizados com Cypress da Escola TAT, desafio meus alunos a colocarem os conhecimentos aprendidos em prática com uma aplicação semelhate a do curso. Esta aplicação é um sistema que integra com a API do Hackernews para fazer buscas. Nesta versão da aplicação (a versão do desafio), quando uma busca já foi feita anteriormente, os resultados são armazenados em cache, evitando uma nova requisição à API quando uma busca pelo mesmo termo é realizada de novo.

Mas e aí, como testar isso?

Vou te explicar com um exemplo.

// cypress/integration/hackernewsSearch.spec.js

describe('Hacker News Search', () => {
  const term = 'cypress.io'

  beforeEach(() => {
    cy.intercept(
      '**/search?query=redux&page=0&hitsPerPage=100',
      { fixture: 'empty'}
    ).as('empty')
    cy.intercept(
      `**/search?query=${term}&page=0&hitsPerPage=100`,
      { fixture: 'stories'}
    ).as('stories')

    cy.visit('/')
    cy.wait('@empty')
  })

  it('correctly caches the results', () => {
    const faker = require('@faker-js/faker')
    const randomWord = faker.random.word()
    let count = 0

    cy.intercept(`**/search?query=${randomWord}**`, req => {
      count +=1
      req.reply({fixture: 'empty'})
    }).as('random')

    cy.search(randomWord).then(() => {
      expect(count, `network calls to fetch ${randomWord}`).to.equal(1)

      cy.wait('@random')

      cy.search(term)
      cy.wait('@stories')

      cy.search(randomWord).then(() => {
        expect(count, `network calls to fetch ${randomWord}`).to.equal(1)
      })
    })
  })
})

No código acima, o que ocorre é o seguinte:

1. Temos uma teste suite para a funcionalidade de busca para aplicação Hacker Stories
2. Definimos uma variável chamada term por questões de reaproveitamento de código
3. Então temos uma função que executa antes de cada teste (beforeEach)
   1. No beforeEach, definimos duas rotas (as quais utilizam fixtures) para não dependermos da API do Hackernews. Na primeira rota, que ocorre assim que a aplicação é acessada, as fixtures retornarão uma lista vazia de histórias (empty), e na segunda, retornarão duas histórias (stories).
   2. Então visitamos a página inicial da aplicação
   3. E por fim aguardamos pela requisição inicial acabar (a que retorna a lista vazia de histórias)
4. Daí, temos o teste propriamente dito, para garantir que o cache funciona
   1. O teste utiliza a biblioteca faker, para gerar palavras aleatórias para a busca que será armezenada em cache.
   2. Logo no início, definimos uma variável chamada count, a qual é inicializada com o valor zero (0). Esta variável será utilizada para incrementarmos tal valor cada vez que uma requisição ocorrer para um mesmo termo buscado.
   3. Depois temos a definição de um outro cy.intercept, o qual intercepta uma requisição de busca pela palavra aleatória, executa uma função que incrementa o contador, e por fim, responde tal requisição com a fixture que retorna uma lista vazia de histórias. Aqui que está o segredo. Ou seja, quando uma requisição para tal termo ocorrer, o contador será incrementado
   4. Então é feita uma busca por tal palavra aleatória, e logo verificamos que o contador foi incrementado corretamente. Agora, em vez de 0 é 1.
   5. Uma busca por outro termo é feita com sua respectiva espera. Neste caso, como é outro termo, o contador não é incrementado. Este outro termo cai em outro cy.intercept (criado no beforeEach).
   6. E por fim, uma nova busca é feita pela palavra aleatória já buscada, com a verificação de que o contador não aumentou, ou seja, continua com valor 1, demonstrando que uma nova requisião não ocorreu para tal rota, provando que o cache funciona. Obs.: se o cache não estivesse funcionando, uma nova requisição ocorreria, o contador seria incrementado para 2 e a verificação final do teste falharia.

Esta é uma alternativa para testar o funcionamento do cache de uma busca quando se fala de testes automatizados com Cypress. Espero que seja útil.

Referência: https://glebbahmutov.com/blog/cypress-intercept-problems/

Veja os detalhes de implementação do comando customizado de busca:

// cypress/support/commands.js

Cypress.Commands.add('search', term => {
  cy.get('input[type="text"]')
    .should('be.visible')
    .clear()
    .type(`${term}{enter}`)
})

E das fixtures:

// cypress/fixtures/empty.json

{
  "hits": []
}

// cypress/fixtures/stories.json

{
  "hits": [
    {
      "title": "Sample 1",
      "url": "https://example.com/1",
      "author": "Author 1",
      "num_comments": 34,
      "points": 91,
      "objectID": 0
    },
    {
      "title": "Sample 2",
      "url": "https://example.com/2",
      "author": "Author 2",
      "num_comments": 55,
      "points": 98,
      "objectID": 1
    }
  ]
}

E aí, gostou dessa “pitada de Cypress“?

Deixa um comentário.

Ficou curioso e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos na Escola Talking About Testing e no Udemy.

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

👋  Até a próxima e bons testes!