Angular: класс компонентов и тестирование DOM

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

Компонент, в отличие от всех других частей приложения Angular, сочетает в себе шаблон HTML и класс TypeScript. Компонент действительно является шаблоном и классом, работающими вместе.

Из этого мы можем сделать вывод, что класс сам по себе не составляет компонент. Потому что, в конце концов, компоненты — это повторно используемые части пользовательских интерфейсов, состоящие из кода HTML и Javascript. С учетом сказанного, давайте взломать.

NB Предполагается базовое понимание тестирования приложений Angular.
углерод (9).png
Вышеупомянутый компонент будет использоваться в качестве примера для описания различных методов тестирования.

Класс компонента Тестирование

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

углерод (11).png
пример тестирования класса компонента

углерод (8).png
Ложноположительный результат теста после обновления шаблона

Обратите внимание, как обновился шаблон тестируемого компонента. К сожалению, тест все равно пройдет, потому что мы проверяем детали реализации.

Плюсы

Тесты выполняются быстрее, потому что не требуется DOM
Отлично подходит для тестирования деталей реализации компонента (хорошо ли это?)
Требуется небольшой код по сравнению с тестированием DOM

Минусы

Простой рефакторинг может привести к провалу всех тестов
Тесты не могут дать сбой, если ваше приложение не работает должным образом
Вы не можете взаимодействовать с элементами DOM

DOM-тестирование компонентов

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

Тестирование DOM компонента требует тестирования компонента в целом (класса, шаблона и других компонентов, с которыми он взаимодействует).

углерод (10).png
Пример тестирования DOM компонента

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

Примечание. В этом тесте предполагается, что образец шаблона компонента не был изменен.

Плюсы

Детали реализации рефакторинга (не поведение) не нарушают тест
Ошибки легко обнаруживаются во время разработки, когда что-то ломается
Элементы DOM могут взаимодействовать с
Дает разработчикам уверенность в том, что их приложение всегда будет работать так, как задумано.

Минусы

Тесты могут работать медленнее по сравнению с тестированием класса компонентов.
Требуется немного больше кода (без сторонней библиотеки)

Вывод

Я надеюсь, что эта статья смогла объяснить доступные нам (разработчикам) варианты тестирования компонентов Angular. Если вы хотите узнать больше о тестировании компонентов или предпочтительном подходе к их тестированию, перейдите по ссылкам ниже.

https://angular.io/guide/testing#component-test-basics
https://kentcdodds.com/blog/testing-implementation-details
https://github.com/testing-library/angular-testing-library