E2E-тестирование

Библиотека tingle.js предоставляет удобные и простые средства для создания модальных окон на веб-страницах, что особенно полезно для реализации диалоговых окон, подсказок и различных всплывающих интерфейсов. Несмотря на свою простоту в использовании, интеграция tingle.js в более сложные приложения требует тщательной проверки функциональности на разных этапах разработки. Одним из наиболее важных аспектов разработки приложений с использованием tingle.js является тестирование — и в частности, E2E-тестирование (End-to-End).

E2E-тестирование — это процесс проверки работоспособности приложения в целом, от начала до конца, с реальными взаимодействиями пользователя. В этом контексте задача тестирования состоит в том, чтобы убедиться, что модальные окна, созданные с помощью tingle.js, работают должным образом при различных сценариях использования.

Что такое E2E-тестирование?

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

Инструменты для E2E-тестирования

Для E2E-тестирования веб-приложений существует множество инструментов. Наиболее популярные из них:

  • Cypress — современный инструмент для E2E-тестирования, известный своей простотой в использовании и мощной функциональностью.
  • Selenium — один из самых известных инструментов для автоматизированного тестирования, поддерживающий различные браузеры.
  • Puppeteer — библиотека для работы с Chrome и Chromium через Node.js, предоставляет API для управления браузером.

С помощью этих инструментов можно создать тесты, которые автоматически выполняют действия, такие как клик по кнопкам, заполнение форм и взаимодействие с модальными окнами, используя tingle.js.

Настройка tingle.js для тестирования

Перед тем как приступить к E2E-тестированию с использованием tingle.js, необходимо настроить саму библиотеку. Основные шаги включают подключение tingle.js к проекту и создание базовой структуры модальных окон. Вот пример начальной конфигурации:

<!-- Подключение tingle.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.1/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.1/dist/tingle.min.js"></script>

Теперь можно создать простое модальное окно:

const modal = new tingle.modal({
  footer: true,
  stickyFooter: true,
  closeLabel: 'Закрыть',
  closeMethods: ['overlay', 'button', 'escape'],
  onClose: function() {
    console.log('Модальное окно закрыто');
  }
});

// Добавление контента в модальное окно
modal.setContent('<h1>Это тестовое модальное окно</h1>');
modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
  modal.close();
});

// Открытие модального окна
modal.open();

Теперь, когда модальное окно настроено, можно переходить к созданию тестов для проверки его работоспособности.

Создание тестов с использованием Cypress

Cypress — это один из самых популярных инструментов для E2E-тестирования современных веб-приложений. Он предоставляет простой и мощный API для тестирования взаимодействий с веб-страницей.

Установка Cypress

Для начала нужно установить Cypress в проект:

npm install cypress --save-dev

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

npx cypress open

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

Написание теста для модального окна

Предположим, что нам нужно протестировать функциональность модального окна, созданного с помощью tingle.js. Тест должен проверить, что модальное окно открывается, что оно содержит правильный текст, а также что оно закрывается после нажатия кнопки.

Пример теста на Cypress:

describe('Модальное окно с tingle.js', () => {
  it('должно открыться и содержать правильный текст', () => {
    cy.visit('index.html'); // URL страницы с модальным окном
    cy.get('.tingle-modal').should('not.be.visible'); // Проверяем, что модальное окно скрыто

    // Открываем модальное окно
    cy.get('.open-modal-btn').click();

    // Проверяем, что модальное окно открылось
    cy.get('.tingle-modal').should('be.visible');

    // Проверяем, что в модальном окне есть правильный текст
    cy.get('.tingle-modal .tingle-modal__content h1').should('contain', 'Это тестовое модальное окно');
  });

  it('должно закрыться по клику на кнопку "Закрыть"', () => {
    cy.get('.open-modal-btn').click(); // Открываем модальное окно
    cy.get('.tingle-btn--primary').click(); // Кликаем по кнопке закрытия

    // Проверяем, что модальное окно закрыто
    cy.get('.tingle-modal').should('not.be.visible');
  });
});

Этот тест выполняет несколько важных проверок:

  1. Открытие модального окна: тест проверяет, что модальное окно появляется на экране после клика по кнопке.
  2. Проверка содержимого: убедитесь, что текст внутри модального окна правильный.
  3. Закрытие модального окна: проверяется, что при нажатии кнопки “Закрыть” модальное окно исчезает.

Обработка асинхронных событий

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

В Cypress можно использовать команду cy.wait() для ожидания завершения асинхронных операций:

it('должно корректно работать с асинхронными данными', () => {
  cy.visit('index.html');
  
  cy.get('.load-data-btn').click(); // Кликаем по кнопке, которая загружает данные

  // Ожидаем загрузку данных и появления нового контента
  cy.wait(1000); // Ждем 1 секунду

  // Проверяем, что данные появились в модальном окне
  cy.get('.tingle-modal .data-content').should('contain', 'Загруженные данные');
});

Кроме того, Cypress позволяет работать с сетевыми запросами, используя cy.intercept(), чтобы перехватывать и имитировать ответы от сервера.

Заключение

E2E-тестирование с использованием tingle.js позволяет убедиться, что модальные окна работают корректно в различных условиях. Инструменты, такие как Cypress, позволяют автоматизировать процесс тестирования, проверяя как открытие, так и закрытие модальных окон, а также их взаимодействие с другими компонентами страницы. Правильное использование E2E-тестов в процессе разработки помогает избежать многих ошибок и делает приложение более стабильным.

Оглавление