Насмешка BehaviourSubject в спецификации тестирования компонента

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

На выбранную дату подписывается мой компонент:

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