# Тестирование
# Введение
Когда заходит речь о создании надёжных приложений — тесты могут сыграть критически важную роль в способностях как отдельного человека, так и целой команды, создавать новую функциональность, заниматься рефакторингом кода, исправлять ошибки и т.д. Несмотря на то, что существует множество подходов к тестированию, в контексте веб-приложений выделяют три категории:
- Модульное (unit) тестирование
- Компонентное тестирование
- End-To-End (E2E) тестирование
Цель этого раздела — помочь в ориентировании по экосистеме тестирования и выбору подходящих инструментов для приложения Vue или библиотеки компонентов.
# Модульное (unit) тестирование
# Введение
Модульные тесты позволяют изолированно проверять отдельные части кода. Его цель — предоставить разработчикам уверенность в коде. Создание тщательных и содержательных тестов позволяет быть увереннее, что при разработке новых функций или рефакторинге кода существующих частей, приложение остаётся функциональным и стабильным.
Модульное тестирование приложения Vue ничем существенно не отличается от тестирования других типов приложений.
# Выбор фреймворка
Поскольку советы по модульному тестированию часто не зависят от фреймворка, вот несколько основных рекомендаций, которые следует иметь в виду, оценивая какой инструмент модульного тестирования лучше всего подходит для приложения.
# Первоклассное информирование об ошибках
Когда тесты падают, очень важно, чтобы фреймворк для модульного тестирования выдавал полезную информацию об ошибках. Это работа assertion-библиотеки. Качественные сообщения об ошибках помогают минимизировать время, необходимое для отладки проблемы. Кроме уведомления об упавшем тесте, такие библиотеки предоставляют контекст, объясняющий почему упал тест, например что ожидалось, а что было получено.
Некоторые фреймворки для модульного тестирования, такие как Jest, уже включает в себя assertion-библиотеку. В других, например Mocha, потребуется установить assertion-библиотеку отдельно (обычно Chai).
# Активное сообщество и команда
Поскольку большинство фреймворков для модульного тестирования имеет открытый исходный код, то наличие активного сообщества может сыграть решающее значение для некоторых команд, которые планируют поддерживать свои тесты в течение длительного периода времени и должны быть уверены, что проект будет активно поддерживаться. Кроме того, активное сообщество имеет преимущество в том, что оно может оказать большую поддержку всякий раз при возникновении проблем.
# Фреймворки
Хотя в экосистеме существует множество инструментов, здесь приведены лишь некоторые популярные инструменты для модульного тестирования, используемые в экосистеме Vue.js.
# Jest
Jest — фреймворк для тестирования JavaScript, которые фокусируется на простоте. Одной из его уникальных особенностей является возможность создания snapshot-тестов в качестве альтернативного способа проверки модулей приложения.
Ресурсы:
# Mocha
Mocha — фреймворк для тестирования JavaScript, который фокусируется на гибкости. Благодаря этой гибкости можно выбирать различные библиотеки для выполнения нужных функций, таких как spying (например, Sinon) или assertions (например, Chai). Ещё одной уникальной особенностью Mocha является то, что запускать тесты можно не только в Node.js, но и в браузере.
Ресурсы:
# Компонентное тестирование
# Введение
Для тестирования большинства компонентов Vue их потребуется примонтировать к DOM (неважно, виртуальному или реальному), чтобы убедиться в их работоспособности. Это ещё одна концепция, которая не зависит от фреймворка. Поэтому были созданы фреймворки для тестирования компонентов, которые предоставляют пользователям возможность сделать это надёжным способом, в тоже время поддерживая специфические возможности Vue, такие как интеграцию с Vuex, Vue Router или другими Vue-плагинами.
# Выбор фреймворка
В следующем разделе приведены рекомендации, которые стоит учитывать при оценке, какой фреймворк для тестирования компонентов лучше всего подходит для приложения.
# Оптимальная совместимость с экосистемой Vue
Неудивительно, что одним из первых критериев, которым должна обладать библиотека для тестирования компонентов, является совместимость с экосистемой Vue. Хотя это может показаться излишним, но некоторые ключевые особенности по интеграции позволяют тестировать однофайловые компоненты (SFC), Vuex, Vue Router и любые другие плагины Vue, которые используются в приложении.
# Первоклассное информирование об ошибках
Когда тесты падают, очень важно чтобы фреймворк для тестирования компонентов предоставлял полезную информацию об ошибках, которая поможет свести к минимуму время, необходимое для отладки проблемы. Кроме уведомления об упавшем тесте, такие библиотеки предоставляют контекст, объясняющий почему упал тест, например что ожидалось, а что было получено.
# Рекомендации
# Vue Testing Library (@testing-library/vue)
Vue Testing Library — набор инструментов, ориентированных на тестирование компонентов без привязки к деталям реализации. Разработанная с учётом доступности, она позволяет также легко проводить рефакторинг.
Главный её принцип в том, что чем больше тесты похожи на то, как будет использоваться программное обеспечение, тем больше уверенности они могут обеспечить.
Ресурсы:
# Vue Test Utils
Vue Test Utils — официальная библиотека для низкоуровневого тестирования компонентов, которая была написана для предоставления доступа к специфическим API Vue. Новичкам в тестировании приложений Vue, рекомендуем использовать библиотеку Vue Testing Library, которая является абстракцией над Vue Test Utils.
Ресурсы:
- Официальная документация Vue Test Utils (opens new window)
- Vue Testing Handbook (opens new window) от Lachlan Miller
# End-to-End (E2E) тестирование
# Введение
В то время как модульные тесты предоставляют разработчикам некоторую степень уверенности в коде, с другой стороны модульные тесты и компонентное тестирование ограничены в своих возможностях по обеспечению целостного охвата приложения при публикации в production. В результате, end-to-end (E2E) тесты обеспечивают покрытие того, что, возможно, является наиболее важным аспектом приложения: что происходит, когда пользователи на самом деле используют приложение.
Другими словами, E2E тесты проверяют сразу все уровни приложения. Это не только код фронтенда, но и работа всех связанных сервисов и инфраструктуры сервера в условиях которых будут работать пользователи. Проверяя, как действия пользователя влияют на приложение, E2E тесты часто являются ключом к большей уверенности в том, что приложение работает корректно или нет.
# Выбор фреймворка
Хотя изначально end-to-end (E2E) тестирование приобрело негативную репутацию из-за ненадёжных (flaky) тестов и замедления процессов разработки, современные инструменты E2E продвинулись далеко вперёд в создании более надёжных, интерактивных и полезных тестов. В следующих разделах приведены некоторые рекомендации по выбору средств тестирования E2E для приложения.
# Кросс-браузерное тестирование
Одним из основных преимуществ end-to-end (E2E) тестирования является возможность тестирования приложения в нескольких браузерах. И хотя может показаться желательным добиться 100% кросс-браузерного покрытия, важно отметить, что это снижает отдачу от ресурсов команды из-за дополнительных затрат по времени и машинной мощности, необходимых для последовательного проведения в каждом из них. Поэтому важно учитывать этот компромисс при выборе объёма кросс-браузерного тестирования, необходимого приложению.
Совет
Одним из популярных способов для решения проблем, связанных с браузерами, является использование инструментов мониторинга приложений и уведомлений об ошибках (например, Sentry, LogRocket, и т.д.) для браузеров, которые используются не так часто (например, < IE11, более старые версии Safari, и т.д.).
# Быстрые циклы обратной связи
Одна из основных проблем end-to-end (E2E) тестирования и разработки заключается в том, что запуск всего набора тестов занимает много времени. Обычно, это делается только в конвейерах непрерывной интеграции и развёртывании (CI/CD). Современные E2E фреймворки помогли решить эту проблему, добавив функцию распараллеливания, что позволяет конвейерам CI/CD часто работать в разы быстрее. Кроме того, при локальной разработке есть возможность выборочного запуска тестов для страницы, над которой сейчас работаете, а также горячая перезагрузка тестов, которая позволит ускорить рабочий процесс и производительность разработчиков.
# Первоклассный опыт отладки
В то время как разработчики традиционно полагались на отслеживание логов в окне терминала, чтобы определить, что пошло не так в тесте, современные end-to-end (E2E) фреймворки предоставляют инструменты, с которыми они уже давно знакомы, например использование инструментов разработчика браузера.
# Наблюдаемость в безголовом (headless) режиме
Когда end-to-end (E2E) тесты выполняются в конвейерах непрерывной интеграции / развёртывания, они часто выполняются в безголовых браузерах (т.е., не открывается видимое окно браузера, за которым можно наблюдать). В результате, когда возникают ошибки, критически важной функцией E2E фреймворка становится поддержка просмотра снимков и/или видео приложения на различных этапах тестирования, чтобы понять, почему возникла ошибка. Исторически сложилось так, что поддерживать эти интеграции было достаточно утомительно.
# Рекомендации
Хотя в экосистеме существует множество инструментов, вот несколько распространённых end-to-end (E2E) фреймворков, которые используются в экосистеме Vue.js.
# Cypress.io
Cypress.io — фреймворк для тестирования, который фокусируется на повышении производительности разработчиков, предоставляя возможности по надёжному тестированию приложений и обеспечении первоклассного опыта разработчиков.
Ресурсы:
- Официальный сайт Cypress (opens new window)
- Официальный плагин Vue CLI Cypress (opens new window)
- Cypress Testing Library (opens new window)
# Nightwatch.js
Nightwatch.js — фреймворк для end-to-end тестирования, который можно использовать для тестирования веб-приложений и веб-сайтов, а также модульного и интеграционного тестирования Node.js.
Ресурсы:
- Официальный сайт Nightwatch (opens new window)
- Официальный плагин Vue CLI Nightwatch (opens new window)
# Puppeteer
Puppeteer — библиотека Node, которая предоставляет высокоуровневый API для управления браузером и может работать в паре с другими инструментами для запуска тестов (например, Jest) для тестирования приложения.
Ресурсы:
# TestCafe
TestCafe — E2E-фреймворк на Node.js, который фокусируется на обеспечении простоты настройки, чтобы разработчики могли сосредоточиться на создании тестов, которые просты в написании и при этом надёжны.
Ресурсы: