Angular

Question

我是 RxJS 世界的新手，我对我的一种方法进行单元测试时遇到问题。

在我的 Angular 组件中，我有一个 login 方法 - 在里面我只是从服务调用方法。服务中的方法 returns 对组件可见。在这里你可以看到一段代码：

public login(username: string, password: string): void{
    this.authService.login(username, password) //this return Observable in real world
            .catch(() => {
                this.formErrors['general.error'] = true;
                return Observable.throw('error! :<');
            })
            .subscribe(() => {
                this.router.navigate(['/someRoute']);
            });
}

如您所见，这是非常简单的方法（在实际应用中会稍微复杂一些，但现在并不重要），现在我正在尝试编写单元测试（在 Jasmine 中）：

    it('', () => {
        authService.login.and.returnValue(Observable.throw('')); //authService is my mock
        component.login('u', 'p');
        expect(component.formErrors['general.error']).toBeTruthy();
    });

但是我得到了错误，因为我从 catch 部分抛出了错误： login.component login FAILED (error! :< thrown)

我做错了什么？

P.S。我尝试添加 expect(component.login).toThrow(); 但没有成功...

Answer 1

不要直接调用 component.login('u', 'p')，而是尝试让测试运行程序执行它。

it('', () => {
    authService.login.and.returnValue(Observable.throw('')); //authService is my mock

    expect(component.login.bind(component, 'u', 'p')).toThrow(...);
    expect(component.formErrors['general.error']).toBeTruthy();
});

Angular - 带有可观察 .catch 块的测试方法

Angular - test method with observable .catch block

unit-testing

rxjs

rxjs5