Сосредоточение внимания на понимании наиболее часто используемых методов тестирования внешнего интерфейса.

В настоящее время существует несколько типов методов тестирования внешнего интерфейса, которые мы можем использовать, чтобы убедиться, что наш код работает должным образом или нет. Несмотря на то, что среди разработчиков существует путаница, они обычно смешивают и считают разные способы тестирования интерфейса равными, что не соответствует действительности.

После разговоров и дискуссий я понял и пришел к выводу, есть ли у младшего или старшего инженера некоторый опыт тестирования приложения на стороне интерфейса. Когда дело доходит до различий между подходами к тестированию, они обычно путаются между разными методами.

Поэтому в этой статье мы увидим, чем практики тестирования отличаются друг от друга. Точно так же мы увидим, как сделать их полезными для нашего приложения. Эта статья более или менее посвящена тестированию разработки фронтенд-приложений, поэтому мы также увидим, как мы можем использовать инструменты тестирования или фреймворки в нашем фронтенд-проекте.

📔 Тестирование интерфейса

Фронтенд-тестирование в основном используется для проверки функциональности всего приложения, удобства использования, видимости и того, как оно выглядит для конечных пользователей. Обычно это включает в себя проверку элементов пользовательского интерфейса, взаимодействие со сторонними API, компонентами и т. д. приложения, которое видно конечным пользователям.

ℹ️ Полное руководство по фронтенд-тестированию | Perfecto от Perforce

В этой статье мы рассмотрим следующие методы тестирования:

  • Модульные тесты
  • Интеграционные тесты
  • Визуальное регрессионное тестирование
  • Приемочные испытания
  • Сквозные тесты
  • Тесты производительности

Теперь давайте углубимся в понимание этих практик тестирования.

🔥 Модульные тесты

Модульное тестирование — это самый низкий уровень тестирования исходного кода любого приложения. Модульные тесты должны тестировать отдельные компоненты, действия элементов пользовательского интерфейса и функции класса, и они должны тестировать только изолированные части кода без какой-либо зависимости от другого сегмента или внешних вызовов API.

Для приложений на основе React у нас есть два наиболее известных и рекомендуемых инструмента React Testing Library и Jest, как упоминалось здесь Обзор тестирования — React.

Я очень рекомендую Getting Started · Jest, так как он обычно используется в большинстве проектов и, что более важно, поддерживается командой инженеров из Facebook. Поэтому в долгосрочной перспективе мы могли бы легко найти для него поддержку. Простой пример того, как написать тест в Jest, приведен ниже:

Пример:

Функция, которую мы хотим проверить здесь, заключается в том, суммируют ли аргументы «a» и «b» и возвращают ли значение или нет.

Фактический тест Jest проверяет, если мы передаем (1, 1) в качестве аргументов для добавления метода, ожидаемый результат должен быть равен 2. если результат равен 2, мы успешно прошли тест, и если мы утверждаем другое число, кроме 2 , это означает, что наш тестовый пример провалился.

ℹ️ Ресурсы:

Чтобы глубже понять инструменты модульного тестирования, я настоятельно рекомендую проверить следующие ссылки:

🌿 Интеграционные тесты

Интеграционные тесты проверяют совместную работу различных служб и компонентов в приложении и гарантируют совместную работу нескольких частей приложения.

Для внешних интеграционных тестов мы должны визуализировать весь компонент в объектной модели документа (DOM). У нас есть две существенные библиотеки, такие как React Testing Library и Enzyme от Airbnb.

ℹ️ Ресурсы:

Для интеграционных тестов вы можете обратиться к ссылкам ниже:

🌀 Визуальное регрессионное тестирование

Визуальные регрессионные тесты выполняются всякий раз, когда в приложении происходят изменения, но эти тесты уникальны для внешнего интерфейса. Этот тип тестирования фокусируется на интерфейсе приложения, делая несколько снимков экрана в автономном браузере, и после того, как в системе произошло изменение, визуальное регрессионное тестирование начинает сравнивать разные снимки, чтобы обнаружить различия.

Сборник рассказов также является хорошим примером визуального регрессионного тестирования. Эти тесты также могут выполняться автоматически с помощью jest-image-snapshot или Cypress Visual Regression.

Ниже приведены некоторые рекомендуемые платные инструменты и инструменты с открытым исходным кодом для визуального регрессионного тестирования:

ℹ️ Ресурсы:

📣 Приемочные испытания

Приемочные испытания выполняются, чтобы убедиться, что все бизнес-требования системы удовлетворены или нет. При выполнении приемочных тестов основной предпосылкой является проверка того, что все приложение запущено и работает бесперебойно, а также воспроизведение всех действий пользователя, как и ожидалось, и эти тесты также могут отклонять определенные изменения в зависимости от производительности.

