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 (no qual você aprendeu como interceptar requisições), com uma breve alteração.

É 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"}
]

É isso aí.

O teste agora intercepta uma requisição do tipo GET para o endpoint '**/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.

cypress test
Obs.: Na imagem acima você verá que os textos da aplicação estão em inglês. Traduzi no post para facilitar o entendimento.

O que está achando da série?

Aguardo teu feedback.


Este foi 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.

Um comentário em “Como utilizar fixtures com Cypress para isolar os testes do frontend

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