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

[Odyvanchik]

[Илья Климов] [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
На что обратить внимание



—————————————————————————

🔗 Продажник:

📥 СКАЧАТЬ КУРС:

Для просмотра содержимого вам необходимо Войти или Зарегистрироваться.

🔐 Хотите получить доступ?

Чтобы увидеть скрытые ссылки и ставить лайки, активируйте VIP-статус.

💎 ПОЛУЧИТЬ ДОСТУП Наш Telegram канал