$30 off During Our Annual Pro Sale. View Details »

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

Ozon Tech
August 30, 2023

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

Ozon Tech

August 30, 2023
Tweet

More Decks by Ozon Tech

Other Decks in Technology

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