Адаптивное тестирование компонентов пользовательского интерфейса

Протестируйте несколько окон просмотра и установите задержку захвата

От простой кнопки до адаптивного экрана все может быть компонентом. Сегодняшний выпуск включает два Chromatic API, которые открывают безграничные возможности тестирования:

📱 viewports позволяет назначать размеры экрана для тестирования адаптивных компонентов пользовательского интерфейса. Это полезно для людей, которые собирают сложные функции и экраны с помощью компонентов.
⏱ delay позволяет отложить создание снимков на фиксированный период времени. Это полезно, если у вас есть анимация, запускаемая JavaScript (например, модальные окна, «анимация в») или вам нужно дождаться сторонних функций.

Хроматическая комбинация API новых параметров Storybook 4.0 обеспечивает удобство работы разработчика, удобное для будущего. Обновите пакет storybook-chromatic, чтобы получить новые функции. Наша цель - расширить охват тестированием пользовательского интерфейса с меньшими затратами.

Видовые экраны для отзывчивого пользовательского интерфейса

Разработчики создают компоненты пользовательского интерфейса, которые могут реагировать на любую ширину устройства. Новый параметр видовых экранов помогает вам определить один или несколько размеров видовых экранов для захвата вашего компонента.

Вы можете назначить видовые экраны истории, компоненту или даже целому сборнику рассказов. Вот пример добавления области просмотра к истории:

storiesOf(‘MyComponent’, module)
   .add(‘story’, () => <MyComponent with=”props” />, {
   chromatic: { viewports: [320, 1200] },
});

Это указывает Chromatic захватить ваш компонент с шириной области просмотра 320 пикселей и 1200 пикселей. Нет постороннего импорта или внешних зависимостей.

Подробнее об использовании видовых экранов можно узнать здесь →

Снимок с задержкой

Компоненты иногда запускают пользовательские взаимодействия при рендеринге. Например, анимация на основе JavaScript. С задержкой вы можете указать Chromatic подождать определенное время, чтобы ваша история перешла в желаемое состояние. Вот пример настройки задержки для истории:

storiesOf(‘MyComponent’, module)
   .add(‘story’, () => <MyComponent with=”props” />, {
   chromatic: { delay: 300 },
});

Это откладывает создание снимков на 300 мс, пока ваш компонент становится презентабельным.

Подробнее об использовании задержки здесь →

Исправления ошибок и улучшения

🔄 Интеллектуальная повторная попытка загрузки ресурса
В редких случаях такие ресурсы, как изображения и шрифты, не загружаются, что приводит к неправильным снимкам. Теперь мы разумно пытаемся повторить попытку, чтобы у активов было больше шансов на загрузку.

📦storybook-chromatic
В пакете улучшена поддержка Windows, исправлены исправления для Node v6, а также можно записывать истории с помощью элемента <canvas>.

📚 Поддержка —-storybook-build-dir (бета)
Если вы уже создаете копию своей Storybook, используйте ее, чтобы загрузить созданную Storybook на наши серверы. Это означает, что ваши сборки будут быстрее и надежнее.

Chromatic for Storybook - от сопровождающих Storybook

Наша цель - сделать автоматическое визуальное тестирование в Storybook бесшовным. В каждом выпуске мы создаем функции, которые расширяют охват тестирования пользовательского интерфейса, а также экономят ваше время и не мешают. Создать такой простой продукт довольно сложно.

Попробуйте Chromatic сегодня

Адаптивное тестирование компонентов пользовательского интерфейса