Тестирование Laravel - это здорово! Большую часть времени мы проводим тестирование с помощью PHPUnit, верно? Написание тестов модулей / функций - отличный способ убедиться, что наши коды работают так, как задумано, чтобы мы могли уверенно их развертывать. В большинстве случаев мы проводим тесты с точки зрения разработчика. А иногда мы издеваемся над поведением внешних ресурсов (то есть внешних API-интерфейсов), чтобы наши тесты стали независимыми от внешних факторов. Мы не хотим, чтобы наш тест зависел от внешних систем, что делает тесты неясными.
Может возникнуть вопрос: можем ли мы провести тест с точки зрения пользователя? Ну конечно; естественно. Мы называем это сквозным тестированием (или E2E), при котором мы моделируем реальные пользовательские сценарии от начала до конца.
Сквозное тестирование - это метод, с помощью которого тестируется весь программный продукт от начала до конца, чтобы гарантировать, что поток приложения ведет себя должным образом. Он определяет системные зависимости продукта и гарантирует, что все интегрированные компоненты работают вместе, как ожидалось. (Https://www.katalon.com/resources-center/blog/end-to-end-e2e-testing/)
Потому что большую часть времени сложная система зависит от множества других систем. С помощью E2E-тестирования мы хотим убедиться, что все интегрировано и не содержит ошибок. Если произойдет сбой в какой-либо подсистеме, мы сразу узнаем! Так что написание модульных / функциональных тестов, а также сквозного тестирования - отличный способ повысить качество нашей продукции!
Хорошо, мы знаем, что такое E2E-тестирование. Следующий вопрос: как это сделать? Существует множество платформ для среды тестирования E2E, таких как Cypress, WebdriverJS, Protractor, NightwatchJS и т. Д. Но сейчас мы будем использовать Cypress. Так легко интегрировать Cypress в наш существующий проект Laravel, и именно поэтому мы используем Cypress в этой статье. Пойдем!
Обзор содержания
- Наши цели
- Леса аутентификации Laravel
- Cypress Установка и настройка
- Проверка подлинности
# 1 Наши цели
Прежде чем мы начнем, будет лучше, если мы будем знать, что мы собираемся построить. Итак, чтобы смоделировать тестирование E2E, мы собираемся использовать каркас Laravel Authentication. Если вы не знакомы, структура аутентификации - это функция, с помощью которой у вас сразу же будет страница входа / регистрации аутентификации и ее функции. Затем мы начнем писать тест для имитации пользовательского сценария для регистрации, входа в систему и проверки сеанса пользователя, когда он / она уже вошли в систему.
# 2 Леса аутентификации Laravel
Во-первых, давайте создадим проект Laravel.
composer create-project laravel/laravel --prefer-dist laravel-cypress
Затем нам понадобятся леса для аутентификации. Давайте установим его с помощью этой команды.
composer require laravel/ui
Чтобы установить строительные леса, мы можем легко запустить это.
php artisan ui vue --auth npm install && npm run dev
Вот и все! Если вы запустите свой сервер, вы заметите, что в правом верхнем углу страницы есть кнопки «Войти и зарегистрироваться».
# 3 Установка и настройка Cypress
Хорошо, пора установить Cypress в наш проект. Используйте npm для установки библиотеки.
npm install cypress --save-dev
Затем, чтобы открыть Cypress, введите следующее:
./node_modules/.bin/cypress open
Если что-то не удалось до этих шагов, вам может потребоваться сначала установить Cypress:
node_modules / .bin / cypress.cmd install - force
Если вы открыли Cypress, вы должны увидеть новое окно Cypress.
Не стесняйтесь исследовать примеры тестов, нажав на один из тестов :)
# 4 Тесты аутентификации
Прежде чем приступить к созданию класса тестирования, давайте кое-что обсудим. Если вы уже знакомы с тестами PHPUnit в Laravel, думаю, вы уже знаете о фабрике. Если вы не знакомы с этим, у меня есть быстрое объяснение. Фабрика - это функция, с помощью которой вы можете создать «поддельную» модель данных и сохранить ее в базе данных.
Фабрика полезна, если вы, скажем, хотите создать фиктивную модель пользователя или другие модели и использовать ее в своих тестах. Представьте, что вы хотите создать сценарий, в котором пользователь может купить 3 книги, а затем вам может потребоваться фабрика для создания этих 3 книг перед запуском тестов, верно? Есть смысл?
Иногда фабрика нужна и в тестах Cypress, и да, она нужна нам сейчас. Итак, во-первых, давайте создадим вспомогательный маршрут / функцию, чтобы задание создавало фиктивные данные / фабрику. И нам нужен еще один вспомогательный маршрут для аутентификации пользователя.
Создайте новый файл внутри routes, назовите его _testing.php.
Затем нам нужно импортировать эти маршруты _testing в наши веб-маршруты. Но этот маршрут тестирования используется только тогда, когда мы проводим тестирование, верно? Мы не хотим раскрывать этот маршрут в производственной среде. Давайте сначала создадим промежуточное ПО, а затем импортируем маршрут тестирования в наши веб-маршруты.
php artisan make:middleware TestingRoutes
Довольно простое промежуточное ПО. Если приложение работает в производственной среде, мы прерываем его с кодом состояния 404.
Затем внутри app \ Http \ Kernel.php добавьте только что созданное промежуточное ПО.
Последнее, что нужно сделать, - импортировать наши маршруты _testing в файл веб-маршрутов.
Прохладный! У нас есть маршруты тестирования прямо сейчас. Переходим к реализации Cypress!
Перед созданием тестов нам нужно создать несколько вспомогательных функций в Cypress внутри файла Cypress / support / commands.js.
Итак, что мы делаем, так это создаем несколько вспомогательных команд для выполнения функций входа в систему и создания. Мы можем вызвать эту команду где угодно внутри тестового класса.
Пришло время создать тесты. Создайте новую папку, назовите ее laravel-cypress внутри папки Cypress / integration. И создайте внутри папки новый файл authentication.spec.js.
В строках 3–18 я добавил несколько пустых функций. В нашем примере он ничего не делает, просто хочет показать вам, что у Cypress есть функции, которые запускаются специально.
Затем в строках 21–24 мы утверждаем, что гость не должен иметь доступа к конечной точке / home. Как вы могли догадаться, функция cy.visit () - это способ обращения к URL-адресу.
В строках 27–37 мы пытаемся заполнить форму ввода электронной почты, пароля и т. Д. Функция cy.get () - получить один или несколько элементов DOM с помощью селектора или псевдонима.
Помните, мы создавали команды? Эти команды используются в строках 41 и 54.
Все хорошо? Пришло время протестировать Cypress. Откройте Cypress с помощью этой команды.
./node_modules/.bin/cypress open
Вы должны увидеть открытое новое окно Cypress и щелкнуть только что созданные тесты аутентификации.
Вот и все! Вот как мы создаем сквозной тест с Cypress в нашем проекте Laravel. Что мне нравится в Cypress, так это то, что Cypress имеет полную документацию с простым именованием функций. Конечно, в Cypress есть еще много чего исследовать, но, по крайней мере, мы уже знаем, как внедрить Cypress в наш проект. Спасибо, что прочитали, и увидимся в следующий раз.
