Тестирование Observable в Angular

Тестирование Observable в Angular

От автора: в этой статье я хотел бы поговорить о заблуждении, которое я встречал в других статьях о написании тестов для Angular Observable.

 

Давайте рассмотрим этот базовый пример, с которым мы все знакомы.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Спецификация компонентов todos

У нас есть служба данных, которая использует библиотеку Angular HTTP для возврата observable. Авторы других статей в Интернете предполагают, что для тестирования вышеуказанного компонента мы можем создать службу-заглушку, которая возвращает observable of().

Спецификация компонентов todos

Вы запускаете приведенный выше код. Тест проходит, и вы счастливы. Это то, что я называю обманом. По умолчанию observable of() является синхронным, поэтому вы в основном делаете асинхронный код синхронным. Давайте продемонстрируем это с помощью небольшого дополнения к нашему коду.

Компонент todos

Мы добавили элемент загрузки, который должен быть видимым, когда инициируется запрос, но скрытым при вызове функции подписки (то есть запрос успешно завершен). Давайте проверим это.

Спецификация компонентов todos

Как вы, вероятно, поняли, вышеупомянутый тест никогда не пройдет. Вы получите сообщение об ошибке: Ожидаемый null не будет null.

Когда мы запускаем detectChanges(), хук ngOnInit() будет запускаться и выполнять функцию подписки синхронно, делая свойство isLoading всегда ложным. В результате тест всегда не проходит. Вероятно, вы помните старые времена, когда мы писали тесты в AngularJS и делали следующее:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Вышеприведенный код полностью действителен — в отличие от observables, promises всегда асинхронны. Позвольте мне показать вам три способа исправить это.

Использование defer()

Те, кто предпочел бы придерживаться promis, могут вернуть observable defer(), который вернет promis с данными.

Спецификация компонентов todos

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

Использование планировщиков

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

Спецификация компонентов todos

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

Использование jasmine-marbles

RxJS marble тестирование — отличный способ протестировать как простые, так и сложные сценарии observable. marble тестирование использует marble-язык, чтобы указать потоки и ожидания для observable.

Спецификация компонентов todos

Этот тест определяет observable cold , ожидающий два фрейма (-), вводит значение (x) и завершается (|). Во втором аргументе вы можете сопоставить маркер значения (x) с вводимым значением (todos).

Анонс

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

Автор: Netanel Basal

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree