Storybook - Быстрый курс по работе и тестированию с React

• Антон представляет инструмент Storybook для визуального тестирования и документирования компонентов.  

• Storybook поддерживает множество сборщиков и позволяет тестировать компоненты в изоляции.  

• Антон планирует использовать Storybook в проекте системы обучения для структурирования и тестирования компонентов.  

• Антон показывает проект, построенный по Figma, и объясняет, как инициализировать Storybook.  

• Storybook автоматически определяет проект и конфигурирует зависимости.  

• В случае проблем с определением проекта, можно вручную установить Storybook и настроить его.  

• Антон показывает интерфейс Storybook, включая документацию, группы компонентов и сами компоненты.  

• Можно настраивать фон, сетку, отображение на разных разрешениях и добавлять общие списки.  

• Интерфейс включает кнопки для запуска тестов и быстрого перемещения между компонентами.  

• Антон добавляет зависимости и настраивает Storybook для проекта.  

• Создает первую историю для компонента Button, описывая мета-информацию и дефолтное состояние.  

• Настраивает структуру папок для более плоского отображения компонентов.  

• Антон настраивает структуру папок для более плоской структуры.  

• Использует автодок для генерации документации по тегу.  

• Настраивает внешний вид кнопки и фон для корректного отображения.  

• Переход в превью для настройки параметров, включая бэкграунд.  

• Указание дефолтного значения бэкграунда и описание его значений.  

• Импорт стилей из модулей для корректного отображения кнопок.  

• Добавление новых состояний кнопок и их тестирование.  

• Возможность добавления дискрипшенов и дополнительных параметров.  

• Создание документации вручную и использование автодоксов.  

• Различие между визуальным тестированием и снапшотами.  

• Регистрация в хроматике для визуального тестирования.  

• Процесс создания и сравнения снапшотов компонентов.  

• Создание новых историй для тестирования инпута.  

• Импорт компонента инпут и настройка его параметров.  

• Создание простого компонента для тестирования.  

• После сохранения новой истории в Storybook появляется автодокументация.  

• Декораторы позволяют изменять внешний вид компонента, например, фиксируя размеры элементов.  

• Для интерактивных тестов используется функция play, которая асинхронно рендерит элементы на канвасе.  

• Для написания интерактивных тестов используется функция play.  

• Импортируются необходимые библиотеки для тестирования.  

• Пример: ввод имени в инпут и проверка его отображения.  

• Проверка размера текста после ввода имени.  

• Использование assert для проверки стиля и размера элемента.  

• Добавление задержки для плавного ввода текста.  

• Вкладка "Action" позволяет отслеживать различные действия с компонентом.  

• Добавление аргументов в метод для отслеживания событий.  

• Пример: отслеживание фокуса и изменения состояния.  

• Storybook предоставляет плагин для тестирования доступности компонентов.  

• Установка плагина и запуск Storybook.  

• Проверка доступности элементов, таких как наличие лейблов и минимальный контраст.  

• Видео завершается призывом подписываться, ставить лайки и оставлять комментарии.  

• Упоминание предыдущего видео о новостях в разработке.