Introdução

Quando se trata de testes ponta a ponta, o controle de dependências externas pode aumentar significativamente a confiabilidade e a velocidade de seus testes. Cypress, uma estrutura moderna de teste da web, oferece recursos poderosos para simular e stub solicitações HTTP, permitindo simular diferentes cenários sem depender de serviços de back-end reais. Nesta postagem, exploraremos como aproveitar cy.intercept() do Cypress para simular e stub chamadas de API para tornar seus testes mais robustos e eficientes.

Por que zombar e stubbing?

Mocking e stubbing de solicitações HTTP no Cypress oferecem vários benefícios:

1. Isolamento: Teste o front-end independentemente do back-end, garantindo que seus testes não sejam afetados por alterações ou interrupções no back-end.
2. Velocidade: Reduza o tempo de execução de testes evitando chamadas de rede reais.
3. Confiabilidade: Crie condições de teste previsíveis e consistentes simulando várias respostas e casos extremos.
4. Flexibilidade: teste diferentes cenários, como erros, respostas lentas e diferentes cargas de dados, sem precisar de alterações de back-end.

Configurando Cipreste

Se você ainda não instalou o Cypress, você pode configurá-lo com os seguintes comandos:

npm install cypress --save-dev
npx cypress open

Certifique-se de ter a estrutura básica do projeto Cypress pronta antes de prosseguir.

Usando cy.intercept()

O comando cy.intercept() no Cypress permite interceptar e modificar solicitações e respostas de rede. Ele substitui o comando obsoleto cy.route() e oferece mais flexibilidade e poder.

Exemplo básico
Vamos começar com um exemplo básico onde simulamos uma resposta da API:

// cypress/integration/mock_basic.spec.js
describe('Mocking API Responses', () => {
  it('should display mocked data', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 200,
      body: [
        { id: 1, title: 'Mocked Todo 1', completed: false },
        { id: 2, title: 'Mocked Todo 2', completed: true }
      ]
    }).as('getTodos');

    cy.visit('/todos');
    cy.wait('@getTodos');

    cy.get('.todo').should('have.length', 2);
    cy.get('.todo').first().should('contain.text', 'Mocked Todo 1');
  });
});

Neste exemplo, interceptamos uma solicitação GET para /api/todos e fornecemos uma resposta simulada. O as('getTodos') atribui um alias à solicitação interceptada, facilitando a referência em seus testes.

Cenários avançados de simulação

Simulando erros
Você pode simular vários status de erro HTTP para testar como seu aplicativo os trata:

// cypress/integration/mock_errors.spec.js
describe('Simulating API Errors', () => {
  it('should display error message on 500 response', () => {
    cy.intercept('GET', '/api/todos', {
      statusCode: 500,
      body: { error: 'Internal Server Error' }
    }).as('getTodosError');

    cy.visit('/todos');
    cy.wait('@getTodosError');

    cy.get('.error-message').should('contain.text', 'Failed to load todos');
  });
});

Atrasando respostas
Para testar como seu aplicativo lida com respostas lentas de rede, você pode introduzir um atraso:

// cypress/integration/mock_delays.spec.js
describe('Simulating Slow Responses', () => {
  it('should display loading indicator during slow response', () => {
    cy.intercept('GET', '/api/todos', (req) => {
      req.reply((res) => {
        res.delay(2000); // 2-second delay
        res.send({ body: [] });
      });
    }).as('getTodosSlow');

    cy.visit('/todos');
    cy.get('.loading').should('be.visible');
    cy.wait('@getTodosSlow');
    cy.get('.loading').should('not.exist');
  });
});

Zombando de cenários específicos

Zombaria Condicional
Você pode simular respostas condicionalmente com base no corpo ou nos cabeçalhos da solicitação:

// cypress/integration/mock_conditional.spec.js
describe('Conditional Mocking', () => {
  it('should mock response based on request body', () => {
    cy.intercept('POST', '/api/todos', (req) => {
      if (req.body.title === 'Special Todo') {
        req.reply({
          statusCode: 201,
          body: { id: 999, title: 'Special Todo', completed: false }
        });
      }
    }).as('createTodo');

    cy.visit('/todos');
    cy.get('input[name="title"]').type('Special Todo');
    cy.get('button[type="submit"]').click();

    cy.wait('@createTodo');
    cy.get('.todo').should('contain.text', 'Special Todo');
  });
});

Melhores práticas para zombaria e stubbing

1. Use Aliases: Sempre atribua aliases para solicitações interceptadas usando .as(). Isso torna seus testes mais legíveis e fáceis de depurar.
2. Combinar com acessórios: Armazene grandes dados simulados em arquivos de acessórios para melhor manutenção e legibilidade. Use cy.fixture() para carregar equipamentos.
3. Evite zombaria excessiva: Zombe apenas do que for necessário para o teste. A zombaria excessiva pode levar a testes que não refletem cenários do mundo real.
4. Teste chamadas de API reais: Teste periodicamente no back-end real para garantir que seu aplicativo funcione corretamente com dados reais.

Conclusão

Mocking e stubbing no Cypress são técnicas poderosas que podem tornar seus testes mais rápidos, mais confiáveis ​​e mais fáceis de manter. Ao interceptar solicitações HTTP e fornecer respostas personalizadas, você pode criar uma ampla variedade de cenários de teste sem depender de serviços externos. Siga as melhores práticas e exemplos fornecidos neste guia para dominar a zombaria e o stub em seus testes Cypress.

Bom teste!