我目前正在使用ngBootstrap的自动完成机制(提前输入)。现在,我想对输入事件的每个序列上是否调用方法进行单元测试。我的测试用例中的错误当前为:Cannot read property 'pipe' of undefined
<input id="locationEdit" type="text" class="form-control"
[(ngModel)]="user.location" name="location [ngbTypeahead]="search"/>
public ngOnInit() {
this.search = (text$: Observable<string>) =>
text$.pipe(
tap(() => {
this.isSearching = true;
this.searchFailed = false;
}),
debounceTime(750),
distinctUntilChanged(),
switchMap(term =>
this.cityService.getLocation(term).pipe(
tap((response) => {
this.searchFailed = response.length === 0;
this.isSearching = false;
})))
);
}
it('should call spy on city search', fakeAsync(() => {
component.user = <User>{uid: 'test', username: 'mleko', location: null, description: null};
const spy = (<jasmine.Spy>cityStub.getLocation).and.returnValue(of['München Bayern']);
fixture.detectChanges();
const compiled: DebugElement = fixture.debugElement.query(By.css('#locationEdit'));
compiled.nativeElement.value = 'München';
compiled.nativeElement.dispatchEvent(new Event('input'));
tick(1000);
fixture.detectChanges();
expect(spy).toHaveBeenCalled();
}));
有人可以帮助我适当地嘲笑this.search吗?
根据@dmcgrandle的出色建议,我不需要呈现HTML并模拟输入事件,以检查预输入是否有效。我宁可设置一个Observable,它发出值并将其分配给函数。一种方法是:
it('should call spy on city search', fakeAsync(() => {
const spy = (<jasmine.Spy>cityStub.getLocation).and.returnValue(of['München Bayern']);
component.ngOnInit();
const textMock = of(['M', 'Mün', 'München']).pipe(flatMap(index => index));
component.search(textMock);
tick();
expect(spy).toHaveBeenCalled();
}));
但是问题仍然是,component.search
没有召唤间谍。在switchMap
运算符的搜索功能中,我添加了console.log
以查看该功能是否发出了值。但事实并非如此。也许有人可以解决我的问题。 :)
答案 0 :(得分:2)
我认为您实际上不想在测试期间调用任何ngBootstrap代码-毕竟,您想对代码进行单元测试,而不是对其进行单元测试。 :)
因此,我建议通过设置自己的定时Observable并使用它调用函数来模拟用户实际键入。也许模拟每100毫秒发送一个字符。像这样:
it('should call spy on city search', fakeAsync(() => {
component.user = <User>{uid: 'test', username: 'mleko', location: null, description: null};
// Change next line depending on implementation of cityStub ...
const spy = spyOn(cityStub, 'getLocation').and.returnValue(of('München Bayern'));
fixture.detectChanges();
let inputTextArray = ['M', 'Mü', 'Mün', 'Münc', 'Münch', 'Münche', 'München'];
let textMock$ : Observable<string> = interval(100).pipe(take(7),map(index => inputTextArray[index]));
component.search(textMock$);
tick(1000);
expect(spy).toHaveBeenCalled();
}));
更新:
我在这里进行了一次堆叠闪电测试以进行测试:https://stackblitz.com/edit/stackoverflow-question-52914753(在左侧打开应用程序文件夹,然后单击my.component.spec.ts以查看测试文件)
一旦我找到它,就很明显出了什么问题–观察者未得到订阅,因为该订阅似乎是由ngBootstrap完成的,因此为了进行测试,我们需要显式订阅。这是我的新建议规格(摘自stackblitz):
it('should call spy on city search', fakeAsync(() => {
const cityStub = TestBed.get(CityService);
const spy = spyOn(cityStub, 'getLocation').and.returnValue(of('München Bayern'));
fixture.detectChanges();
let inputTextArray = ['M', 'Mü', 'Mün', 'Münc', 'Münch', 'Münche', 'München'];
let textMock$ : Observable<string> = interval(100).pipe(take(7),map(index => inputTextArray[index]));
component.search(textMock$).subscribe(result => {
expect(result).toEqual('München Bayern');
});
tick(1000);
expect(spy).toHaveBeenCalled();
}));
答案 1 :(得分:1)
请尝试在服务内部移动可观察对象:
组件:
this.cityService.text$.pipe
服务:
export class CityService {
private _subject = null;
text$ = null;
constructor(private _httpClient: HttpClient) {
this.init();
}
init() {
this._subject = new BehaviorSubject<any>({});
this.text$ = this._subject.asObservable();
}
如果您需要更多详细信息,我可以扩展我的答案。