Введение

Когда дело доходит до сквозного тестирования, контроль внешних зависимостей может значительно повысить надежность и скорость ваших тестов. Cypress, современная среда веб-тестирования, предлагает мощные возможности для имитации и заглушки HTTP-запросов, позволяя моделировать различные сценарии, не полагаясь на реальные серверные службы. В этом посте мы рассмотрим, как использовать cy.intercept() Cypress для имитации и заглушки вызовов API, чтобы сделать ваши тесты более надежными и эффективными.

Почему насмешка и заглушка?

Имитирование и заглушка HTTP-запросов в Cypress дает несколько преимуществ:

1. Изоляция: Протестируйте интерфейсную часть независимо от серверной, чтобы на ваши тесты не влияли изменения или сбои в работе серверной части.
2. Скорость: Сократите время выполнения теста, избегая реальных сетевых вызовов.
3. Надежность: Создавайте предсказуемые и согласованные условия испытаний путем моделирования различных реакций и крайних случаев.
4. Гибкость: Тестируйте различные сценарии, такие как ошибки, медленные ответы и различные полезные данные, без необходимости внесения изменений в серверную часть.

Настройка Cypress

Если вы еще не установили Cypress, вы можете настроить его с помощью следующих команд:

npm install cypress --save-dev
npx cypress open

Прежде чем продолжить, убедитесь, что у вас готова базовая структура проекта Cypress.

Использование cy.intercept()

Команда cy.intercept() в Cypress позволяет перехватывать и изменять сетевые запросы и ответы. Она заменяет устаревшую команду cy.route() и предлагает больше гибкости и мощности.

Базовый пример
Начнем с простого примера, где мы имитируем ответ 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');
  });
});

В этом примере мы перехватываем запрос GET к /api/todos и предоставляем имитируемый ответ. as('getTodos') присваивает псевдоним перехваченному запросу, что упрощает использование его в тестах.

Расширенные сценарии насмешек

Имитация ошибок
Вы можете моделировать различные состояния ошибок HTTP, чтобы проверить, как ваше приложение их обрабатывает:

// 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');
  });
});

Задержка ответов
Чтобы проверить, как ваше приложение обрабатывает медленные ответы сети, вы можете ввести задержку:

// 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');
  });
});

Издевательство над конкретными сценариями

Условное издевательство
Вы можете условно имитировать ответы на основе тела запроса или заголовков:

// 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');
  });
});

Лучшие практики для насмешек и заглушек

1. Использовать псевдонимы: Всегда назначайте псевдонимы перехваченным запросам с помощью .as(). Это делает ваши тесты более читабельными и упрощает их отладку.
2. Объединение с фикстурами: Храните большие макетные данные в файлах фикстур для улучшения удобства обслуживания и удобства чтения. Используйте cy.fixture() для загрузки приборов.
3. Избегайте чрезмерного издевательства: Издевайтесь только над тем, что необходимо для теста. Чрезмерное издевательство может привести к тому, что тесты не будут отражать реальные сценарии.
4. Проверяйте реальные вызовы API: Периодически проверяйте реальный сервер, чтобы убедиться, что ваше приложение правильно работает с реальными данными.

Заключение

Мокинг и заглушки в Cypress — это мощные методы, которые могут сделать ваши тесты быстрее, надежнее и проще в обслуживании. Перехватывая HTTP-запросы и предоставляя специальные ответы, вы можете создавать широкий спектр сценариев тестирования, не полагаясь на внешние сервисы. Следуйте лучшим практикам и примерам, представленным в этом руководстве, чтобы освоить создание макетов и заглушек в тестах Cypress.

Удачного тестирования!