TDD - Unit test for components

Basic Component Unit test with Fake DB

/***
Fake backend router looks like this.

static router(url: string): DBConnection {
    if (url === environment.apiUrl + 'users') {
      return {db: annotators, searchField: '', type: RequestType.Pagination};
    } else if (url.includes(environment.apiUrl + 'corpora')) {
      if (url === environment.apiUrl + 'corpora') {
        return {db: corpora, searchField: 'name', type: RequestType.Pagination};
      } else {
        const id = url.replace(environment.apiUrl + 'corpora/', '');
        if (id.includes('/documents')) {
          if (id.includes('/documents/')) {
            return {db: documents, searchField: 'uri', type: RequestType.Detail,
              id: +id.slice(id.indexOf('/documents/') + 11, id.length)};
          } else {
            return {db: documents, searchField: 'uri', type: RequestType.Pagination};
          }
        } else {
          return {db: corpora, searchField: 'name', type: RequestType.Detail, id: parseInt(id, 10)};
        }
      }
    } else if (url.includes(environment.apiUrl + 'tasks')) {
        if (url === environment.apiUrl + 'tasks') {
          return {db: tasks, searchField: 'name', type: RequestType.Pagination};
        } else {
          const id = url.replace(environment.apiUrl + 'tasks/', '');
          return {db: tasks, searchField: 'name', type: RequestType.Detail, id: parseInt(id, 10)};
        }
    } else if (url.includes(environment.apiUrl + 'annotations')) {
        if (url === environment.apiUrl + 'annotations/types') {
          return {db: entities, searchField: 'title', type: RequestType.Pagination};
        } else {
          const id = url.replace(environment.apiUrl + 'annotations/types/', '');
          return {db: entities, searchField: 'title', type: RequestType.Detail, id: parseInt(id, 10)};
        }
    } else {
      return {db: [], searchField: '', type: RequestType.All};
    }
  }
  
***/


import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { MaterialModule } from '@anno/material';
import { ActivatedRouteStub } from '../../../_mock-backend/router/activated-route-stub';
import { CorpusService } from '@anno/core/service';
import { SharedService } from '@anno/shared/service';
import { HttpClientMock } from '../../../_mock-backend/http/http-client.mock';
import { CorpusViewComponent } from './corpus-view.component';
import { corpora, documents } from '../../../_mock-backend/_db';

class FakeMatDialogRef {
  resValue;
  constructor(flag: boolean) {
    this.resValue = flag;
  }

  afterClosed() { // fake event to return true always
    return Observable.of(this.resValue);
  }
}

describe('CorpusViewComponent', () => {
  let component: CorpusViewComponent;
  let fixture: ComponentFixture<CorpusViewComponent>;
  let activatedRoute: ActivatedRouteStub;
  let matDialog: MatDialog;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, MaterialModule],
      declarations: [ CorpusViewComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        CorpusService,
        SharedService,
        {provide: HttpClient, useClass: HttpClientMock},
        {provide: ActivatedRoute, useClass: ActivatedRouteStub}
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    // fake snapshot data injection
    activatedRoute = TestBed.get(ActivatedRoute);
    activatedRoute.setSnapshotData({corpus: corpora[3]});
    activatedRoute.setSnapshotQueryParam({taskId: 2});
    matDialog = TestBed.get(MatDialog);
    spyOn(matDialog, 'open').and.callFake((t: any, c: any) => {
      if (c) {
        if (c.data) {
          if (c.data.id) {
            return new FakeMatDialogRef(false);
          }
        }
      }
      return new FakeMatDialogRef(true);
    });

    fixture = TestBed.createComponent(CorpusViewComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});