DEV Community

Jennifer Wadella for Bitovi

Posted on • Updated on

Testing Loading States using RxJS operators

A very common pattern is showing some sort of loading visual while data is being fetched. In Angular we can elegantly build this using a reactive programming approach with RxJS - but how do we test it?

Let's say we are fetching a list of our cats names from a service and want to handle loading behavior while that request is made. We might do something like this:

import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

interface ResponseData<T> {
  data: Array<T>;
}
interface MappedData<T> {
  value: Array<T>;
  isLoading: boolean;
}

@Component({
  selector: 'cat-list',
  template: `
     <ng-container *ngIf="cats$ | async as cats">
        <div class="pending" *ngIf="cats?.isLoading; else loaded"></div>
        <ng-template #loaded>
            <div class="cat" *ngFor="let cat of cats.value">
            <p>Name: {{cat.name}}</p>
            </div>
        </ng-template>
    </ng-container>
`,
  styleUrls: ['./cat.component.less']
})
export class CatListComponent implements OnInit {
  public cats$: Observable<MappedData<Cat>>;

  constructor(private catService: CatService) { }

  ngOnInit() {
    this.cats$ = this.catService.getCats().pipe(
     map((res: ResponseData<Cat>) => {
      return {
        value: res.data,
        isLoading: false
      }
     }),
     startWith({
       value: [],
       isLoading: true
     })
  }
}
Enter fullscreen mode Exit fullscreen mode

We're using the startWith operator to set our observable to initially have an empty array and and isLoading value of true. In our unit test, we'll make sure our UI is reflecting the loading state as we'd expect:

import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';

import { CatListComponent } from './cat-list.component';
import { of, asyncScheduler } from 'rxjs';
import { CatsService } from '../catList/cats.service';

class MockCatsService {
  getCats() {
    return of({
      data: [{
        name: 'Sake',
        age: 10
      },
      {
        name: 'Butter',
        age: 15
      },
      {
        name: 'Parker',
        age: 7
      },
      {
        name: 'Kaylee',
        age: 2
      }]
    }, asyncScheduler);
  }
}

describe('CatListComponent', () => {
  let component: CatListComponent;
  let fixture: ComponentFixture<CatListComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CatListComponent ],
      providers: [{
        provide: CatsService,
        useClass: MockCatsService
      }],
    })
    .compileComponents();
  }));

  it('should create', () => {
    const fixture = TestBed.createComponent(CatListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    expect(component).toBeTruthy();
    fixture.destroy();
  });

  it('should show loading div while results are loading', fakeAsync((): void => {
    const fixture = TestBed.createComponent(CatListComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const loadingDiv = compiled.querySelector('.loading');
    expect(loadingDiv).toBeTruthy();
    fixture.destroy();
  }));

  it('should show cat divs when results have loaded', fakeAsync((): void => {
    const fixture = TestBed.createComponent(CatListComponent);
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    tick();
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    const loadingDiv = compiled.getElementsByClassName('cat');
    expect(loadingDiv.length).toBe(4);
    fixture.destroy();
  }));
});

Enter fullscreen mode Exit fullscreen mode

Because I want to first test the isLoading state I want to be able to see what the UI looks like before my getCats method, so I wrap my assertion in a fakeAsync function. This function creates a fake async zone where I can call a tick function to simulate the passage of time. By doing this I essentially can test my Observables as though they were synchronous.

I call tick and fixture.detectChanges for each "timer"; to trigger the component lifecycle like ngOnInit, when the observable is created, when the observable is subscribed to using the async pipe in the view, etc.

Discussion (3)

Collapse
rompetomp profile image
Hannes Vermeire

Hi Jennifer, great post. Wouldn't this call the Observable twice though?

    <div class="pending" *ngIf="(cats | async)?.isLoading; else loaded"></div>
    <ng-container #loaded>
        <div class="cat" *ngFor="let cat of (cats | async)?.value">
        <p>Name: {{cat.name}}</p>
        </div>
    </ng-container>

Once for the *ngIf and another time for the *ngFor?

Collapse
cvanpoelje profile image
cvanpoelje

Great post! little disappointing that cats need to be served in a RestaurantComponent though :(

Collapse
likeomgitsfeday profile image
Jennifer Wadella Author

haha, nice catch. I was transposing from another project code. fixed.