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

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

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

Подготовка к тестированию

Для того чтобы провести E2E-тестирование с использованием SweetAlert, первым шагом будет подготовка рабочего окружения. На практике для таких целей часто используют инструменты для автоматизации браузеров, такие как Cypress или Puppeteer. Эти инструменты позволяют программно взаимодействовать с веб-страницей, эмулировать действия пользователя и проверять поведение интерфейса.

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

Примерно следующая последовательность шагов будет использоваться при настройке E2E-тестирования с использованием Cypress:

  1. Установка зависимостей через NPM или Yarn:

    npm install cypress --save-dev
npm install sweetalert2 --save

  2. Импорт библиотеки SweetAlert в проект:

    import Swal from 'sweetalert2';

  3. Настройка Cypress для запуска тестов. Обычно это включает настройку cypress.json для указания базового URL и путей для тестов.

Тестирование базового уведомления

После подготовки окружения следующим этапом будет создание простого теста для базового уведомления с использованием SweetAlert. Простейшее уведомление может быть вызвано с помощью вызова метода Swal.fire(), который отображает модальное окно. Этот тест может включать проверку правильности отображения окна и его взаимодействие с пользователем.

Пример базового теста:

it('Показывает уведомление об успехе', () => {
  cy.visit('/'); // Открыть главную страницу

  // Инициация события, которое вызывает уведомление
  cy.window().then((win) => {
    win.Swal.fire('Успех!', 'Операция прошла успешно!', 'success');
  });

  // Проверка отображения уведомления
  cy.get('.swal2-popup').should('be.visible');
  cy.get('.swal2-title').should('contain', 'Успех!');
});

В данном примере:

  • Открывается главная страница.
  • Программно вызывается уведомление с помощью Swal.fire().
  • Проверяется, что уведомление появилось на экране и что его заголовок соответствует ожидаемому.

Тестирование различных типов уведомлений

SweetAlert предоставляет несколько типов уведомлений: success, error, warning, info. Для каждого из этих типов можно создать отдельные тесты, чтобы убедиться, что отображаемое окно имеет соответствующий стиль и содержание.

Пример теста для уведомления об ошибке:

it('Показывает уведомление об ошибке', () => {
  cy.visit('/');

  // Инициация события с ошибкой
  cy.window().then((win) => {
    win.Swal.fire('Ошибка!', 'Произошла непредвиденная ошибка.', 'error');
  });

  // Проверка наличия элемента с классом ошибки
  cy.get('.swal2-popup').should('be.visible');
  cy.get('.swal2-icon--error').should('exist');
  cy.get('.swal2-title').should('contain', 'Ошибка!');
});

Здесь:

  • Создается тест для уведомления типа error.
  • Проверяется, что уведомление отображается с правильным классом и иконкой ошибки.

Тестирование кнопок и взаимодействий

SweetAlert поддерживает кастомизацию кнопок, позволяя задать их текст, стиль, а также поведение при их нажатии. В рамках E2E-тестирования важно проверять не только отображение уведомлений, но и реакции на действия пользователя.

Пример теста с кастомными кнопками:

it('Проверка работы кнопок в уведомлении', () => {
  cy.visit('/');

  // Инициация кастомного уведомления с кнопками
  cy.window().then((win) => {
    win.Swal.fire({
      title: 'Удалить элемент?',
      text: 'Вы уверены, что хотите удалить этот элемент?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Удалить',
      cancelButtonText: 'Отмена'
    });
  });

  // Проверка отображения кнопок
  cy.get('.swal2-popup').should('be.visible');
  cy.get('.swal2-confirm').should('contain', 'Удалить');
  cy.get('.swal2-cancel').should('contain', 'Отмена');

  // Симуляция нажатия на кнопку "Удалить"
  cy.get('.swal2-confirm').click();
  
  // Проверка того, что действие выполнено (например, редирект или сообщение)
  cy.url().should('include', '/deleted');
});

Этот тест проверяет, как работает всплывающее окно с кнопками “Удалить” и “Отмена”, а также тестирует поведение при нажатии на кнопку подтверждения.

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

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

Пример теста для асинхронной операции:

it('Показывает уведомление после асинхронного запроса', () => {
  cy.visit('/');

  // Симуляция асинхронной операции
  cy.intercept('POST', '/api/delete', {
    statusCode: 200,
    body: { message: 'Элемент успешно удалён.' }
  }).as('deleteItem');

  cy.window().then((win) => {
    win.Swal.fire({
      title: 'Удалить элемент?',
      showCancelButton: true,
      confirmButtonText: 'Удалить'
    }).then(() => {
      // Симуляция успешного ответа после подтверждения
      cy.wait('@deleteItem').then(() => {
        win.Swal.fire('Удалено!', 'Элемент был успешно удалён.', 'success');
      });
    });
  });

  // Проверка уведомления о успешной операции
  cy.get('.swal2-popup').should('contain', 'Удалено!');
});

Здесь используется cy.intercept() для перехвата асинхронного запроса и имитации успешного ответа от сервера. После этого проверяется, что уведомление об успешном удалении появляется после завершения асинхронной операции.

Завершение

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

Оглавление