Angular2茉莉花测试组件未定义

Question

我正在尝试为angular2组件编写测试用例，但根本无法定义测试组件。下面是我正在编写测试的主要组件。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';
import { OmQuote } from '../../services/model/omquote';
import * as generated from '../../services/generated/index';
import { ApplicationService } from '../../services/application.service';
import { PageLoader } from '../../common/loader/loader';

@Component({
  selector: 'app-cash-back',
  templateUrl: './cash-back.component.html',
  styleUrls: ['./cash-back.component.css']
})
export class CashBackComponent implements OnInit {

  omQuote: OmQuote;
  instanceNumber: string;
  bankListObject: any;
  ngbModalOptions: NgbModalOptions = {};
  party: generated.Individual;
  parties: generated.Individual[];
  activeTabIndex: number = 1;
  formsValidStatus: any = {
    'percentForm': {},
    'bankingForm': {}
  };


  constructor(
    private applicationService: ApplicationService,
    private router: Router,
    private route: ActivatedRoute,
    private modalService: NgbModal,
    private loader: PageLoader) { }

  ngOnInit() {
    this.omQuote = new OmQuote();
    this.route.params.subscribe((params) => {
      this.instanceNumber = params['instanceNumber'];
    });
    this.applicationService.getAgreementCB(this.instanceNumber).subscribe(
      (data: generated.ResponseObjectQuote) => {
        this.omQuote = data.responsePayload;

      });

    this.applicationService.getAgreementBD().subscribe(
      (data: generated.ResponseObjectQuote) => {
        this.bankListObject = data.responsePayload;
        console.log('===Bank Details====', this.bankListObject);
      });

  }

  // for (multiple) products check if one contracting party for each product.
  checkIfOneCPExist(omQuote: OmQuote) {
    ..
  }

  // setting partylist of Contracting parties of First product
  setContractingpartiesList() {
    ..
  }

  // if missing, set banking object
  setQuoteMockData() {
    this.parties.forEach(party => {
      if (!party.bankDetails) {
        let bankDetails = new generated.BankDetails();
        party.bankDetails = null;
        party.bankDetails = bankDetails;
      }
    });
  }    
  ....    
}

还创建了一个模拟数据的模拟服务。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { environment } from '../../environments/environment';
import { SplitPipe } from './../common/pipes/string-split.pipe';
import { ApplicationService } from './application.service';
import * as generated from './generated/index';
import { OmQuote } from './model/omquote';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class MockApplicationService extends ApplicationService {

    // Mock getAgreement for fetching Details of Cash back
    getAgreementCB(instanceNumber: string): Observable<generated.ResponseObjectQuote> {
        return Observable.of('assets/mock-json/app/123NEHA/cashback.json');
    }

    // MOck getAgreement for fetching Details of Bank
    getAgreementBD(): Observable<generated.ResponseObjectListBankDetails> {
        return Observable.of('assets/mock-json/app/bankList.json');
    }
}

以下是我编写的spec文件。每次我运行它都会给我一个错误无法读取未定义的属性'subscribe'。不确定为什么测试床无法创建组件实例。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ActivatedRoute, ActivatedRouteSnapshot, Data, Params, Route, Router, UrlSegment } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { ModalDismissReasons, NgbActiveModal, NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs/Rx';
import { PageLoader } from '../../common/loader/loader';
import { NativeMethod } from '../../common/native-method/native-method';
import { MockApplicationService } from '../../services/application.mock.service';
import { ApplicationService } from '../../services/application.service';
import * as generated from '../../services/generated/index';
import { OmQuote } from '../../services/model/omquote';
import { CpBankingDetailsComponent } from '../cp-banking-details/cp-banking-details.component';
import { PartyBubbleComponent } from '../party-bubble/party-bubble.component';
import { SubHeaderComponent } from '../sub-header/sub-header.component';
import { CashBackComponent } from './cash-back.component';

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

  class MockNgbModal {
    open() {
      return {
        result: Promise.resolve('Save'),
        componentInstance: {
          quote: {},
        },
      };
    }
  }
  // tslint:disable-next-line:max-classes-per-file
  class MockActivatedRoute extends ActivatedRoute {
    constructor() {
      super();
      this.params = Observable.of({ id: '5' });
    }
  }

  // tslint:disable-next-line:max-classes-per-file
  class MockRouter {
    navigate = jasmine.createSpy('navigate');
  }


  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, HttpModule],
      providers: [
        {provide: ApplicationService, useClass: MockApplicationService}, generated.AdvisorWebApplicationControllerApi,
        {provide: Router, useClass: MockRouter},
        { provide: ActivatedRoute, useClass: MockActivatedRoute},
        { provide: NgbModal, useClass: MockNgbModal },
        PageLoader, NativeMethod
      ],
      declarations: [CashBackComponent, SubHeaderComponent, CpBankingDetailsComponent, PartyBubbleComponent]
      // schemas: [NO_ERRORS_SCHEMA],
    });

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

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

任何人都可以建议它有什么问题吗？