Testing Loading States using RxJS operators

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: `    <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>`,  styleUrls: ['./restaurant.component.less']})export class RestaurantComponent 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     })  }}

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