Я занимаюсь разработкой веб-приложения Angular, которое включает вход для загрузки нескольких файлов. Служба, отвечающая за загрузку, передает своим клиентам серию событий выполнения, чтобы они были проинформированы о проценте выполнения загрузки.
О ходе загрузки сообщается через HttpEvent, который отличается от обычного ответа HTTP. Похоже, что информации о том, как проводить модульное тестирование этих событий, очень мало, поэтому я собираюсь поделиться с вами двумя способами, которыми это может быть достигнуто.
Теория
Я рекомендую вам прочитать эту отличную статью для более глубокого изучения HttpClient в Angular. Цитируя это:
… Если нам нужен еще лучший контроль и нужен доступ к отдельным событиям или шагам при выполнении HTTP-вызова, обратите внимание на HttpEvent. Он работает на гораздо более низком уровне. Он предоставляет события, которые фиксируют ход выполнения как запроса, так и ответа.
Итак, похоже, HttpEvent - это общий класс, который включает HttpResponse, HttpProgressEvent и другие. В документации (ссылка на имена) проясняется связь между ними: HttpEvent - это тип объединения для всех возможных событий в потоке ответа.
С другой стороны, Angular HttpClient.request () возвращает поток HttpEvents, когда мы передаем ему экземпляр HttpRequest. Давайте посмотрим, как мы можем имитировать эти события ответа, чтобы использовать их в наших модульных тестах.
Установка
Типичная служба загрузки файлов Angular с функцией загрузки, которая информирует своих подписчиков о прогрессе, может выглядеть так:
Как видите, мы отслеживаем события любого типа, исходящие из запроса HttpClient. Если это событие относится к типу UploadProgress, мы транслируем новое значение подписчикам. Если это HttpResponse, мы сообщаем о прогрессе 100 и завершаем наблюдаемое.
Наивный подход: просто имитируйте HttpClient
Первое, что пришло мне в голову, это создать фиктивный объект HttpClient, включающий только функцию запроса. Затем мы можем создать шпиона Jasmine для этой функции и вернуть все, что захотим. И это работает! В конце концов, нам нужно только вернуть объект с определенным типом: HttpProgressEvent. В документации указано, какие свойства нужно включить.
Используйте HttpClientTestingModule
Покопавшись немного глубже, я обнаружил, что класс TestRequest, который мы используем, когда хотим протестировать стандартный HTTP-запрос с помощью HttpClientTestingModule, имеет метод .event (), который делает именно то, что нам нужно! Из документации:
Доставить произвольное событие HttpEvent (например, событие выполнения) в потоке ответа для этого запроса.
Используя этот метод, наш тест выглядит так:
Это все, чем я хотел поделиться в этой статье. Если она была полезной, пожалуйста, хлопните в ладоши!
Чтобы увидеть больше подобных статей, посетите мой личный блог cybertricks.blog!
