Тестирование HTTP-запросов в Angular еще никогда не было таким простым

Когда наконец появился Angular, можно было тестировать HTTP-запросы, но правильно настроить его было утомительно. Во время установки модуля потребовались множественные зависимости, а фиктивные соединения были доступны только через объект Observable. Чтобы усложнить задачу, для запросов не было встроенных утверждений. Команда Angular знала об этих проблемах, поэтому в Angular 4.3 они представили новый модуль под названием HttpClientModule, который намеревается заменить существующий HttpModule и упростить использование и тестирование, предоставляя простые интерфейсы.

В этом руководстве я покажу тесты записи с новым HttpClientModule.

Начиная

Сначала мы протестируем базовый запрос, запрос GET. Он будет вызывать URL-адрес без тела или дополнительных заголовков. Github API имеет конечную точку для получения информации общедоступного профиля о пользователях. Информация профиля возвращается в формате JSON.

Метод getProfile отправляет запрос GET в API и возвращает ответ. Каждый запрос, сделанный с помощью HttpClientModule, возвращает Observable. Возвращаемое значение - это проанализированное тело ответа JSON.

Написание первого теста

Первое, что нам нужно сделать, это настроить тестовые зависимости. Требуется зависимость HttpClient. Если мы его не предоставим, мы получим следующее сообщение об ошибке: Нет поставщика для HttpClient!.

Angular предоставляет HttpClientTestingModule, который разрешает все зависимости, необходимые для тестирования HTTP. Нет более утомительной настройки: вам не нужны MockBackend и BaseRequestOptions как зависимости, и фабричный метод для Http не понадобится, или. Ниже вы можете увидеть, как выглядела предыдущая установка. Несколько строк свернулись до одного модуля.

Давайте воспользуемся новой настройкой, чтобы написать первый тест, который проверяет результат запроса.

Мы можем управлять серверной частью с помощью HttpTestingController. После того, как мы получим его экземпляр из TestBed, мы можем установить ожидания для входящих запросов. В этом примере ожидается только один запрос с точным URL-адресом. Чтобы задать ответ, нам просто нужно вызвать flush, который по умолчанию преобразует данный объект в формат JSON. Наконец, нам нужно проверить ответ с помощью метода subscribe.

Копаем глубже

GET-запросы хороши для получения данных, но мы будем использовать другие HTTP-команды для отправки данных. Один из примеров - POST. Аутентификация пользователя идеально подходит для запросов POST. При изменении данных, хранящихся на сервере, нам необходимо ограничить доступ к ним. Обычно это делается с помощью запроса POST на странице входа.

Auth0 предоставляет хорошее решение для обработки аутентификации пользователей. Он имеет функцию аутентификации пользователей на основе имени пользователя и пароля. Чтобы продемонстрировать, как тестировать запросы POST, мы отправим запрос в API Auth0. Мы не будем использовать их рекомендуемый пакет здесь, потому что он абстрагируется от фактического запроса, но для реальных сценариев я бы рекомендовал его использовать.

Основное отличие этого примера от предыдущего заключается в том, что здесь мы отправляем полезную нагрузку JSON на сервер и добавляем к нему дополнительные заголовки. Нам не нужно вручную JSON.stringify полезные данные - об этом позаботятся методы запроса. Ответ будет в текстовом формате, преобразование не будет.

Давайте посмотрим на тест, чтобы увидеть, как мы можем проверить каждую деталь запроса.

Метод expectOne может принимать разные аргументы. Первым, что мы использовали при запросе профиля, была простая строка. Он только проверял вызываемый URL. Когда мы передаем объект этому методу, мы также можем проверить метод запросов, но ничего больше. Чтобы сделать более точные утверждения, мы должны передать функцию методу expectOne.

Функция получает запрос в качестве аргумента. Вы должны вернуть логическое значение: true, если каждая деталь соответствует вашим ожиданиям, и false в противном случае. Таким образом вы можете проверить каждый аспект запроса.

Резюме

Нам удалось настроить тесты от простого GET-запроса до более сложного POST-запроса. Мы видели, что службы с новым модулем HTTP могут быть намного чище по сравнению со старым. Всегда полезно следить за новыми функциями Angular.

Чтобы увидеть тесты в действии, загляните в этот репозиторий GitHub.

Спасибо за внимание! Если вам понравилась эта история, порекомендуйте ее, нажав кнопку 👏 сбоку и поделившись ею в социальных сетях. Подпишитесь на меня в Medium или Twitter, чтобы узнать больше об Angular!