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

【问题标题】：Angular - test method with observable .catch blockAngular - 带有可观察 .catch 块的测试方法
【发布时间】：2018-01-10 06:23:52
【问题描述】：

我是 RxJS 世界的新手，我的一种方法的单元测试有问题。

在我的 Angular 组件中，我有一个 login 方法 - 在里面我只是从服务中调用方法。服务内部的方法将 Observable 返回给组件。在这里你可以看到一段代码：

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)

我做错了什么？

附：我尝试添加expect(component.login).toThrow();，但没有成功...

【问题讨论】：

这不是您所期望的吗？在捕获第一个错误后，您又抛出了另一个错误。
@jonrsharpe a .catch() 也必须抛出错误。（我倾向于重新抛出最初的错误）
@JasonSpradlin 它必须返回一个observable，但不一定是Observable.throw。
@jonrsharpe 我重新抛出错误，因为我想打破一个链条（我的意思是我不想在subscribe 中调用东西）。但正因为如此，我的单元测试失败了，这是一个问题
@jonrsharpe 好点。我不知道为什么我认为它必须重新抛出。从我最初学习并刚刚开始重新抛出时的保留，以便我可以有一个早期的捕获来处理某些 HTTP 响应，以及稍后的捕获来处理特定的错误。

标签： angular unit-testing rxjs rxjs5

【解决方案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();
});

【讨论】：

function.bind() 的第一个参数是运行该方法的上下文（“this”将在方法内部是什么）。
感谢这个解决方案 - 它有效，但我对 bind、call 或 apply 方法不是很热情...有没有更好的方法？
expect(() => component.login('u', 'p')).toThrow(...); ?
你必须传入一个尚未运行但测试运行程序可以运行的函数。
我明白了...谢谢。我会那样做的