Илья Климов / javascript.ninja - Мастер-класс: тестирование Vue-приложений (2021)

Кратко:

• Серия видео по ключевым аспектам теории
• 2 real-time семинара (суммарно около 4-5 часов) с разборами реальных примеров тестирования Vue-компонентов с использованием Jest (запись будет снабжена таймкодами для удобной навигации)
• репозиторий с примерами с семинаров
• Закрытый чат по тестированию (хочу знать каждую вашу боль!)
• Доступ к видео: 1 февраля 10:00 по Украине, семинары: 6 и 13 февраля 11:00 (пара часов + общение)

Зачем мне это?
Как показал мой опыт работы в GitLab - тестирование Vue-компонентов не самая сильная сторона даже тех, кто съел собаку на тестировании к примеру backend-кода. Здесь “аукается” то, что во Vue очень много сложных возможностей, которые нетривиально тестировать. Добавьте к этому некие удивительные особенности @Vue/test-utils (у автора порядка 10 принятых pull-requests в репозиторий) - и получите прекрасный коктейль сложного тестирования

Теоретическая часть (записанные видео):
Видео представляют собой небольшие (~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
  • На что обратить внимание