Придбаний [javascript.ninja] тестування Vue-додатків (Ілля Клімов)

[Gadzhi]

Переглянути вкладення 73345
​

коротко:
Серія відео з ключових аспектів теорії
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 і тестами потрібен, щоб майстер-клас був корисний?
На майстер-класі не буде пояснення базових концепцій тестування. Можливо наш майстер клас з тестування JavaScript допоможе їх освоїти. Також очікується, що Ви знайомі з термінологією Vue і принципами використання основних його можливостей

Умови повернення грошей
Гарантоване повернення протягом 30 днів з моменту оплати без зайвих питань

https://privatelink.de/?https://docs.google.com/document/d/16vvv9DgndPL4b_My1zBROI0TjQdwoxQdXG2tqgX2F3o/edit#