模擬服務調用本地json-server而不是遠程端點 - 測試語法？ （Angular 2）

Question

我正在嘗試編寫一個單元測試，以確定在返回承諾的服務調用後，我的角度2組件上的屬性被填充。

我的組件包含一個方法：

getListItems() { 
 
    this.employeeService.loadEmployees().then(res => { 
 
    this._employees = res['Employees']; 
 
    this.ref.markForCheck(); 
 
    }); 
 
};

這就要求對服務的方法：

@Injectable() 
 
export class EmployeeService { 
 

 
    constructor(
 
    public http: Http 
 
) { } 
 
\t \t 
 
    public loadEmployees(): Promise<any> { 
 
    return this.http.get('employees.json') 
 
     .map((res: Response) => res.json()) 
 
     .toPromise(); 
 
    } 
 
}

抓住哪些來自本地json文件的內容（代替創建遠程端點）。這工作得不錯，但我想用一個調用本地json-server的測試替換服務方法。

據我所知，在Karma測試運行時，我已經正確地啓動了JSON服務器的上下旋轉 - 我可以使用Postman在測試運行時成功執行GET請求。

因此我想用模擬來取代我的服務：

class MockEmployeeService { 
 
    headers: Headers; 
 

 
    constructor(private http: Http) { 
 
    this.headers = new Headers({ 'Content-Type': 'application/json' }); 
 
    } 
 

 
    public loadEmployees() { 
 
    return this.http.get('http://localhost:3004/getEmployees', 
 
     {headers: this.headers, body: '' }) 
 
\t  .map((res: Response) => res.json()); 
 
\t } 
 
}

，我已經設置了單元測試如下：

describe('ListComponent',() => { 
 

 
    let fixture; 
 
    let component; 
 
    let employeeService; 
 

 
    beforeEach(async(() => { 
 

 
\t TestBed.configureTestingModule({ 
 
\t imports: [ 
 
\t \t HttpModule 
 
\t ], 
 
\t declarations: [ 
 
\t \t ListComponent 
 
\t ], 
 
\t providers: [ 
 
\t  {provide: EmployeeService, useClass: MockEmployeeService} 
 
\t ] 
 
    }) 
 
    .compileComponents(); 
 
    })); 
 

 
    beforeEach(() => { 
 

 
\t fixture = TestBed.createComponent(ListComponent); 
 
\t component = fixture.componentInstance; 
 

 
\t employeeService = fixture.debugElement.injector 
 
     .get(EmployeeService); 
 
\t }); 
 

 
    it('should retrieve test values from json-server (async)', 
 
    async(() => { 
 
\t fixture.detectChanges(); 
 
\t component.getListItems(); 
 
\t fixture.whenStable.then(() => { 
 
\t \t expect(component._employees).toBeDefined(); 
 
\t }); 
 
    })); 
 
})

所以（我認爲）我打電話給應該調用該服務的組件上的方法，應該由MockEmployeeService替換。我收到以下錯誤噶：

× should retrieve test values from json-server (async) 
 
    PhantomJS 2.1.1 (Windows 7 0.0.0) 
 
Failed: Can't resolve all parameters for MockEmployeeService: (?).

我幾乎在我的知識，在這一點上的界限，我無法找到在線資源更新，使用測試牀的測試。有人能夠發現任何在這裏看起來關閉？

Answer 1

如果您正在嘲笑服務，則不應使用Http。只需返回自己的承諾，不要與Http互動。

class MockEmployeeService { 
    public loadEmployees() { 
    return Promise.resolve({some:'object'}); 
    } 
} 

隨着Http服務，您將作出一個XHR調用，你不希望在測試過程中做。對於模擬，我們希望儘可能簡化，因爲我們希望儘可能少地影響測試組件。

測試期間Http的另一個問題是它依賴於平臺瀏覽器，而該平臺瀏覽器在測試環境中不可用。這並不意味着我們不能使用它。我們只需要使用Angular爲測試提供的幫助類。

我們介紹了嘲笑測試組件的服務，但是如果您還想測試您的服務，則需要使用一些Angular測試助手類MockBackend自己創建Http提供程序。

TestBed.configureTestingModule({ 
    providers: [ 
    { 
     provide: Http, useFactory: (backend, options) => { 
     return new Http(backend, options); 
     }, 
     deps: [MockBackend, BaseRequestOptions] 
    }, 
    MockBackend, 
    BaseRequestOptions 
    ] 
}); 

隨着MockBackend，我們可以訂閱連接和模擬響應。對於一個完整的示例，請參閱this post

另請參見：

• Documentation for Promise，如果您不熟悉創建自己的承諾。