Кипарис в действии
Вчера я немного говорил о Cypress. Сегодня я хочу немного поговорить о тестировании с помощью Cypress и о том, как мы развернули его в проекте, над которым сейчас работаем.
Cypress — это сторонний модуль npm, который мы используем для сквозного тестирования. Сквозное тестирование включает в себя тестирование всего приложения. Мы хотим протестировать все, включая клиент, API, базу данных и другие службы. Этот тип тестирования подготавливает приложение к производству.
Написание тестов с помощью Cypress: начнем с простого
Давайте посмотрим, что такое написание тестов с помощью Cypress.
Библиотека Cypress содержит множество ключевых слов, которые мы можем использовать для достижения наших целей. Вы можете прочитать об этих ключевых словах здесь (https://docs.cypress.io/guides/overview/why-cypress.
Это наш самый первый тест в нашем тестовом файле Cypress. Поскольку наше приложение работает через порт localhost:3000, мы добавили хук beforeEach в начале теста, чтобы высушить код и избежать повторения этой строки перед каждым тестом.
На первый взгляд видно, что синтаксис этого теста очень похож на модульное тестирование. Он начинается с оператора it. Первый параметр принимает строку в качестве аргумента, объясняющего цель, которую мы пытаемся протестировать. Второй параметр принимает стрелочную функцию, содержащую следующие тесты, которые мы хотим выполнить.
Cy — это ключевое слово, которое мы используем, когда хотим получить доступ к библиотеке Cypress. .get() — это ключевое слово Cypress, которое будет искать на странице тег JSX, соответствующий строке, указанной в аргументе. В этом случае мы ищем тег ‹header›, который существует в самом верху нашего приложения. Содержит () — еще одно ключевое слово кипариса, которое будет искать в теге JSX, который мы только что получили из команды .get (), строку, содержащую «Rancid Tomatillos». Таким образом, в этом случае мы проверяем, отображается ли элемент заголовка, содержащий «Rncid Tomatillos», на странице для пользователя. Тестирование элемента заголовка может быть не лучшим способом проверить, загружается ли ваше приложение, но для нас это работает очень хорошо. Может быть, мы хотим проверить больше, чем заголовок? Давайте погрузимся глубже.
Погружение глубже
С помощью Cypress мы также можем протестировать отдельные кнопки на странице. Прежде чем мы добавили React Router в наш проект, нам нужно было, чтобы пользователь мог вернуться на домашнюю страницу после просмотра фильма. Поэтому мы создали один единственный элемент Button на каждой странице, который обрабатывает эту функцию. В этом тесте мы сначала переходим на одну страницу фильма. В следующей строке мы просим Cypress найти элемент кнопки. Следующая строка под номером 22 просит Cypress выполнить щелчок по кнопке. Затем нам нужно оценить, куда попал пользователь после нажатия кнопки. Мы используем .url().should(), чтобы проверить, по какому URL-адресу пришел пользователь. Если пользователь вернется на localhost/3000, тест будет успешным.
На следующий день после того, как мы написали вышеприведенный тест, мы внедрили React Router в наш проект. React Router позволяет одностраничному веб-сайту имитировать функциональность многостраничного веб-сайта. Это означает, что пользователь теперь имеет доступ к кнопкам «вперед» и «назад» в браузере, как если бы он был в реальном веб-приложении.
Мы также можем использовать Cypress, чтобы проверить, успешно ли мы внедрили Router в наш проект. Этот тест очень похож на предыдущий за одним исключением. Вместо того, чтобы искать отдельный элемент с помощью .get(), мы можем использовать ключевое слово Cypress .go() для нацеливания на эти кнопки «назад» и «вперед». Затем мы используем url() и should(), чтобы подтвердить, что пользователь находится там, где ему нужно.
Это только начало тестирования с помощью Router. Я с нетерпением жду дальнейшего изучения этой технологии. Это все на сегодня!
