[Илья Климов] Тестирование Vue-приложений (2021)

[Moderator]

Автор: Илья Климов Название: Тестирование Vue-приложений (2021) Описание: Кратко: Серия видео по ключевым аспектам теории 2 real-time семинара (суммарно около 4-5 часов) с разборами реальных примеров тестирования Vue-компонентов с использованием Jest (запись будет снабжена таймкодами для удобной навигации) репозиторий с примерами с семинаров Закрытый чат по тестированию (хочу знать каждую вашу боль!) Доступ к видео: 1 февраля 10:00 по Украине, семинары: 6 и 13 февраля 11:00 (пара часов + общение) Зачем мне это? Теоретическая часть Видео представляют собой небольшие (~15-30 минут) фрагменты теоретических изысканий, объясняющих всё “на пальцах” (а точнее пером по экрану) Что именно тестируется во Vue-компонентах? Вывод компонента в зависимости от props Когда мы передаем такие-то параметры, мы ожидаем что кнопка видна Когда мы передаем такие-то параметры, мы ожидаем, что видна аватарка пользователя с такими-то параметрами Генерирование побочных эффектов Когда пользователь нажимает на вот этот элемент, мы ожидаем что компонент генерирует событие Submit с такими-то параметрами Когда компонент появляется в DOM-дереве, мы ожидаем что компонент вызывает функцию getUser у такого-то объекта Реакция компонента на внешние воздействия Когда мы вводим данные в это поле, мы ожидаем что вот эта кнопка будет включена Когда компонент dropdown генерирует событие change, мы ожидаем что вот это поле будет обновлено Когда вызванная функция возвращает такие-то значения, мы ожидаем что в списке будет ровно три элемента Что предлагает нам @vue/test-utils для тестирования? Жизненный цикл компонента сквозь призму тестирования Холивар: mount vs shallowMount Как выбрать? Стоит ли всегда выбирать одно? Последствия выбора? Бонус: А что поменяется во Vue3? Бонус: Компонентные тесты и Vue: как и когда? Практическая часть Семинар представляет собой написание и критику конкретных тестов на Jest реального кода с пояснением что и для чего применяется. Другими словами: соотношение “документации” к практике ее применения составляет около 30 к 70% по оценке автора Антипаттерны тестирования Vue-компонентов Тестирование computed-свойств Использование setData Использование setProps Использование setMethods Тестирование снапшотами Какие задачи решают снапшоты Когда стоит использовать снапшоты и как Слабые места снапшотов Структура классического Vue-теста Фикстуры Какую задачу решают фикстуры? Почему важно использовать фикстуры, а не писать самому параметры? Аккуратно: мутация фикстур! Признаки здесь надо использовать фикстуры Тестирование компонентов со слотами В чём сложность? Создание простейшего стаба для рендера слота Стабы с динамическими слотами Scoped slots с логикой Когда можно вместо стаба передать настоящий компонент и чем это грозит? Тестирование компонентов с Vuex Создание и передача мока сторы Как портят жизнь `mapActions, map...` Корректно мокаем actions/mutations Тестирование самой сторы Тестирование компонентов с Apollo GraphQL Что для компонента означает использование в нем Apollo? apollo-link-mock На что обратить внимание