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

Берсик · 28.01.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

На что обратить внимание

Вопросы и ответы

Спойлер
Почему это “мастер-класс”, а не курс
В моей картине мира курс должен обладать рядом признаков:

контролем качества на входе (иначе как понять, что мы способны научить человека?)

домашними заданиями

контролем качества на выходе

Ничего из этого в этом материале нет. Я не представляю, какое тестовое задание можно придумать на курс по тестированию, я осознанно не хочу делать домашние задания, потому что тестирование (и я хочу чтобы это усвоил каждый) чётко привязано и регулируется задачами бизнеса - в разных условиях и требованиях один и тот же код будет протестирован по-разному. Моя задача: сподвигнуть вас на максимально скорое внедрение тестирования в существующий проект, пусть даже в рамках личной инициативы. Я готов отвечать достаточно долго и развернуто на вопросы любой сложности по тестированию и особенно - по его философии
Я не смогу присутствовать лично на семинаре, что я потеряю?
Вы потеряете возможность задать вопросы в реал-тайм и получить ответ сразу же на стриме. Мы всё так же будем крайне рады вас видеть в нашем канале и с удовольствием ответим на ваши вопросы
Какой уровень владения Vue и тестами нужен, чтобы мастер-класс был полезен?
На мастер-классе не будет пояснения базовых концепций тестирования. Возможно
Скрытый текст. Доступен только зарегистрированным пользователям.
поможет их освоить. Также ожидается, что Вы знакомы с терминологией Vue и принципами использования основных его возможностей
Условия возврата денег
Гарантированный возврат в течение 30 дней с момента оплаты без лишних вопросов

Берсик · 31.10.2021

Создай и веди популярный телеграм-канал на любую тему самостоятельно

https://s10.skladchiki.org/threads/telegram-masterskaja-anush-manasjan.114517/

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

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