04

Unit Tests

Unit-тестирование

Цель: изучить основы написание юнит-тестов и научиться писать тесты для логики и компонентов Vue с помощью vitest и Vue Test Utils.

Порядок выполнения лабораторной работы

Вам предстоит написать как модульные тесты для предметной области, так и тесты для vue компонентов. Цель Тестирования - это не достижение 100-процентного покрытия, а обеспечение работы критических путей вашего приложения и поддержание качества кода.

Подготовка

Изучите основные функции фреймворка для тестирования vitest и работу с vue test utils.

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

Основная задача

Вычисления

В вашем коде есть функции, которые должны осуществлять только вычисления, например расчет координат цветов или расчет цветовых гармоний. Покройте данные функции unit-тестами. Помните про структуру тестов arrange, act, assert и что act должен быть один.

Компонент

Выберите один из компонентов Vue и покройте его работу тестами. Изучите структуру компонента, уделяя особое внимание свойствам (props), испускаемым событиям (emit) и вычисляемым свойствам (computed). При тестировании отрисовки компонентов, проверяйте, что они выводят правильные результаты на основе переданных значений в свойства (props), они правильно реагирует на взаимодействие пользователя (например, на нажатие кнопки), они передают правильные события своим родительским компонентам.

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

Требования к тестам

  • Все тесты должны быть одной директории
  • Тесты вычислений должны находиться в каталоге директории unit, а тесты компонентов в components
  • Соблюдайте соглашение об именовании тестов [name].spec.js
  • Пишите понятные описания тестов
  • Следуйте шаблону Arrange-Act-Assert
  • Используйте значимые утверждения (assertions)
  • Учитывайте граничные случаи
  • Комментируйте сложные тестовые сценарии

Github

Зафиксируйте результаты работы с помощью системы контроля версий git в репозиторий на github. Отправьте коммиты на ваш репозиторий в Classroom.

Результат выполнения

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

Источники