Качество продукта всегда зависит от того, насколько разработчик внимателен. Чем лучше прокачен этот скилл, тем меньше багов и недовольных клиентов.
У меня, например, с этим иногда бывают проблемы. Но к счастью решение есть, и это решение называется автотестами. Автоматизация тестирования позволяет организовать постоянную проверку качества продукта, снимая эту задачу с вас.
И сегодня я расскажу, как настроить автоматизированные тесты во Vue проекте. Появится возможность тестировать как целые страницы, так и отдельные компоненты, подменять запросы сервера, ну и конечно запускать все это в докере.
Давайте представим, что у нас есть Vue проект, который разрабатывается уже тысячу лет и единственные тесты, которыми там еле пахнет – это юниты. То есть функциональные, которые были настроены из коробки и несознательно.
Первое, что мы сделаем, – откроем документацию фреймворка Cypress . Собственно с помощью него мы и будет писать интеграционные тесты. Он довольно хорошо развит и имеет куче фичей, плагинов и прочих вспомогательных штук.
Обязательно почитайте документацию, чтобы понимать, что это и как работает.
Теперь займемся установкой необходимых пакетов.
Откроем консоль в корне проекта и вставим команду ниже
После того, как пакеты успешно установились, добавим основной файл настроек cypress.json . Его нужно создать также в корне проекта и вставить код ниже
Несколько слов о том, что значат эти параметры
- baseUrl — URL, на котором будет запущен cypress браузер
- chromeWebSecurity — позволит открывать небезопасные страницы, даст доступ к iframe’ам и т.д.
- pluginsFile — путь, где хранятся файлы с плагинами для cypress
- supportFile — путь, где хранятся вспомогательные файлы
- fixturesFolder — путь, где хранятся мок-файлы, которыми можно подменять данные api
- integrationFolder — путь, где хранятся файлы c интеграционными тестами
- testFiles — путь, где хранятся все файлы с тестами
- componentFolder — путь, где хранятся файлы с тестами для компонентов
- experimentalComponentTesting — этот флаг обязателен, если хотите тестировать компоненты
- nodeVersion — указать версию node.js
- video — вкл\выкл запись видео о том, как проходят тесты
- viewportWidth — ширина окна браузера
- viewportHeight — высота окна браузера
В настройках уже можно увидеть список файлов и папок, которые нужно создать.
Во Vue папка для тестов располагается в корне проекта и обычно называется tests. Там сейчас уже должна быть создана папка unit , около которой мы создадим еще одну для наших тестов.
Новую папку назовём e2e. В неё добавим еще несколько файлов и папок. В итоге должно получиться вот так
Чтобы оградить вас от лишних заморочек, я подготовил репу с уже настроенным проектом. Вы можете скопировать оттуда всё и не париться https://github.com/denisoed/setup-cypress-vue .
Далее в файл package.json, в блок scripts добавим команду для запуска тестов
Основные шаги мы выполнили, теперь можно запускаться.
Если всё было выполнено правильно, будет открыт браузер со списком наших тестов. Ура!
И в консоли будет вот такая картина
Это можно назвать победой, но не нужно расслабляться, мы еще не закончили.
Настройка сервера для подмены API запросов
Суть – подменить реальный api сервер, дать возможность манипулировать данными.
В качестве mock сервера мы будем использовать библиотеку JSON server . Она работает на базе Express.js , поэтому с настройкой или расширением не должно возникнуть проблем.
Установим пакет
И сразу можно добавить команду для запуска в package.json, заодно и обновим команду для запуска тестов. Теперь первым будет стартовать сервер, потом запустится cypress.
Далее добавим в папке tests новую папку для нашего сервера. Назовем её server .
Повторим процесс, который проделывали с файлами и папками для тестов – просто скопируем их из уже готового проекта.
- Файл server.js — это основной файл для запуска сервера.
- Файл config.js — опции для сервера.
- Папка data — хранит файлы с тестовыми данными, которые будут возвращены json-сервером.
Сейчас вкратце расскажу, как мокать api запросы.
Допустим, ваше приложение запрашивает список пользователей у бэкенда.
К примеру, урл такой https://backend.com/users
В первую очередь идем в файл server.js и обращаем внимание на блок ниже
В нём видно, что если запросить что-то по урлу /users, он вернет данные из переменной users. Здесь, думаю, понятно. Если ваше приложение делает запросы еще на какие-то урлы, то просто копируем блок выше и меняем как нам нужно.
Данные я тоже заранее подготовил, их можно найти в папке data. Выглядят они вот так
Урл мы поменяли, данные подготовили. Этого достаточно, чтобы мокать api. Таким образом мы можем подменять все запросы, описывая в тестах разные кейсы.
Подведем итог.
Когда ваше приложение будет делать запрос на бэкенд, наш mock сервер перехватит его и вернет нужные нам данные. Вот так просто!
“Но как он будет перехватывать запросы?” – спросите вы. Тут тоже ничего сложного.
Обычно в проектах создают .env файл, который нужен для хранения переменных. В нем и хранят ссылку на бэкенд api сервер. Если поменять эту ссылку, соответственно ваше приложение будет ориентироваться на неё. Так мы и сделаем.
В корне проекта нужно создать файл .env или заменить в нем переменную, если файл уже существует. С https://backend.com на http://localhost:8888
http://localhost:8888 — это адрес нашего mock сервера. В файле config.js можно поменять порт, если этот уже занят.
Попробуем запустить сервер, выполнив команду
Если ошибок нет, то увидим такой результат
Mock сервер для тестов успешно подготовлен.
Чтобы закончить эту часть статьи, я хотел бы повторить основную идею:
Когда мы будем тестировать наше приложение, все запросы, которые раньше были направлены на реальный api сервер, будут перехвачены нашим mock сервером. И нам не придется задумываться о том, что бэкенд не работает, или нет интернета, или что-то ещё.
Ваши тесты будут независимы – а это очень важно.
Запуск тестов в Докере
Этот вариант хорош тем, что не нужно устанавливать на вашу рабочую машину кучу npm зависимостей. Докер инкапсулирует весь этот мусор и не позволит загадить систему.
Для этого вам потребуется установить всего лишь Docker и Docker compose .
Начнем копировать необходимые файлы. По той же схеме перетащим их из уже готово проекта https://github.com/denisoed/setup-cypress-vue .
Нам нужны три файла cy-open.yml , docker-compose.e2e.yml , Dockerfile.e2e
Их нужно разместить в корне проекта.
- Dockerfile.e2e — соберёт всё необходимое для контейнера, в котором будут запускаться тесты.
- docker-compose.e2e.yml — настройки для контейнера.
- cy-open.yml — этот файл нужен для запуска браузера из докера.
Обновим файл package.json
При запуске может появиться вот такая ошибка
Чтобы решить её, нужно в консоли запустить эту команду
Результат должен быть таким
Дальше всё должно запуститься нормально
Докер начнет устанавливать и распаковывать пакеты, это обычно 2–5 мин. После поднимет контейнер с тестами и контейнер для запуска браузера. Запустит браузер.
Вот и всё, остаётся только писать тесты и радоваться тому, что проект становится немного стабильнее, а сон ваш крепче.
Заключение
Всё, что я написал выше – это всего лишь настройка, подготовка проекта. Дальше вас ожидают многочасовые поиски информации о том, как правильно писать тесты, мокать данные, мокать плагины и т.д. Там столько всего, что чёрт ногу сломит.
Но что остается главным для достижения любой цели? Конечно же это движение. Теперь у вас под рукой есть мануал, который даст вам старт не только для стабилизации проекта, но и для повышения ваших профессиональных скиллов.
Будьте внимательны!
Ранее опубликовано тут.
