Question

我试图在组件测试中模拟出服务依赖关系，该服务具有我要模拟的行为主题属性。

我的服务如下：

export class DatePickerService {
  public date: moment.Moment;
  public selectedDate: BehaviorSubject<moment.Moment> = new BehaviorSubject<moment.Moment>(moment());

  public changeDate = (date: moment.Moment) => {
    this.selectedDate.next(date);
  }
}

然后在我的组件中订阅了selectedDate：

ngOnInit() {
    this.datePickerService.selectedDate.subscribe((selectedDate) => {
        // do stuff here...
    }
}

在测试组件时，我正在使用TestBed方法，并为日期选择器服务提供了自己的模拟程序：

const mockDatePickerService = {
    selectedDate: jasmine.createSpy().and.returnValue(of(moment('01-01-2018', 'DD-MM-YYYY')))
};

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [
            MyComponent
        ],
        providers: [
            HttpClient,
            HttpHandler,
            { provide: DatePickerService, useValue: mockDatePickerService }
        ],
        imports: [
            TranslateModule.forRoot(),
            RouterTestingModule
        ]
    })
    .compileComponents();
}));

在尝试运行我的第一个测试时，

出现错误

TypeError: undefined is not a constructor (evaluating 'this.datePickerService.selectedDate.subscribe')

如果我在组件的onInit中注销服务的值，则会看到我的模拟：

LOG: Object{selectedDate: function () { ... }}

所以我不确定为什么会看到这个未定义的错误，我想知道它是否与我使用的茉莉花和returnValue调用一起使用的of？

请问有人有想法吗？

谢谢

Answer 1

如果我是您，则将使用与服务使用的对象相同的对象，并根据需要对其进行控制。

这里是一个示例：

const subjectMock = new BehaviorSubject<moment.Moment>(undefined),
const mockDatePickerService = {      
  selectedDate: subjectMock.asObservable()
};

现在，您可以像以前一样提供它，并且可以在测试中简单地执行此操作（这是一个示例，不是必须执行的测试）：

it('changeDate should call subject.next', () => {
  const value = 'Moment value here';
  subjectMock
    .pipe(filter(res => !!res))
    .subscribe(res => expect(res).toEqual(value));

  subjectMock.next(value);
});

在组件测试规范中模拟BehaviourSubject

1 个答案: