Автор оригинала: Luqman Olushi.
В этой статье мы смотрим на два способа угловые, позволяющие разработчикам протестировать компоненты приложений и плюсы и минусы каждого. Прежде чем мы начнем, давайте посмотрим, какая угловая документация должна сказать о том, что составляет компонент.
Компонент, в отличие от всех других частей углового применения, сочетает в себе шаблон HTML и класс TeampStry. Компонент действительно является шаблоном и классом, работающим вместе.
Из этого мы можем сделать вывод, что один класс не составляют компонента. Поскольку в конце концов, компоненты представляют собой многоразовые кусочки пользовательских интерфейсов состоит из HTML & JavaScript Code. С этим сказанным, давайте взломать.
N.B. Предполагается основное понимание тестирования угловых приложений. Вышеуказанный компонент будет использоваться в качестве примера для описания различных методов тестирования.
Тестирование класса компонентов
Мы можем проверить класс компонентов в изоляции, как мы бы класс обслуживания. Как подразумевает имя, тестирование класса компонентов включает в себя тестирование класса компонентов самостоятельно, не беспокоясь о его шаблоне (HTML) или как пользователь взаимодействует с ним.
Пример тестирования класса компонентов
Ложный положительный результат теста после обновления шаблона
Обратите внимание, как обновлен шаблон теста компонента. К сожалению, тест все еще будет проходить, потому что мы тестируем детали реализации.
Плюс
- Тесты проходят быстрее, потому что ни один дом не требуется
- Отлично подходит для тестирования деталей реализации компонента (это хорошая вещь?)
- Требует небольшого кода по сравнению с тестированием DOM
Господин
- Простой рефтектор может привести к неудачному тесту
- Тесты могут не удавать, когда ваше приложение не работает должным образом
- Вы не можете взаимодействовать с элементами DOM
Компонентное тестирование DOM
В отличие от тестирования классов компонентов, эта техника поощряет хорошую практику тестирования, поскольку позволяет нам писать тесты, которые смоделируют, как пользователь будет использовать/взаимодействовать с нашим приложением. Здесь мы пишем тесты, которые моделируют фактические события, такие как нажатие кнопки или наполнение формы и проверки того, что отображается в браузере пользователя.
Тестирование компонентов DOM требует тестирования компонента в целом (класс, шаблон и другие компоненты, с которыми он взаимодействует).
Пример тестирования компонентов DOM
В приведенном выше тесте вы можете видеть, что мы находим кнопку в DOM и триггеруйте событие Click на нем, после чего мы утверждаем, что текст, отображаемый в браузере, соответствует нашему ожиданию.
Примечание. Этот тест предполагает, что шаблон примерного компонента не был изменен.
Плюс
- Детали реализации рефакторинга (не поведение) не нарушает тест
- Ошибки легко пойманы во время развития, когда что-то разрывается
- DOM элементы могут быть взаимодействуются с
- Дает разработчикам уверенность, зная, что их приложение всегда будет работать как предполагаемое
Господин
- Испытания могут работать медленнее по сравнению с тестированием класса компонентов
- Это требует немного большего количества кода (без сторонней библиотеки)
Заключение
Я надеюсь, что эта статья смогла объяснить доступные нам варианты (разработчики) для тестирования угловых компонентов. Если вы хотели бы узнать больше о тестировании компонентов или предпочтительным подходом к тестированию их, см. Ссылки ниже.
https://angular.io/guide/testing#component-test-basics https://kentcdodds.com/blog/testing-implementation-details https://github.com/testing-library/angular-testing-library