Разрабатывайте функциональные и красивые элементы управления настраиваемой формы в Angular

У большинства веб-сайтов и приложений есть формы. Angular предоставляет множество функций для создания многоразовых и сложных форм.

Вы можете создавать формы на основе шаблонов и реактивные формы. Формы должны не только собирать данные от пользователей, но и обеспечивать отличный пользовательский интерфейс, чтобы избежать оттока ваших пользователей.

Angular имеет интерфейс под названием ControlValueAccessor, который необходимо реализовать в настраиваемых элементах управления формой.

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

<!-- Template-driven Forms -->
<app-select [(ngModel)]="selectValue" (ngModelChange)="onSelectChange()"></app-select>
<!-- Reactive Forms -->
<app-select formControlName="selectValue"></<app-select>

Если у вас несколько интерфейсных разработчиков и UX-дизайнеров, необходимо сотрудничество для создания согласованных и простых в использовании пользовательских интерфейсов. Storybook - это обозреватель компонентов пользовательского интерфейса и инструмент разработки, который работает с Angular, React и другими.

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

Если вы раньше не использовали Storybook, на веб-сайте Storybook есть несколько примеров от таких компаний, как IBM.

Несмотря на то, что на красивый интерфейс приятно смотреть, нельзя жертвовать функциональностью. Чтобы случайно не нарушить существующую функциональность, разработчики пишут различные виды тестов, которые обычно запускаются автоматически на CI, например Jenkins или GitLab.

Jest - это популярный фреймворк для тестирования JavaScript, который быстро и легко использовать для написания и выполнения тестов. Это делает Jest хорошим выбором для написания тестов компонентов.

В этом посте я покажу, как мы можем протестировать компонент Angular для настраиваемого элемента управления формой в Jest и продемонстрировать его в Storybook.

Как использовать пользовательские элементы управления угловой формы в Storybook

  1. Создайте новый файл, который должен содержать истории.
  2. Импортируйте свой компонент и необходимые зависимости.
  3. Передайте необходимые реквизиты вашему компоненту. Нам нужно передать ngModel, чтобы включить привязку данных, и ngModelChange, чтобы прослушивать изменения значений компонента управления настраиваемой формой.
  4. Необязательно: предоставьте ручки, чтобы легко редактировать реквизиты в пользовательском интерфейсе Storybook, чтобы видеть различные состояния вашего компонента.

Вот пример использования Storybook для создания двух историй нашего JsonFormControlComponent.

Ознакомьтесь с исходным кодом на GitHub, если хотите увидеть, как Storybook обрабатывает пользовательские элементы управления Angular внутри внутри.

Как использовать пользовательские элементы управления угловой формы в Jest

  1. Создайте новый файл, который должен содержать тесты.
  2. Импортируйте свой компонент и необходимые зависимости с помощью TestBed.
  3. Напишите тестовые примеры. Мы можем следить за функцией, которая запускает изменение значения элемента управления формы, чтобы проверить, отправляется ли правильное значение.

Вот пример использования Jest для тестирования нашего пользовательского JsonFormControlComponent.

Кстати: приведенный выше пример также работает, если вы используете Jasmine в качестве фреймворка для тестирования.

Заключение

Спасибо, что прочитали этот небольшой пост о том, как разрабатывать и тестировать пользовательские элементы управления формой в Angular с помощью Jest и Storybook.

Каков ваш опыт работы с Jest и Storybook? Дай мне знать в комментариях.