Как в UI-тестах подменять/интерсептить сетевые запросы (mock/stub)?

1️⃣ Как кратко ответить

В UI-тестах для подмены или интерсепта сетевых запросов используются инструменты, такие как MockWebServer, WireMock или библиотеки, встроенные в фреймворки тестирования, например, Cypress или Playwright. Эти инструменты позволяют создавать предопределенные ответы на сетевые запросы, что помогает тестировать приложение в изолированной среде без зависимости от внешних сервисов.

2️⃣ Подробное объяснение темы

Подмена или интерсепт сетевых запросов в UI-тестах — это техника, позволяющая тестировать пользовательский интерфейс приложения без необходимости взаимодействия с реальными внешними сервисами. Это достигается путем создания "заглушек" (stubs) или "моков" (mocks), которые имитируют поведение реальных API.

Зачем это нужно?

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

Где применяется?

• В автоматизированных UI-тестах для веб-приложений.
• В мобильных приложениях, где необходимо тестировать взаимодействие с сервером.
• В ситуациях, когда внешние API недоступны или находятся в разработке.

Как это работает?

Пример с использованием Cypress

Cypress — это популярный инструмент для тестирования веб-приложений, который имеет встроенные возможности для интерсепта сетевых запросов.

// Пример теста с использованием Cypress для интерсепта сетевых запросов
​
// Описываем тестовый сценарий
describe('UI Test with Network Interception', () => {
​
  // Перед каждым тестом
  beforeEach(() => {
    // Интерсептируем GET запрос к /api/data и подменяем ответ
    cy.intercept('GET', '/api/data', {
      statusCode: 200, // Устанавливаем код ответа
      body: { data: 'mocked data' } // Устанавливаем тело ответа
    }).as('getData'); // Даем алиас для удобства
  });
​
  // Сам тест
  it('should display mocked data', () => {
    // Переходим на страницу
    cy.visit('/');
​
    // Ожидаем, пока запрос будет завершен
    cy.wait('@getData');
​
    // Проверяем, что на странице отображаются данные из мокированного ответа
    cy.contains('mocked data').should('be.visible');
  });
});

• cy.intercept: Функция для перехвата сетевых запросов. Здесь мы указываем метод запроса ('GET'), URL ('/api/data') и объект с подмененным ответом.
• statusCode: Код HTTP-ответа, который мы хотим вернуть.
• body: Тело ответа, которое будет возвращено вместо реального.
• cy.visit: Переход на тестируемую страницу.
• cy.wait: Ожидание завершения перехваченного запроса.
• cy.contains: Проверка наличия текста на странице.

Пример с использованием MockWebServer

MockWebServer — это инструмент для Android, который позволяет создавать локальный сервер для тестирования сетевых взаимодействий.

// Пример использования MockWebServer в Android тестах
​
// Создаем экземпляр MockWebServer
MockWebServer mockWebServer = new MockWebServer();
​
// Настраиваем сервер перед тестом
@Before
public void setUp() throws Exception {
    mockWebServer.start(); // Запускаем сервер
    // Устанавливаем URL сервера в приложение
    MyApiService.BASE_URL = mockWebServer.url("/").toString();
}
​
// Тестируемый метод
@Test
public void testApiCall() throws Exception {
    // Создаем мокированный ответ
    MockResponse mockResponse = new MockResponse()
        .setResponseCode(200) // Устанавливаем код ответа
        .setBody("{\"data\":\"mocked data\"}"); // Устанавливаем тело ответа
​
    // Добавляем ответ в очередь
    mockWebServer.enqueue(mockResponse);
​
    // Вызываем метод, который делает сетевой запрос
    String result = myApiService.getData();
​
    // Проверяем результат
    assertEquals("mocked data", result);
}
​
// Останавливаем сервер после теста
@After
public void tearDown() throws Exception {
    mockWebServer.shutdown();
}

• MockWebServer: Создает локальный сервер для тестирования.
• mockWebServer.start(): Запускает сервер.
• mockWebServer.url("/"): Возвращает базовый URL для использования в приложении.
• MockResponse: Создает ответ, который будет возвращен на запрос.
• mockWebServer.enqueue: Добавляет ответ в очередь для обработки.
• mockWebServer.shutdown(): Останавливает сервер после завершения тестов.

Эти примеры демонстрируют, как можно эффективно подменять сетевые запросы в UI-тестах, обеспечивая изоляцию и стабильность тестов.