Nightmare — довольно впечатляющий инструмент для приемочных тестов, а чтобы подробно прочитать о приемочных тестах для фронтенд-приложения npm: кошмар .

Эта статья Приемочное тестирование приложений React с помощью Jest and Nightmare | Viget уже немного устарел, но все еще достоин того, чтобы прочитать и узнать, как добавить приемочные тесты в приложение.

ℹ️ Ресурсы:

🎓 Сквозные тесты

End-2-End тестирование — это метод, используемый для воспроизведения поведения пользователя с помощью инструментов или программного обеспечения в приложении. Проще говоря, методология тестирования всего потока от начала до конца в приложении.

Цель тестов E2E может быть максимально простой, например, загрузка приложения или веб-страницы, вход или выход из системы, нажатие кнопок, отправка электронных писем, перенаправление на другие страницы и т. д.

Тесты E2E считаются ценными, но, кроме того, они также дороги и иногда сложны в обслуживании. Согласно рекомендациям нескольких разработчиков и инженеров, достаточно иметь различные модульные и интеграционные тесты, а не кучу E2E-тестов.

Насколько я понимаю, причина меньшего количества E2E-тестов заключается в том, что разработчику необходимо полное знание приложения и умение писать качественные E2E-тесты. Тесты E2E также могут занимать много времени (это означает, что результат будет медленнее). Иногда тестирование отрицательного потока также имеет решающее значение, если тесты интегрируются с конечными точками (API).

Некоторые из основных JS-фреймворков, доступных для E2E-тестирования, перечислены ниже.

В нашем приложении мы в основном используем Cypress для E2E-тестирования, и ниже приведен простой пример написания теста на Cypress:

ℹ️ Ресурсы:

🔅 Тесты производительности

Тесты производительности проверяют поведение системы при значительной нагрузке. Эти тесты нефункциональны и могут иметь несколько методов для оценки надежности и стабильности приложения.

Например, если выполняется большое количество запросов, может заметно увеличиться время отклика. Тесты производительности относительно дороги в реализации и эксплуатации, но они могут помочь вам понять, не загрязняют ли вашу систему новые изменения.

Особенно в приложениях на основе React жизненно важные отчеты играют важную роль в измерении производительности приложения и отправке любых результатов в конечную точку аналитики для отслеживания фактической производительности пользователя.

Существуют и другие инструменты/пакеты для оптимизации производительности приложений React, такие как профилировщик, bit.dev, инструменты разработчика реагирования, почему вы рендерите и временная шкала производительности (профилирование браузера). 5 рекомендуемых инструментов для оптимизации производительности в ReactJS

ℹ️ Ресурсы:

💨 Дымовые тесты

Дымовые тесты — это базовые тесты, которые проверяют базовую функциональность приложения. Они предназначены для быстрого выполнения, и их цель — дать вам уверенность в том, что основные функции вашей системы работают должным образом.

Дымовые тесты могут быть полезны сразу после создания новой сборки, чтобы решить, можно ли запускать более дорогие тесты, или сразу после развертывания, чтобы убедиться, что приложение работает правильно в новой развернутой среде.

Согласно Guidelines for Smoke Testing Microsoft, эти тесты являются наиболее экономичным методом выявления и исправления дефектов в программном обеспечении.

Здесь Что такое дымовое тестирование? Тесты проверки сборки с примерами мы можем узнать больше о тестировании дыма и о том, как мы можем написать некоторые тесты дыма для нашего приложения. Как и в приведенной выше ссылке, пакет QA Wolf используется для написания дымовых тестов.

ℹ️ Ресурсы:

Если вас интересуют другие методы тестирования, прочитайте эту статью.



Полное руководство по различным типам тестирования | Perfecto by Perforce
Существует множество различных типов тестирования. Вот краткий обзор наиболее распространенных типов тестирования: Многие из них…www.perfecto.io



Также читайте,



Инструменты оптимизации скорости и производительности веб-сайта
Почему инструменты оптимизации скорости вообще необходимы? Приносят ли они нам пользу в долгосрочной перспективе? Какие инструменты помогают нам оптимизировать…medium.datadriveninvestor.com



🚀 Разработчики: учитесь и развивайтесь, не отставая от того, что важно, ПРИСОЕДИНЯЙТЕСЬ К FAUN.

Свяжитесь со мной в… Twitter, LinkedIn или GitHub

Если вам нравится читать подобные истории и вы хотите поддержать меня как писателя, подумайте о том, чтобы зарегистрироваться, чтобы стать участником Medium. Это 5 долларов в месяц, что дает вам неограниченный доступ к историям на Medium. Если вы зарегистрируетесь по моей ссылке, я получу небольшую комиссию.



Присоединяйтесь к Medium по моей реферальной ссылке — Мухаммад Адил
Прочитайте все истории Мухаммада Адила (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает…medium.com



Купи мне кофе ☕