在單元測試中模擬服務

Question

我正在嘗試模擬組件單元測試的服務。 我的服務：

@Injectable()
export class LoginService {

    constructor(public http: Http) { }

    getLanguages() {
        return this.http.get('the-url')
                        .map((res: Response) => res.json());
    }

...

注意：我的組件在構造函數中調用此方法（在構造comp時加載語言）。

然后我試圖嘲笑它：

class MockLoginService {
    getLanguages() {
        return Observable.of(
            [
                {
                    'name': 'English (USA)',
                    'locale': 'en-US'
                },
                {
                    'name': 'Español',
                    'locale': 'es-US'
                }
            ]
        );
    }

我的組件單元測試：

  it('should load languages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        tcb
            .overrideProviders(LoginComponent, [ provide(LoginService, { useClass: MockLoginService })])
            .createAsync(LoginComponent).then((fixture) => {
                let element = fixture.nativeElement;
                let loginInstance = fixture.componentInstance;
                fixture.detectChanges();
                expect(loginInstance._loginService.getLanguages).toHaveBeenCalled();
                expect(element.querySelectorAll('option').length).toBe(5);
            });
    }));

問題：

我看到我的模擬服務被調用，收到的數據是正確的，但我的2個測試被跳過了！ 這是日志：

angular2-polyfills.js：528 Unhandled Promise rejection：當沒有當前規范時使用'expect'，這可能是因為異步測試超時了; 區域：; 任務：Promise.then; 值：錯誤：當沒有當前規范時使用'expect'，這可能是因為異步測試超時（...）

我承諾服務執行異步，測試在某處丟失。 angular2-polyfills.js：530錯誤：未捕獲（在承諾中）：錯誤：當沒有當前規范時使用'expect'，這可能是因為異步測試超時（...）

我嘗試使用fakeAsync並沒有成功。 提前致謝 ！

Answer 1

您可以嘗試手動實例化您的beforeEachProviders服務，並在beforeEachProviders方法回調中設置它

var service = new MockLoginService();

beforeEachProviders(() => [ provide(TestService, { useValue: service })]);

it('should load languages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb
        .createAsync(LoginComponent).then((fixture) => {
            let element = fixture.nativeElement;
            let loginInstance = fixture.componentInstance;
            fixture.detectChanges();

            expect(element.querySelectorAll('option').length).toBe(2);
        });
}));

這個對我有用。 請參閱此plunkr： https ：//plnkr.co/edit/zTy3Ou ？ p = preview。