أنغولار - محاكاة BehaviourSubject في مواصفة اختبار مكوّن
أحاول تقليد تبعية خدمة داخل اختبار المكون، هذه الخدمة لديها خاصية موضوع سلوكي أحاول تقليدها.
خدمتي كالتالي:
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 () { ... }}
لذلك أنا غير متأكد لماذا أرى هذا الخطأ غير المحدد، وأتساءل إذا كان ذلك بسبب استخدامي لـ jasmine و returnValue مع استدعاء of؟
هل لدى أي شخص أي أفكار من فضلك؟
شكراً
الإجابة رقم 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);
});
