cypress-multilevel-testing icon indicating copy to clipboard operation
cypress-multilevel-testing copied to clipboard

Um exemplo de aplicação do Cypress para testes em múltiplos níveis

Cypress MultiLevel Testing

O que é Cypress?

Cypress é uma ferramenta para testes de aplicações em múltiplos níveis. Veja isso na prática

Acompanhe o Agilizei ⚡️

Aplicação

Neste projeto, estamos utilizando a aplicação Proffy desenvolvida da NLW #02 da RocketSeat.

Arquitetura

Níveis de testes

Componente

Podemos executar testes de componentes utilizando o Cypress. Neste projeto, usamos:

  • cypress-react-unit-test

Exemplo:

  it('deve ser renderizado com sucesso', () => {
    mount(
      <Router>
        <PageHeader 
          title="TDC2020"
          description="Trocando uma ideia sobre Cypress de ponta a ponta"
        />
      </Router>
    )

    cy.get('strong').should('have.text', 'TDC2020');

API

Podemos executar testes de APIs utilizando o Cypress. Neste projeto, usamos:

  • cy-api (apenas para melhorar a visibilidade do que está sendo enviado/recebido)

Exemplo:

  it('GET deve retornar status 200', () => {

    cy.api({
      method: 'GET',
      url: `${Cypress.env('API_URL')}/connections`
    }).then((connectionsResponse) => {
      expect(connectionsResponse.status).to.eq(200)
    })
  });

UI

Podemos executar testes de UI utilizando o Cypress.

Exemplo:

  it('Acessar a página inicial com conexões realizadas', () => {
    cy.visit('/');

    cy.get('span.total-connections').should('contain.text', '5');
  });