My test is not able to cover the pipe part of the code, don't know what's wrong. covereage of the code. I am using ngx-chip in the template. The autocompleteObservable picks the text typed in the tag-input and is passed it to the requestAutocompleteItems, further it is passed to peopleService to get data based on the text. There is also a spinner that is manually turned on and off before and after the data is processed.
component.html
<tag-input
theme="foundation-theme"
[placeholder]="placeholder"
[secondaryPlaceholder]="secondPlaceholder"
onlyFromAutocomplete="true"
[animationDuration]="animation"
[(ngModel)]="items"
(onAdd)="onItemAdded($event)"
(onRemove)="onItemRemoved()"
[maxItems]="maxItems"
(focusout)="stopLoading()"
>
<tag-input-dropdown
[autocompleteObservable]="requestAutocompleteItems"
[dynamicUpdate]="false"
[displayBy]="fieldName"
[identifyBy]="fieldId"
[minimumTextLength]="numberText"
[appendToBody]="false"
>
</tag-input-dropdown>
</tag-input>
<div class="progress-spinner" *ngIf="showLoading">
<p-progressSpinner></p-progressSpinner>
</div>
component.ts
ngOnInit() {
this.requestAutocompleteItems = (text: string): Observable<AutoCompleteItem[]> => {
this.showLoading = true;
// Add this to an autocomplete
let textJson;
if (this.department) {
textJson = {
where: { and: [{ displayName: { like: text } }, { department: { like: this.department } }] },
include: this.colsIncluded,
};
} else {
textJson = { where: { displayName: { like: text } }, include: this.colsIncluded };
}
return this.peopleService.getData(JSON.stringify(textJson)).pipe(
tap(() => {
this.showLoading = false;
}),
);
};
}
component.spec.ts
it('should stop loading', () => {
peoplePickerServiceSpy.getData.and.returnValue(of({}));
fixture.detectChanges();
component.requestAutocompleteItems('erv');
fixture.detectChanges();
expect(peoplePickerServiceSpy.getData).toHaveBeenCalled();
});
This is how I fixed the issue just as Mat said it needs a subscribe block to complete the observable I added a done function.
it('should stop loading', done => {
peoplePickerServiceSpy.getData.and.returnValue(of({}));
fixture.detectChanges();
component.requestAutocompleteItems('erv').subscribe(() => {
expect(peoplePickerServiceSpy.getData).toHaveBeenCalled();
done();
});
});