测试订阅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.