Тестовый пример для метода службы, который содержит подписку HTTP - Angular HTTP RxJs - PullRequest
Новая
       71

Тестовый пример для метода службы, который содержит подписку HTTP - Angular HTTP RxJs

0 голосов
/ 10 июля 2019

У меня есть сервисный метод, и у него есть сервисный вызов (HTTP-вызов), и он подписывается немедленно и на основании кода ответа выполняет остальную часть команды действия.

Пример: метод обслуживания 

processData(id): void {
    const url = `http://localhost:5000/data/${id}`;

    this.http.head(url).subscribe(() => {
        console.log('Success');

        // Rest of the code - TODO

    }, (error) => {
        console.log('Failed');        

        // Rest of the code - TODO

    });
}

Я попробовал следующий образец (контрольный пример) 

fdescribe('ReportedFileService', () => {

    let service: DataService;
    let httpMock: HttpTestingController;

    beforeEach(() => {
        TestBed.configureTestingModule({
            imports:[HttpClientModule, HttpClientTestingModule],
            providers:[DataService]
        });
        service = TestBed.get(DataService);
        httpMock = TestBed.get(HttpTestingController);
    });

    afterEach(() => {
        httpMock.verify();
    });

    fit('should be valid', () => {
        const id = 1;
        const filePath = `http://localhost:5000/data/${id}`;

        const req = httpMock.expectOne(filePath);

        expect(req.request.method).toEqual('Head');

        const response = service.processData(id);
    })
}

пожалуйста, помогите мне, как справиться с этой ситуацией.

1 Ответ

1 голос
/ 10 июля 2019

Ваш сервис не должен подписываться на наблюдаемый HttpClient и, следовательно, он не должен быть методом возвращаемого типа void.Службы должны возвращать HttpClient, наблюдаемый для подписки.

Например

Метод обслуживания 

@Injectable({ providedIn: 'root' }) //ensure service is provided at root level so it remains a singleton in the dependency injection tree.
...
constructor(http: HttpClient){}
...
processData(id): Observable<any> { //services should return an Observable
    const url = `http://localhost:5000/data/${id}`;
    return this.http.head(url); // ** your service method SHOULDN'T be subscribing to the HTTP call.
}

Ваш метод обслуживания не должен подписываться на вызов HTTP.Вызов .subscribe () приведет к выполнению HTTP-запроса.

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

SomeComponent.ts 

...
constructor(private dataService: DataService){}
...
someMethod(){
   this.processData().subscribe(
       (response) => { //subs
           console.log("success");
           // Rest of the code - TODO
       },
       (error) => {
           console.log('Failed');        

          // Rest of the code - TODO
       }
   )
}

ВашПосле этого тестовый набор должен подписаться на услугу, как компонент.

service.spec.ts - тестовый набор вашего сервиса 

fit('should be valid', fakeAsync(() => {
   const id = 1;

   service.subscribe( //you are making the http call in the test case.
       (success: any) => {
          expect(success.request.headers.get('Content-Type').toEqual('application/json')); //assert that the http headers you will get back from the observable is similar to the one the mock backend will return.
       }
   )

   httpMock.expectOne({
      url: 'http://localhost:5000/data/${id}',
      method: 'HEAD'
   }).flush({}, { headers: { 'Content-Type': 'application/json' } }); //HEAD requests have empty response body but only headers

});

Кроме того, вам не следует вызывать localhost, когда вам нужно развернуть это приложение на веб-сервере, вам придется вручную изменять каждую строку.

Вместо этого вы должны устанавливать свои URL-адреса API в средах.файл, который находится в:

  • src/environments/environment.prod.ts - содержит фактический домен.Например, https://example.com/api/data/
  • src/environments/environment.ts - содержит локальный сервер, локальный сервер разработки. Например, http://localhost:5000/data/${id}

. Затем вы должны импортировать URL среды в виде строк следующим образом: 

import { environment } from 'environments/environment';
...
const API_URL = environment.apiURL;

Вот несколько руководств, которые мне помогли, и я поставил в закладки: Использование модуля angtt HttpClient для отправки HTTP-запросов: https://www.techiediaries.com/angular-httpclient/

Службы тестирования: https://www.ng -conf.орг / 2019 / HttpClient-углы главного тестирование глубина /

...