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

· Как повысить ремонтопригодность?

· Как улучшить логику условной проверки?

· Как улучшить тестирование сложной формы?

Это репозиторий, где вы можете найти исходный код образца из этой статьи.

Как улучшить ремонтопригодность?

Для этого нам нужно выполнить несколько простых шагов:

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

Есть три способа передать FormGroup компоненту: _1 _, _ 2_, ControlValueAnccessor.

@Input() решают большинство вариантов использования, но если у вас есть исключительный случай, вы можете проверить еще два варианта.

Примечание. Я заметил, что некоторым людям нравится использовать ControlValueAnccessor для извлечения / изоляции группы форм внутри компонента. Звучит здорово, но на практике сложно понять, когда вы держите группу форм подальше от родительского компонента и вам нужно реализовать методы интерфейса, даже если они вам не нужны.

Есть хороший способ использовать наблюдаемое значение формы в angular:

Оператор defer создаст наблюдаемое только тогда, когда мы на него подпишемся. При этом нам не нужно заботиться о подписке, и вы можете добавить дополнительную логику в tap.

Как улучшить логику условной проверки?

В моем случае мы реализовали условную проверку через подписку на изменение значений. Сначала все было хорошо, но со временем это переросло во что-то труднопроходимое.

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

  • Минимизируйте сложную условную и вложенную логику.
  • Подпишитесь на определенную группу / элемент управления, когда это возможно.
  • Объедините изменения значений нескольких групп форм вместо сохранения логики внутри подписки на одну форму.

Если у вас много условной проверки, будет полезно создать что-то вроде этого:

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

Как улучшить тестирование сложной формы?

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

Я покажу вам несколько примеров:

Давайте посмотрим на первый тестовый пример, в котором мы выполняем следующие шаги:

  • Нажмите кнопку отправки: spectator.click(byText(‘Submit’))
  • Найдите элемент результата по идентификатору теста: spectator.query(byTestId(‘result’))
  • Проверьте текстовое содержание: expect(…).toHaveText(…)

С помощью Spectator гораздо проще работать с простыми элементами DOM. Также есть дополнительные матчеры, которые поставляются со зрителем из коробки (например: toHaveTextortoHaveAttribute).

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

P.S. Если у вас есть какие-то идеи или вы с чем-то не согласны, буду рад выслушать ваши мысли в комментариях.