Учебник Vue Test Utils

Введение в тестирование Vue приложений
- Зачем тестировать компоненты Vue
- Место Vue Test Utils в экосистеме тестирования
- История и эволюция библиотеки
- Основные концепции unit-тестирования компонентов
Установка и настройка окружения
- Установка Vue Test Utils
- Выбор и настройка фреймворков тестирования (Jest, Vitest, Mocha)
- Конфигурация для Vue 3 и Vue 2
- Настройка Babel для JSX и Template Syntax
- Конфигурация модульных сборщиков (Webpack, Vite)
- Интеграция с TypeScript
- Настройка конфигурационных файлов проекта
Основы написания тестов
- Структура простого теста
- Функции mount и shallowMount
- Создание обертки компонента (Wrapper)
- Жизненный цикл теста: setup, execute, assert
- Работа с describe и it блоками
- Лучшие практики организации тестовых файлов
- Соглашения об именовании тестов
API Vue Test Utils. Часть 1: Монтирование компонентов
- Функция mount(): полное монтирование
- Функция shallowMount(): поверхностное монтирование
- Функция flushPromises()
- Опции монтирования: props, data, computed, methods
- Наследование атрибутов (attributes)
- Стабы и моки при монтировании
- Порядок выполнения хуков при монтировании
API Vue Test Utils. Часть 2: Навигация по DOM
- Найти элементы селекторами: find и findAll
- Поиск компонентов: findComponent и findAllComponents
- Фильтрация результатов поиска
- Работа с CSS селекторами и атрибутами
- Поиск элементов по тексту
- Навигация по иерархии: parent, element, vm
- Работа с корневым элементом (rootElement)
API Vue Test Utils. Часть 3: Взаимодействие с компонентами
- Получение значений свойств компонента
- Изменение props (setProps)
- Изменение data (setValue для input)
- Триггер событий (trigger)
- Клик по элементам (click)
- Ввод текста и работа с формами
- Отправка форм
- Работа с файловыми инпутами
API Vue Test Utils. Часть 4: Проверка состояния и асинхронность
- Проверка существования элемента (exists)
- Получение текста элемента (text)
- Получение HTML контента (html)
- Получение атрибутов элемента (attributes)
- Проверка классов (classes)
- Проверка видимости (isVisible)
- Ожидание изменений (await wrapper.vm.$nextTick)
- Флюш таймаутов и промисов (flushPromises, jest.useFakeTimers)
- Работа с асинхронными операциями
Тестирование props
- Передача props при монтировании
- Валидация props
- Значения props по умолчанию
- Объектные и массивные props
- Реактивность props
- Изменение props с помощью setProps
- Тестирование обработки неправильных props
Тестирование events
- Триггер кастомных событий
- Проверка испущенных событий (emitted)
- Проверка количества срабатываний события
- Проверка данных события
- Тестирование нативных событий DOM
- Эмуляция пользовательских действий
- Обработка глобальных событий
Тестирование компонентов с слотами
- Понимание слотов и их роль в тестировании
- Тестирование именованных слотов (named slots)
- Тестирование дефолтного слота
- Проверка содержимого слота
- Передача контента в слоты при монтировании
- Слоты с областью видимости (scoped slots)
- Вложенные компоненты со слотами
- Проверка вызова slot-scope параметров
Тестирование вычисляемых свойств и методов
- Тестирование computed свойств
- Проверка изменения computed при изменении data
- Тестирование методов компонента
- Вызов методов из теста
- Зависимые computed свойства
- Методы с побочными эффектами
- Кэширование computed свойств
Тестирование lifecycle hooks
- Тестирование onMounted
- Тестирование onUpdated
- Тестирование onUnmounted
- Тестирование onBeforeMount и onBeforeUpdate
- Тестирование setup композиционного API
- Проверка вызова hooks в правильном порядке
- Управление жизненным циклом в тестах
Работа с Composition API
- Тестирование composables
- Функция useX() в компонентах
- Состояние и реактивность composables
- Тестирование watch и watchEffect внутри composables
- Зависимости и provide/inject
- Сложные логики с несколькими composables
- Mock composables для изоляции компонента
Тестирование v-model
- Понимание v-model механизма
- Тестирование двусторонней привязки
- Проверка modelValue prop
- Проверка update:modelValue события
- Custom v-model с разными имен свойств
- v-model на компонентах
- Множественные v-model привязки
Тестирование условного рендеринга (v-if, v-show)
- Тестирование v-if директивы
- Проверка наличия элементов в DOM
- Тестирование v-show директивы
- Проверка CSS display свойства
- Условный рендеринг разных компонентов
- Переключение между состояниями
- Производительность при изменении видимости
Тестирование списков и v-for
- Тестирование рендеринга списков
- Проверка количества элементов
- Проверка ключей (key attribute)
- Фильтрация и сортировка списков
- Динамическое добавление/удаление элементов
- Вложенные списки
- Оптимизация тестов для больших списков
Тестирование дефектов видимости элементов
- Проверка видимости с isVisible()
- Скрытые элементы и их тестирование
- Элементы вне viewport
- CSS свойства влияющие на видимость
- Анимации и переходы
- Проверка отступов и размеров
- Accessibility и видимость
Стабы и моки
- Понятие стаба и мока
- Стабирование компонентов (stub)
- Стабирование встроенных компонентов (Teleport, Suspense)
- Создание моков для методов
- Моки для модулей и импортов
- jest.mock() и jest.spyOn()
- Контроль вызовов функций
Работа с async/await и Promise
- Тестирование асинхронных компонентов
- Обработка Promise в тестах
- Ожидание изменений состояния (await wrapper.vm.$nextTick())
- flushPromises для флюша всех Promise
- Тестирование компонентов с fetch/axios
- Обработка ошибок в асинхронных операциях
- Таймауты и задержки
Тестирование HTTP запросов
- Перехват и моки HTTP запросов
- Использование MSW (Mock Service Worker)
- Тестирование с axios
- Тестирование с fetch API
- Обработка различных HTTP статусов
- Ошибки при запросах
- Кэширование и повторные запросы
Тестирование состояния приложения (State Management)
- Тестирование Pinia stores
- Тестирование Vuex stores
- Моки для состояния
- Проверка действий (actions)
- Проверка мутаций (mutations)
- Изоляция компонента от store
- Тестирование computed из store
Тестирование маршрутизации (Vue Router)
- Мок Vue Router в тестах
- createRouter для тестов
- Проверка роутов и параметров
- Тестирование навигации
- Работа с query параметрами
- Тестирование guard'ов
Тестирование глобальных плагинов
- Регистрация плагинов в тестах
- Provide и inject в тестах
- Тестирование directive'ов
- Моки глобальных свойств
- Тестирование custom middleware
- Изоляция плагинов
- Сеп up тестового окружения
Тестирование директив
- Тестирование встроенных директив
- Тестирование кастомных директив
- Хуки директив (mounted, updated, unmounted)
- Аргументы и модификаторы директив
- Стабирование директив в компонентах
- Проверка побочных эффектов директив
Snapshot тестирование
- Концепция snapshot тестов
- Создание снимков (toMatchSnapshot)
- Обновление снимков
- Inline snapshot'ы
- Когда использовать snapshot'ы
- Когда избегать snapshot'ов
- Лучшие практики
Тестирование стилей и CSS
- Проверка класса (classes)
- Проверка встроенных стилей (style)
- Тестирование CSS модулей
- Тестирование Scoped CSS
- Проверка CSS переменных
- Тестирование анимаций и переходов
- Тестирование адаптивности
Покрытие кода (Code Coverage)
- Инструменты для измерения покрытия
- Конфигурация coverage отчетов
- Уровни покрытия: statement, branch, function, line
- Анализ отчетов
- Низкое и высокое покрытие: компромисс
- Критерии покрытия в CI/CD
- Инструменты для визуализации
Отладка тестов
- Использование console.log в тестах
- Дебаг режим в IDE
- Использование debugger statement
- Inspection HTML с помощью wrapper.html()
- Логирование состояния компонента
- Визуализация DOM в процессе теста
- Инструменты браузера и Vue DevTools
Лучшие практики и паттерны
- Один assert на тест или группировка
- AAA паттерн (Arrange, Act, Assert)
- Отделение логики от UI
- DRY принцип в тестах
- Избегание тестирования деталей реализации
- Тестирование поведения, а не внутреннего состояния
- Организация тестовых данных (fixtures)
- Готовые компоненты для тестирования
Производительность тестов
- Анализ скорости выполнения тестов
- Оптимизация медленных тестов
- Параллельное выполнение тестов
- Кэширование в тестах
- Минимизация DOM операций
- Ленивая инициализация в setup
- Профилирование тестов
Интеграция с CI/CD
- Запуск тестов в GitHub Actions
- Запуск тестов в GitLab CI
- Запуск тестов в Jenkins
- Конфигурация для различных платформ
- Параллелизм и распределение тестов
- Отчеты и артефакты
- Уведомления о результатах
Миграция и обновления
- Миграция с Vue 2 на Vue 3 тесты
- Обновление Vue Test Utils версий
- Изменения в API между версиями
- Обратная совместимость
- Стратегия постепенной миграции
- Тестирование во время обновления зависимостей
Специальные сценарии и edge cases
- Тестирование компонентов с Teleport
- Тестирование Suspense компонентов
- Тестирование динамических компонентов
- Тестирование рекурсивных компонентов
- Тестирование компонентов с ошибками
- Обработка ошибок с errorCaptured
- Граничные случаи и исключения
Расширенные темы
- Тестирование производительности компонентов
- Профилирование памяти
- Утечки памяти и очистка ресурсов
- Тестирование accessibility (a11y)
- Интеграционные тесты с Vue Test Utils
- End-to-end vs Unit тестирование
- Комбинирование различных подходов
Работа с типами (TypeScript)
- Типизация тестов в TypeScript
- Типы для props и events
- Моки с типами
- Шпионы и их типы
- Типы для store и composables
- Использование generics в тестах
- Strict mode в TypeScript