Тестирование обработки исключений localStorage с помощью Cypress

Как протестировать обработку исключений localStorage с помощью Cypress.


Обработка ошибок Web Storage

При разработке веб-сайта, который подразумевает использование Web Storage, необходимо обрабатывать возможные исключения. Из документации MDN:

«Разработчики должны убедиться, что всегда отлавливают возможные исключения из [localStorage.]setItem()«.

Некоторые из причин, по которым могут возникать исключения localStorage, следующие:

  • Браузер пользователя может быть настроен на отказ в разрешении сохранять данные для указанного происхождения.
  • Хранилище переполнено.

Приложение должно принимать это во внимание, обрабатывать возможные ошибки и действовать в соответствии с ними.


Обработка ошибок должна быть протестирована

В этой статье мы будем считать, что наше веб-приложение правильно обрабатывает исключения Web Storage и выводит уведомление, когда localStorage отключен или заполнен. Это замечательно, но, поскольку это может рассматриваться как еще одна функция нашего приложения, мы должны ее протестировать, верно?

Нет проблем, в этой статье мы разберемся, как использовать плагин cypress-localstorage-commands для имитации отключения localStorage, а затем напишем тест, проверяющий правильность отображения нашего уведомления.


Плагин cypress-localstorage-commands

Плагин cypress-localstorage-commands расширяет команды Cypress cy методами localStorage. Он позволяет:

  • Сохранять localStorage между тестами и файлами спецификаций
  • Отключать localStorage для проверки обработки ошибок 👍.
  • Получать, устанавливать и удалять значения из localStorage.

Установка

Плагин распространяется через NPM и должен быть установлен как одна из devDependencies вашего проекта:

npm i --save-dev cypress-localstorage-commands
Вход в полноэкранный режим Выйти из полноэкранного режима

Затем импортируйте плагин в начало файла поддержки вашего Cypress (обычно cypress/support/e2e.js для типа тестирования e2e):

import "cypress-localstorage-commands";
Войти в полноэкранный режим Выйти из полноэкранного режима

Это расширит команды Cypress cy, добавив команды плагина.

Примечание: Для некоторых функций плагин также требует установки своих событий Node.js, но это не требуется для отключения localStorage, поэтому в данном руководстве мы пропустим этот шаг.


Моделирование отключенного localStorage

Теперь, когда плагин установлен, нам доступны все его команды в объекте Cypress cy. Давайте воспользуемся командой disableLocalStorage для имитации отключения localStorage:

describe("when localStorage is disabled", () => {
  beforeEach(() => {
    cy.disableLocalStorage();
    cy.visit("/");
  });
});
Войти в полноэкранный режим Выйти из полноэкранного режима

Это деактивирует localStorage и приведет к посещению страницы.


Тестирование обработки ошибок

Теперь нам осталось написать несколько тестов, проверяющих ожидаемое поведение веб-страницы при отключении localStorage. Например:

describe("when localStorage is disabled", () => {
  beforeEach(() => {
    cy.disableLocalStorage();
    cy.visit("/");
  });

  it("should display localStorage warning", () => {
    cy.get("#localstorage-warning").should("be.visible");
  });

  it("should display accept-cookies button disabled", () => {
    cy.get("#accept-cookies").should("be.disabled");
  });
});
Войти в полноэкранный режим Выход из полноэкранного режима

Тестирование различных ошибок

Если приложение обрабатывает различные исключения localStorage, мы также можем использовать команду cy.disableLocalStorage для имитации всех этих ошибок. Она позволяет передать пользовательскую ошибку в качестве параметра. Таким образом, мы можем имитировать различные ошибки и проверить ожидаемое поведение для каждого случая. Например:

describe("when localStorage throws X error", () => {
  beforeEach(() => {
    cy.disableLocalStorage({
      withError: new Error("X"),
    });
    cy.visit("/");
  });

  it("should display X error message", () => {
    cy.get("#localstorage-error").should("have.text", "X");
  });
});
Войти в полноэкранный режим Выход из полноэкранного режима

Заключение

  • Возможные исключения Web Storage должны быть пойманы.
  • Если наше приложение обрабатывает исключения localStorage, мы должны протестировать его, как и любую другую функцию.
  • Мы можем использовать плагин cypress-localstorage-commands Cypress для имитации исключений localStorage и написать соответствующие тесты.

Оцените статью
devanswers.ru
Добавить комментарий