angularrxjspipetaprxjs-observables

Test is not entering rxjs operator pipe and tap in the Angular code


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

Solution

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