Написание пользовательских компонентов может занять много времени. Будь то простая кнопка или многоразовая форма. В итоге мы делаем следующие шаги снова и снова:

1. Внесите изменения, создайте, перезагрузите
2. Перейдите к представлению, в котором используется компонент
3. Проверить внешний вид компонента на основе определенных состояний приложения

Хотя шаг 1. является обязательным и не может быть пропущен, шаги 2 и 3, безусловно, можно улучшить. Это задачи, которые в конечном итоге крадут большую часть нашего времени. И это особенно актуально для сложных корпоративных приложений.

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

К счастью, существует Storybook for Angular, который позволяет нам делать именно это: Тестировать компоненты изолированно, создавая состояние программно.

Довольно сложная кнопка

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

Покажи мне свои истории!

Клонируйте репозиторий git и установите все зависимости:

> git clone https://github.com/isNotOkay/stateful-button.git
> cd stateful-button
> npm i

После завершения установки вы можете запустить сборник рассказов, используя следующую команду npm:

> npm run storybook

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

Вносите изменения в код и сразу же смотрите обновляемые истории!

Посетите официальную документацию для подробного объяснения того, как самостоятельно интегрировать сборник рассказов и использовать надстройки.

Резюме

Storybook позволяет лучше общаться между разработчиками, дизайнерами и клиентами.

Это делает разработку менее утомительной и увеличивает общую скорость разработки, поскольку позволяет вам сосредоточиться на вашей реальной задаче. Больше не нужно возиться с состоянием приложения и обновлением браузера!

Каждая история служит дополнительной документацией, с которой может поиграться каждый.

В следующей публикации мы рассмотрим, как можно настроить Storybook, чтобы сделать его еще более полезным.