# Тестирование
# Введение
Когда речь заходит о создании надёжных приложений, тесты могут сыграть критически важную роль в способности как отдельного человека, так и команды, создавать новую функциональность, заниматься рефакторингом кода, исправлять ошибки и т.д. Несмотря на то, что существует множество подходов тестирования, выделяют три категории в контексте веб-приложений:
- Модульное (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) тестов и разработки является то, что запуск всего набора тестов занимает много времени. Обычно, они запускаются только в pipelines непрерывной интеграции и развёртывании (CI/CD). Современные E2E фреймворки помогают решить эту проблему с помощью распараллеливания, что позволяет ускорить выполнение CI/CD pipelines. Кроме того, при локальной разработке можно выборочно запускать тесты для страницы, над которой сейчас работаете, а также возможность горячей перезагрузки тестов, что позволит повысить производительность труда разработчиков.
# Первоклассный опыт отладки
Пока разработчики традиционно полагаются на отслеживание логов в окне терминала для определения что пошло не так, современные end-to-end (E2E) фреймворки предоставляют инструменты, с которыми они уже знакомы, например использовать инструменты разработчика браузера.
# Видимость в безголовом (headless) режиме
При запуске end-to-end (E2E) тестов в pipelines непрерывной интеграции / развёртывания, они часто выполняются в безголовых браузерах (т.е., не открывается видимое окно браузера, за которым можно наблюдать). В результате, при возникновении ошибок, критической особенностью, поддерживаемой современными 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, который фокусируется на обеспечении лёгкой настройки, чтобы разработчики могли сосредоточиться на создании простых в написании и надёжных тестах.
Ресурсы: