Angular의 fakeBackendProvider, MockBackEnd 및 MockConnection에 대한 이해

Question

각도 응용 프로그램을 테스트하는 동안 일부 HTTP 요청을 모의하려고합니다. Angular의 MockBackEnd 및 MockConnection을 사용하여 fakeBackendProvider를 사용하는 인터넷을 통해 널리 사용되는 예제를 소개합니다. 코드를 잘 이해하고는 있지만 이러한 공급자의 내부 작업에 대해 자세히 이해하고 싶습니다.

그들은 어떻게 HTTP 요청을 차단합니까? 예를 들어, 내 코드가 http.get()을 호출하면 누가 무엇에 푹 빠졌고, 누가 대신하고, 어떻게 대체 할 수 있습니까?

모든 참조 자료는 매우 유용 할 것입니다.

Answer 1

각도 4.3.X에서 새로운 HttpClient를 사용해보십시오. HttpInterceptor를 구현하는 쉬운 방법을 제공합니다. 가로 채기하려면

클래스에서 재정의해야 할 메소드 가로 채기가있는 HttpInterceptor 인터페이스를 사용하십시오. 아래로 샘플 코드,

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 

import 'rxjs/add/Observable/throw'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/Observable/of'; 
import 'rxjs/add/operator/do'; 

export class YourInterceptor implements HttpInterceptor{ 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{ 
// Your interceptor code comes here. 
// you wish to change the request, change here. 
    request = request.clone({ 
     setHeaders: { 
     Authorization: `Bearer ${this.auth.getToken()}` 
     } 
    }); 
       return next.handle(request); 
    } 
} 

그래서

각도 4 HttpTestingController, HttpClientTestingModule와 함께 작동하는 두 개의 멋진 클래스를 제공 할 수 있도록 내가, 같은 위해도 단위 테스트를 작성하려고 생각 . 이것을 사용하기 전에 module.ts 파일에 HttpClientModule을 제공해야합니다. 귀하의 경우는 HTTP를 될 것입니다, 아래로

import { TestBed, inject, getTestBed } from '@angular/core/testing'; 
import { HttpClient, HttpClientModule } from '@angular/common/http'; 
import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; 

import { YourService } from './get-name-service.service'; 

describe('YourService',() => { 

    let injector: TestBed; 
    let httpMock: HttpTestingController; 
    let yourService: YourService; 

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports:[HttpClientTestingModule], 
     providers: [YourService] 
    }); 

    injector = getTestBed(); 
    httpMock = injector.get(HttpTestingController); 
    yourService = TestBed.get(YourService); 

    }); 

    describe('#getUsers',() => { 
    it('should return an Observable<User[]>',() => { 
     const dummyUsers = [ 
     { login: 'John' }, 
     { login: 'Doe' } 
     ]; 

    yourService.getNames().subscribe(users => { 
     console.log('I am here in yourService method'); 
     expect(users.length).toBe(2); 
     expect(users).toEqual(dummyUsers); 
     }); 

    const req = httpMock.expectOne('http://localhost:8080/dev/getNames'); 
     expect(req.request.method).toBe("GET"); 
     req.flush(dummyUsers); 
    }); 
    }); 
}); 

Answer 2

는 mockbackend를 들어,

1. 는 응용 프로그램에서 올바른 제공자를 포함, 같은 것을 할 수 있습니다. ... 제공자 : [Http, ...]

2. 테스트 파일에는 ReflectiveInjector 클래스와 resolveAndCreate 메소드를 사용했음을 알게되면이 코드 또는 구성이 저장됩니다. 이 메소드는 필요한 모든 클래스의 종속성을 가진 오브젝트를 작성하는 데 도움이됩니다. 예 this.yourService = this.injector.get (YourService); 가짜 백엔드

     {provide: ConnectionBackend, useClass: MockBackend}, 
         {provide: RequestOptions, useClass: BaseRequestOptions}, 
   

   ,

   를 제공하고 ConnectionBackend 클래스 객체가 생성 될 때마다 useClass, 지금은 MockBackend 클래스 객체에 매핑 될 것와 연결 테스트 코드를 도움이 될 것입니다 두 줄을 다음

예를 들어 각각의 테스트 케이스 ('getNames()는 일부 이름을 반환해야 함'을 사용할 수 있습니다 .lastConnection은 사용자의 mockedbackend와 연결하는 데 사용됩니다. 응답 및 응답을 사용하여 응답을 만들어야합니다. ResponseOptions cl 엉덩이 아래 코드 스 니펫에서 아래 주어진대로.

describe('MockBackend NameService Example',() => { 
     beforeEach(() => { 
     this.injector = ReflectiveInjector.resolveAndCreate([ 
      {provide: ConnectionBackend, useClass: MockBackend}, 
      {provide: RequestOptions, useClass: BaseRequestOptions}, 
      Http, 
      YourService, 
     ]); 
     this.yourService = this.injector.get(YourService); 
     this.backend = this.injector.get(ConnectionBackend) as MockBackend; 
     this.backend.connections.subscribe((connection: any) => this.lastConnection = connection); 
     }); 
    it('getNames() should return some names', fakeAsync(() => { 
     let result: String[]; 
     this.yourService.getNames().then((names: String[]) => result = names); 
     this.lastConnection.mockRespond(new Response(new ResponseOptions({ 
     body: JSON.stringify({data: ["Deepak Test1", "Deepak Test2"]}), 
     }))); 
     tick();  
     expect(result.length).toEqual(2, 'should contain given amount of Names'); 
     expect(result[0]).toEqual("Deepak Test1", ' NAME_ONE should be the first Name'); 
     expect(result[1]).toEqual("Deepak Test2", ' NAME_TWO should be the second Name'); 
    })); 
});