Integration и E2E тесты

Зачем интегрировать Vex с E2E тестами?

E2E (End-to-End) тесты служат для проверки работоспособности всего приложения или его ключевых частей в условиях, максимально приближенных к реальной эксплуатации. Важно, чтобы взаимодействие компонентов, таких как UI, сервер и база данных, проверялось на каждом уровне. Для тестирования библиотек визуальных уведомлений, таких как Vex, интеграция с E2E тестами обеспечивает полноценную проверку взаимодействий между пользователем и системой. В случае Vex задача сводится к проверке корректности отображения уведомлений, их взаимодействия с другими элементами интерфейса и поведением в различных сценариях.

Установка и настройка

Для интеграции Vex с E2E тестами необходимо сначала подготовить тестовую среду. Основным инструментом для E2E тестирования в экосистеме JavaScript является Cypress или Selenium. Ниже рассмотрим использование Cypress для взаимодействия с Vex.

Шаг 1. Установка Cypress

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

npm install cypress --save-dev

После установки можно запустить Cypress с помощью команды:

npx cypress open

Это откроет графический интерфейс Cypress, где можно создавать и запускать тесты.

Шаг 2. Установка Vex

Vex можно установить через npm:

npm install vex-js --save

Для корректной работы с Vex, следует подключить его в нужные файлы:

import vex from 'vex-js';
import 'vex-js/dist/css/vex.css';

Написание E2E теста для Vex

Чтобы протестировать работу уведомлений Vex, необходимо проверить их отображение, скрытие и взаимодействие с другими элементами интерфейса. Рассмотрим создание простого теста с использованием Cypress.

Шаг 3. Написание теста

Пример E2E теста, который проверяет отображение уведомлений Vex:

describe('Тестирование уведомлений Vex', () => {
  beforeEach(() => {
    cy.visit('/');  // Переход на страницу, где будет проверяться работа Vex
  });

  it('Проверка отображения уведомления', () => {
    // Действие, которое вызывает уведомление
    cy.get('#showNotificationButton').click();

    // Проверка, что уведомление отображается на странице
    cy.get('.vex').should('be.visible');
  });

  it('Проверка скрытия уведомления', () => {
    // Действие, которое вызывает уведомление
    cy.get('#showNotificationButton').click();

    // Дожидаемся появления уведомления
    cy.get('.vex').should('be.visible');

    // Действие для закрытия уведомления
    cy.get('.vex').find('.vex-close').click();

    // Проверка, что уведомление скрыто
    cy.get('.vex').should('not.be.visible');
  });

  it('Проверка правильности текста уведомления', () => {
    // Действие, которое вызывает уведомление
    cy.get('#showNotificationButton').click();

    // Проверка текста уведомления
    cy.get('.vex').contains('Уведомление успешно отображено');
  });
});

Важные моменты

  • Обнаружение уведомлений: В Cypress рекомендуется использовать селекторы для поиска элементов, таких как .vex или .vex-close. Это позволяет точно указать, что необходимо найти, и проверить его состояние (видимость, текст и т.д.).
  • Тайминги: Поскольку уведомления могут отображаться с задержкой, важно правильно настроить ожидания (например, с использованием cy.wait() или cy.get() с тайм-аутами). Это гарантирует, что тест будет надёжным и не упустит момент, когда уведомление становится доступным.
  • Взаимодействие с уведомлением: Необходимо учитывать, что уведомления могут автоматически скрываться после определённого времени, либо пользователь может вручную закрыть их. Важно протестировать оба этих сценария.

Обработка динамических уведомлений

Некоторые уведомления могут быть динамическими и изменяться в зависимости от состояния приложения. Для тестирования таких сценариев можно использовать более сложные условия. Например, можно проверить, что уведомление появляется при определённых действиях пользователя или на основе определённых условий состояния:

it('Проверка динамического уведомления', () => {
  cy.get('#triggerDynamicNotificationButton').click();

  // Проверка, что уведомление отображается
  cy.get('.vex').should('be.visible');

  // Проверка текста уведомления, который зависит от состояния
  cy.get('.vex').contains('Загрузка завершена');
});

Интеграция с асинхронными событиями

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

it('Проверка уведомления после асинхронного запроса', () => {
  // Имитация долгого запроса
  cy.intercept('GET', '/api/data', { statusCode: 200, body: { message: 'Данные получены' } }).as('getData');

  // Запуск асинхронного запроса
  cy.get('#loadDataButton').click();

  // Ожидание завершения запроса
  cy.wait('@getData');

  // Проверка появления уведомления
  cy.get('.vex').should('be.visible');
  cy.get('.vex').contains('Данные получены');
});

Параллельные тесты и стратегии для Vex

Когда тесты для Vex выполняются параллельно, важно, чтобы каждое уведомление было независимым от других. Один из способов решения этого — использовать уникальные идентификаторы для каждого уведомления. Vex предоставляет возможность добавлять идентификаторы в настройки уведомлений, что помогает в организации тестов.

vex.open({
  content: 'Уведомление для теста',
  className: 'vex-custom',
  overlayClosesOnClick: true,
  id: 'uniqueTestNotification'
});

В тестах можно будет использовать этот ID для точной проверки нужного уведомления:

cy.get('#uniqueTestNotification').should('be.visible');

Заключение

Интеграция библиотеки Vex с E2E тестами позволяет проверить работоспособность визуальных уведомлений в реальных условиях. Тщательно настроенные тесты помогут гарантировать, что уведомления правильно отображаются, исчезают и корректно взаимодействуют с другими элементами интерфейса. Важность такого тестирования нельзя недооценивать, особенно в случае сложных приложений, где корректное отображение уведомлений имеет большое значение для удобства пользователей.

Оглавление