Форма не всегда является тривиальной проблемой, и со временем она может усложняться. Мы постараемся разобраться в этой теме и постараемся ответить на следующие вопросы:
· Как повысить ремонтопригодность?
· Как улучшить логику условной проверки?
· Как улучшить тестирование сложной формы?
Это репозиторий, где вы можете найти исходный код образца из этой статьи.
Как улучшить ремонтопригодность?
Для этого нам нужно выполнить несколько простых шагов:
- Разделите и организуйте форму в группы форм и передайте их в качестве параметра дочерним компонентам.
- Используйте наблюдаемое значение вместо значения группы форм.
- Используйте геттер для доступа к группе форм или значение из шаблона.
Есть три способа передать FormGroup компоненту: _1 _, _ 2_, ControlValueAnccessor
.
@Input()
решают большинство вариантов использования, но если у вас есть исключительный случай, вы можете проверить еще два варианта.
Примечание. Я заметил, что некоторым людям нравится использовать
ControlValueAnccessor
для извлечения / изоляции группы форм внутри компонента. Звучит здорово, но на практике сложно понять, когда вы держите группу форм подальше от родительского компонента и вам нужно реализовать методы интерфейса, даже если они вам не нужны.
Есть хороший способ использовать наблюдаемое значение формы в angular:
Оператор defer
создаст наблюдаемое только тогда, когда мы на него подпишемся. При этом нам не нужно заботиться о подписке, и вы можете добавить дополнительную логику в tap
.
Как улучшить логику условной проверки?
В моем случае мы реализовали условную проверку через подписку на изменение значений. Сначала все было хорошо, но со временем это переросло во что-то труднопроходимое.
Чтобы этого избежать, нам нужно иметь в виду следующие несколько идей, которые могут показаться простыми:
- Минимизируйте сложную условную и вложенную логику.
- Подпишитесь на определенную группу / элемент управления, когда это возможно.
- Объедините изменения значений нескольких групп форм вместо сохранения логики внутри подписки на одну форму.
Если у вас много условной проверки, будет полезно создать что-то вроде этого:
Я не говорю, что помощник условной проверки должен выглядеть так, но вы можете использовать его как подсказку. Пример, который я упомянул в начале, содержит другую версию, потому что использовать ее здесь кажется излишним.
Как улучшить тестирование сложной формы?
Spectator
это замечательный инструмент, который поможет вам избавиться от шаблонного кода.
Я покажу вам несколько примеров:
Давайте посмотрим на первый тестовый пример, в котором мы выполняем следующие шаги:
- Нажмите кнопку отправки:
spectator.click(byText(‘Submit’))
- Найдите элемент результата по идентификатору теста:
spectator.query(byTestId(‘result’))
- Проверьте текстовое содержание:
expect(…).toHaveText(…)
С помощью Spectator гораздо проще работать с простыми элементами DOM. Также есть дополнительные матчеры, которые поставляются со зрителем из коробки (например: toHaveText
ortoHaveAttribute
).
Как видите, это довольно просто и легко настроить. Просто попробуйте, и я уверен, что вам понравится.
P.S. Если у вас есть какие-то идеи или вы с чем-то не согласны, буду рад выслушать ваши мысли в комментариях.