Что мы будем делать ?
Storybook определяется как «мастерская», позволяющая создавать компоненты и страницы изолированно. Конкретно, это интерфейс, в котором мы сможем играть с различными состояниями компонента чтобы проверить, соответствует ли он ожидаемому дизайну, найдите документацию и извлеките реквизиты для использования в различных реализациях. Это инструмент, который все чаще используется, когда создание дизайн-систем, и который можно использовать со все большим количеством фреймворков, хотя изначально он создан для React. Использование Storybook можно расширить с помощью плагинов.
Но если мы передадим наши компоненты в Storybook, Можно ли их там же протестировать напрямую? Ответ – да! Один из инструментов, имеющихся в нашем распоряжении для этого, это хроматический.
Chromatic разработан той же командой, что и Storybook (на самом деле мы можем заметить, что официальный канал Storybook на Youtube был переименован в Chromatic!). Это инструмент, который мы используем в CI, который позволяет нам создавать визуальные нерегрессионные тесты (но не только это!) по историям, созданным в Storybook. Chromatic — это платный инструмент с бесплатной версией, которую мы будем использовать и которая позволит нам сделать 5000 снимков, чего более чем достаточно для нужд этого урока!
Примечание
Плагин в настоящее время находится в стадии бета-тестирования, поскольку я пишу это руководство для версии 8 Storybook, чтобы позволить Chromatic запускаться непосредственно локально, минуя CI, но сейчас мы будем использовать только CI.
Визуальные нерегрессионные тесты идеально подходят для системы дизайна, поскольку позволяют вам проверьте до ближайшего пикселя, если изменения в одном компоненте не влияют на другие компоненты, что может быть очень сложно заметить в сложных проектах. В этом уроке мы увидим:
- комментарий установщик Storybook et Chromatic о новом проекте Vite + React
- комментарий автоматизировать Хроматический в CI
- комментарий создавать и тестировать визуально на хроматическом простом компоненте
- как сделать тесты взаимодействия и запустите их с помощью Chromatic
Предварительные условия
- На вашем компьютере установлен NodeJs версии 16 или выше (
node -vПроверять) - Иметь учетную запись Github
Примечание
Прежде чем начать, я бы все же хотел вас предупредить: Chromatic — очень практичный инструмент, у которого на данный момент нет столь же простого в использовании конкурента. С того момента, как мы начинаем добавлять визуальные нерегрессионные тесты, без них для проекта становится сложно обойтись. Поэтому вполне вероятно, что ваш проект попадет в зависимость от Chromatic, и уже случилось так, что они решат повысить цену на определенные услуги. Поскольку в настоящее время реального конкурента нет, использование Chromatic, к сожалению, означает принятие этой зависимости.
2024-03-28 23:30:26
1711778045
#Блог #Eleven #Labs #Добавьте #визуальное #регрессионное #тестирование #не #только #Storybook #помощью #Chromatic
