Улучшение рабочего процесса без добавления дополнительной работы
В сентябре я анонсировал Chromatic, инструмент для тестирования визуальных снимков для React. Это помогает разработчикам автоматически тестировать каждый компонент пользовательского интерфейса при каждом коммите, чтобы получать уведомления о визуальных регрессиях.
Я был потрясен ответом. Ошибки пользовательского интерфейса продолжают преследовать тысячи разработчиков React - часто они появляются через несколько месяцев после выпуска новых функций. Было очевидно, что не только я страдала регрессами, и вы тоже!
Мы с командой постоянно улучшаем простоту использования, надежность и скорость Chromatic за кулисами. Наша цель - улучшить ваш рабочий процесс, не добавляя работы. С сегодняшнего дня здесь будет публиковаться наш прогресс.
Зарегистрируйтесь ниже для бесплатного и неограниченного использования Chromatic в период раннего доступа!
Рабочие процессы, которые не мешают вам
Chromatic делает снимки изображений всех ваших компонентов и сравнивает их попиксельно с предыдущими версиями, чтобы вы могли выявлять ошибки пользовательского интерфейса. Он подключается к вашей CI-службе и запускает каждую фиксацию. Новые функции упрощают этот процесс.
Умное ветвление и объединение
Наша самая востребованная функция уже доступна! Chromatic теперь изменяет базовый снимок компонента, который он использует для каждой сборки, в зависимости от вашей ветки. При объединении снимки из новой ветки будут автоматически сравниваться с целевой веткой. Все это происходит за кулисами и просто работает. Об этом подробнее здесь".
Своевременные уведомления о статусе запросов на вытягивание
Мы отправили теги GitHub pull-реквесты из ваших тестовых сборок Chromatic. Теперь вы будете получать уведомления о статусе тестовой сборки в разделе запросов на включение. Это означает, что вы можете проверить, есть ли изменения, которые нужно просмотреть, не покидая GitHub. Об этом читайте в документации по непрерывной интеграции.
Игнорировать динамические элементы
Иногда определенные части компонента меняются каждый раз при рендеринге. Например, элемент, отображающий текущее время, или анимированный gif. Если этот динамизм носит преднамеренный характер, вы, вероятно, не захотите повторно одобрять его при каждой тестовой сборке.
Теперь вы можете игнорировать определенный элемент DOM в компоненте, и Chromatic не будет учитывать любые визуальные изменения внутри него. Подробнее читайте в нашей документации по регионам игнорирования.
Тестирование визуальных снимков для Storybook
Благодаря содержательным отзывам пользователей из раннего доступа мы переключаем внимание Chromatic на Сборник рассказов. Как основные специалисты по сопровождению и спонсоры Storybook, оказывается, что это прекрасно дополняет работу, которую мы уже делаем.
Интеграция со сборником рассказов теперь осуществляется без проблем. С последним пакетом (0.7.0) вы можете настроить Chromatic в качестве надстройки Storybook за 60 секунд. Ознакомьтесь с нашей документацией по началу работы!
Настроить Chromatic быстрее, чем исправить одну ошибку. Зарегистрируйтесь для раннего доступа ниже!
🐇 Более быстрый и удобный просмотр снимков
Большинство приложений содержат десятки компонентов с сотнями состояний пользовательского интерфейса между ними. Когда вы выпускаете сложную функцию, многие состояния в конечном итоге нуждаются в проверке. Разработчики тратят удивительно много времени на контроль качества всех этих состояний.
Пересмотр анализов должен быть быстрым и безболезненным. Chromatic теперь использует изящную функцию предварительной загрузки Apollo для значительного увеличения скорости. Кроме того, новые кнопки пакетного просмотра - удобный способ мгновенно подтвердить или отклонить изменения.
📸 Адаптивный размер снимка
Chromatic автоматически подбирает размер снимка изображения в точном соответствии с размерами компонента. Это означает, что каждый компонент легко узнаваем при просмотре вашей библиотеки пользовательского интерфейса.
Мы улучшили размер снимков компонентов, занимающих всю страницу, увеличив размер полной страницы по умолчанию до 1200x900. Это означает, что такие компоненты, как HeroImages, Headers и ItemGrids, будут отображаться с более реалистичными размерами браузера.
Попробуйте Chromatic for Storybook
Chromatic - это инструмент для тестирования визуальных снимков для Storybook.
