Como utilizar fixtures com Cypress para isolar os testes do frontend

Hoje na série “pitadas de Cypress”, aprenda como utilizar fixtures em testes automatizados

Para o post de hoje, vou me basear no exemplo do conteúdo de ontem, com uma breve alteração (no conteúdo de ontem você aprendeu como interceptar requisições).

É isso mesmo, vamos direto para um exemplo prático.

A aplicação exemplo é a mesma, ou seja, ela 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 cenário, no entanto, será um pouco diferente. Dessa vez, quero simular que quando o usuário já possui um determinado número de anotações, estas são renderizadas na lista.

O código do teste seria assim.

describe('Lista de anotações', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/notes', { fixture: 'notes' })
      .as('getNotes')
    cy.login()
    cy.wait('@getNotes')
  })

  it('renderiza 6 ".list-group-item"s, sendo o primeiro o botão para criar uma nova anotação', () => {
    cy.get('.list-group-item')
      .should('have.length', 6)
      .first()
      .should('contain', 'Criar nova anotação')
  })
})

E no diretório cypress/fixtures/, haveria um arquivo chamado notes.json, o qual possuiría o seguinte conteúdo.

[
  { "content": "Conteúdo exemplo 1"},
  { "content": "Conteúdo exemplo 2"},
  { "content": "Conteúdo exemplo 3"},
  { "content": "Conteúdo exemplo 4"},
  { "content": "Conteúdo exemplo 5"}
]

Obs.: Vale lembrar que esta é a estrutura de dados que tal aplicação frontend iria normalmente receber do backend via API.

É isso aí.

O teste agora intercepta uma requisição do tipo GET para o endereço '**/notes', e o frontend então renderiza o conteúdo do arquivo cypress/fixtures/notes.json.

Visto que neste arquivo temos 5 anotações, nossas verificações (de que 6 'list-group-item's são renderizados, e que o primeiro item da lista é o botão para a criação de uma nova anotação) passam.

Veja uma screenshot da execução do teste.

O que está achando da série?

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! 🎉