【问题标题】:How to mock a observable stream while testing angular2 components?如何在测试 angular2 组件时模拟可观察流?
【发布时间】:2016-10-25 12:52:01
【问题描述】:

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

我创建了一个使用 observable 流的服务,如下所示:

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);
  }
}

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

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

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

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

但它一直给我以下错误:

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

有什么办法吗?

我在这个问题上纠结了很长时间。

任何输入?

谢谢

【问题讨论】:

    标签: angular jasmine angular2-testing angular2-observables


    【解决方案1】:

    selectedUser$ 不是一种方法,所以你不能监视它。相反,如果您愿意,您可以将其分配给您的 observable

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

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

    更新

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

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

    那么当你想发送一个值时

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

    根据您的组件设置和订阅方式,您可能只想使用普通的 Subject 而不是 `BehaviorSubject。请参阅this post 了解更多信息。

    【讨论】:

    • 你是上帝,节省了我的时间 +1
    • 我的期望声明应该说什么?
    • 使用主题可能对测试有用,但会提供不必要的火和其他方法,对吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-12-07
    • 1970-01-01
    • 2016-06-28
    • 2018-05-20
    • 1970-01-01
    相关资源
    最近更新 更多