如何在测试 angular2 组件时模拟可观察流? [英] How to mock a observable stream while testing angular2 components?

问题描述

我正在为 angular2 组件编写测试用例.

I am writing test cases for angular2 components.

我创建了一个使用可观察流的服务，如下所示:

I had created a service which uses observable stream as below:

import {Injectable}      from '@angular/core'
import {Subject} from 'rxjs/Subject';
import {User} from './user.model';

@Injectable()
export class UserService {

  selectedUserInstance:User = new User();

  // Observable selectedUser source
  private selectedUserSource = new Subject<User>();

  // Observable selectColumn stream
  selectedUser$ = this.selectedUserSource.asObservable();

  // service command
  selectUser(user:User) {
    this.selectedUserInstance=user;
    this.selectedUserSource.next(user);
  }
}

现在在我的组件中，我订阅了这个流:

Now In my component I have subscribed to this stream as :

getSelectedUser() {
    this.subscriptionUser = this.userService.selectedUser$.subscribe(
      selectedUser => {
        this.selectedUser = selectedUser;
      }
    );
}

现在在我的 spec.ts 文件中，我想将此流模拟为:

Now in my spec.ts file, I want to mock this stream as :

spyOn(userService, 'selectedUser$')
        .and.returnValue(Observable.of({
            'name': 'bhushan',
            'desc': 'student'
        }));

但它一直给我以下错误:

But it keeps giving me following error:

错误:spyOn 无法为 selectColumn$() 找到要监视的对象

Error: spyOn could not find an object to spy upon for selectColumn$()

有没有办法做到这一点?

is there any way to do this?

我被这个问题困扰了很长时间.

I am stuck on this issue for very long time now.

任何输入?

谢谢

推荐答案

selectedUser$ 不是方法，所以你不能窥探它.相反，如果您愿意，您可以将其分配给您的 observable

selectedUser$ isn't a method, so you can't spy on it. Instead, if you want you can just assign it a your observable

rapidColumnService.selectedUser$ = Observable.of({
  'name': 'bhushan',
  'desc': 'student'
})

但老实说，如果这是您的完整服务，我不明白您为什么甚至需要嘲笑它.这很简单，使用真正的服务可能不会受到伤害.如果您使用真正的服务，那么只要您想向被测组件发出新的内容，就可以 selectUser.

But honestly, if that is your complete service, I don't see why you even need to mock it. It is simple enough where using the real service probably wouldn't hurt. If you use the real service, then you can just selectUser whenever you want to emit something new to the component under test.

您还可以做的另一件事是使用 Subject 而不是使用 Observable.Subject 也是一个 Observable，但它允许您发出值，从而更容易模拟值进行测试.

Another thing you could also do is instead of using an Observable is to use a Subject. A Subject is also an Observable, but it lets you emit values, making it easier to mock values to test.

rapidColumnService.selectedUser$ = new BehaviorSubject<any>();

然后当你想发送一个值

rapidColumnService.selectedUser$.next({
  'name': 'bhushan',
  'desc': 'student'
});

根据您的组件设置和订阅方式，您可能只想使用普通的 Subject 而不是 `BehaviorSubject.有关详细信息，请参阅这篇文章.

Depending on how you have your component set up and the subscription, you may just want to use a plain Subject instead of a `BehaviorSubject. See this post for more info.

这篇关于如何在测试 angular2 组件时模拟可观察流?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！