測試訂閱observable的方法 - Angular 2

Question

我想測試訂閱從服務中的方法返回的observable的Angular 2組件中的方法。下面是在總結服務方法的代碼：

public create(user: User): Observable<any> { 
    return this.http.post(this._api.create, 
    JSON.stringify(user), { 
     headers: this.apiConfig.getApiHeaders() 
    }).map((res: Response) => res.json()); 
    } 

很容易單元測試這種方法，因爲它返回一個可觀察的，所以我可以只訂閱。但我想測試的方法在已經訂閱了這個組件：

public onSubmit(user: User): void { 
    this._authentication.create(user).subscribe((token) => { 
    localStorage.setItem('token', token); 
    this.router.navigate(['/Home']); 
    }); 
} 

我的繼承人規範，到目前爲止，但是當我嘗試spyOn的localStorage.setItem它回來不會被調用。我的理解是它可能會檢查它是否在實際調用之前被調用。

it('Should login a user and on success store a token in localStorage', 
    injectAsync([TestComponentBuilder], (tcb) => { 
    return tcb.createAsync(Login).then((fixture) => { 
     let instance = fixture.debugElement.componentInstance; 
     localStorage.clear(); 
     spyOn(localStorage, 'setItem'); 
     instance.onSubmit({userId: 'some@email.com', password: 'password', siteName: 'sample'}); 
     expect(localStorage.setItem).toHaveBeenCalled(); 
    }); 
    }) 
); 

我想知道如果我需要模擬出this._authentication.create方法返回一個新的觀察到的，在這一個模擬的反應？

經過更多的研究，一些文章指出我需要嘲笑服務並返回一個同步運行的Observable.of（）來解決問題，請仔細複製下面的代碼。然而，這仍然不起作用，我一直在這一天的大部分時間裏工作，我不覺得這應該是那麼辛苦，任何幫助表示讚賞。

class MockAuthentication extends Authentication { 
    public create(user: Object): Observable<any> { 
    return Observable.of({'test': 'test'}); 
    } 
} 

Answer 1

好的，這是我一天中的大部分時間，但我終於破解了它。而不是使用injectAsync和TestComponentBuilder來設置規範，我只需要像使用服務一樣使用注入和注入組件。這看起來很好，因爲我不需要在視圖中像事件一樣測試任何東西。

繼承人的最終規格，做工作：

it('Should set token in localStorage, set the new user, 
and navigate to home page on succesful login', 
    inject([Login], (login) => { 
    login.router.config([ { path: '/', name: 'Home', component: Home }]); 
    spyOn(localStorage, 'setItem'); 
    spyOn(login._currentUser, 'set'); 
    spyOn(login.router, 'navigate'); 
    login.onSubmit({ userId: 'some@email.com', password: 'password', siteName: 'sample' }); 
    expect(localStorage.setItem).toHaveBeenCalledWith('token', 'newToken'); 
    expect(login._currentUser.set).toHaveBeenCalledWith({ 'test': 'one' }); 
    expect(login.router.navigate).toHaveBeenCalledWith(['/Home']); 
})); 

希望這可以幫助別人的未來。

Answer 2

我猜你想要一個模擬Router實例注入到你的組件，然後navigate(['/Home'])後，叫上模擬Router，你是否localStorage.setItem(...)被調用。

Answer 3

See my gist here。

基本上你可以在這裏做幾件事。首先，用你想要的令牌（或其他響應）的簡單可觀察的響應來存儲你的http調用（我從服務中猜測出來）。

service.stub.ts

export class MyStub { 
    public create(user: User): Observable<User> { 
    return Observable.of('insert test token here'); 
    } 
// other stubbed methods ... 
} 

然後你的測試裏面：

myComp.spec.ts

let comp: MyComponent; 
let fixture: ComponentFixture<MyComponent>; 
let sst: ServiceStub; 
describe('MyComponent',() => { 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [MyComponent], 
     schemas: [NO_ERRORS_SCHEMA] 
    }).overrideComponent(OnboardFacilityNewComponent, { 
     set: { 
     providers: [ 
      { provide: MyService, useClass: ServiceStub }, 
     ] 
     } 
    }) 
    .compileComponents() 
     .then(() => { 
     fixture = TestBed.createComponent(MyComponent); 
     comp = fixture.componentInstance; 
     st = fixture.debugElement.injector.get(MyService); 
     }); 
    })); 
    it('should submit new onboardFacility', fakeAsync(() => { 
    const sst = spyOn(sst, 'create').and.returnValue(
     Observable.of('some token here') 
    ); 
    comp.onSubmit(testUser); 
    fixture.detectChanges(); 
    expect(comp.token).toEqual('some token here'); 
    expect(spy.calls.any()).toEqual(true); 
    })); 
}); 

在這裏，你可以簡單地替換測試數據與實際數據測試你的測試行爲，而不是你的測試平臺，你的服務，localStorage等等。顯然，我在這裏寫的測試假設你會將你的服務返回的令牌存儲在你的組件中，r ather然後localStorage (though there is a way to do that)，但我只是簡單地顯示的概念，而不是你的具體用例。

在您的使用情況下，你還需要存根路由器，你可以學習如何做here.