Дарья Поснова – Snapshot-тесты и как они помогают тестировать дизайн-систему

Transcript

1. Ozon Tech 2023
   Snapshot-ы в тестировании
   дизайн-системы
   Дарья Поснова, старший специалист по тестированию
   

   View Slide

2. Что такое snapshot-тестирование
   2
   

   View Slide

3. Какие компоненты дизайн-системы мы можем тестировать с помощью snapshot-тестов
   Что такое snapshot-тестирование
   3
   Цвета
   Стили
   Состояния
   Шрифты
   Кнопки
   Иконки
   Изображения
   Индикаторы
   

   View Slide

4. Что такое snapshot-тестирование
   4
   Как мы
   тестировали
   дизайн систему
   без snapshot-
   тестов?
   • Тесты на экраны приложения
   
   
   • Ручные прогоны
   
   
   • Могли пропустить баги
   
   
   • Не все элементы дизайн-системы
   уже были использованы в
   приложении, мы не могли их
   увидеть
   

   View Slide

5. Что такое snapshot-тестирование
   5
   Нужны
   
   
   snapshot-тесты
   
   
   на дизайн-
   систему.
   
   
   Почему?
   • Быстро масштабируются
   
   
   • Можно контролировать покрытие
   тестами всех элементов дизайн-
   системы
   
   
   • Проходят быстрее чем обычные
   автотесты и ручные прогоны
   
   
   • Нагляднее
   

   View Slide

6. Что такое snapshot-тестирование
   6
   Что для этого
   нужно?
   • Понимание DS
   
   
   • Структурирование тестов
   
   
   • Интеграция в процесс разработки
   

   View Slide

7. Контракты и макеты
   Понимание дизайн-системы
   7
   

   View Slide

8. Структурирование
   8
   Папка с тестом
   Было
   Стало
   

   View Slide

9. Обновление
   9
   

   View Slide

10. Интеграция в процесс разработки
    10
    

    View Slide

11. Как мы работаем
    со snapshot-тестами
    

    View Slide

12. Что мы используем
    12
    

    View Slide

13. Немного статистики
    13
    700+ snapshot-тестов,
    
    
    из них 150+ на атомы DS
    Прогон тестов
    
    
    на 1 платформе занимает
    
    
    примерно 20 минут
    Snapshot-тест на экран
    
    
    приложения за 2 секунды
    Один snapshot-тест
    
    
    на атом дизайн-системы
    
    
    проходит примерно за секунду
    

    View Slide

14. Подготовка мока
    14
    1. Покрываем много комбинаций
    2. Проводим грумминги, чтобы подсветить опасные
    сочетания
    3. Для иконок достаточно одного теста
    

    View Slide

15. Пример мока и эталона
    15
    

    View Slide

16. Пример мока и эталона
    16
    

    View Slide

17. Пример snapshot-теста
    17
    

    View Slide

18. Автогенерация моков для иконок
    18
    

    View Slide

19. Про фермы
    19
    

    View Slide

20. Отчет, как это было
    20
    

    View Slide

21. Отчет, как это стало
    21
    

    View Slide

22. 22
    Отчет, как это стало
    

    View Slide

23. 23
    Как и что мы планируем улучшать?
    👍
    

    View Slide

24. 24
    Отойти от
    фиксированного
    симулятора/
    эмулятора
    

    View Slide

25. 25
    Сделать
    автогенерацию
    моков из proto-
    файлов
    

    View Slide

26. 26
    Внедрить запуск snapshot-тестов
    
    
    до влития фича-ветки в эпик,
    
    
    чтобы как можно раньше
    
    
    отловить баги
    

    View Slide

27. 27
    Выводы
    • Snapshot-тесты — обязательный пункт при
    тестировании дизайн-системы, так как глазами не
    всегда можно отловить изменения
    
    
    • Изменения видны мгновенно
    
    
    • Тесты легко поддерживать и масштабировать
    

    View Slide

28. [email protected]
    Спасибо за внимание
    Дарья Поснова, старший специалист по тестированию
    

    View Slide