角度2 - 组件的测试

Question

我正在Angular2中构建一个基本的CRUD应用程序。但是，在运行组件测试时遇到了一些问题。

组件代码：

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

import { Component, OnInit } from 'angular2/core';
import { RouteParams, Router, ROUTER_DIRECTIVES } from 'angular2/router';

import { EmployeeEditFormComponent } from './employee-edit-form.component';
import { EmployeeDetailServiceComponent } from '../services/employee-detail-service.component';
import { EmployeeDeleteServiceComponent } from '../services/employee-delete-service.component';

@Component({
  selector: 'employee-detail',
  templateUrl: 'src/pages/employee-detail.component.html',
  providers: [
    EmployeeDetailServiceComponent,
    EmployeeDeleteServiceComponent
  ],
  directives: [ ROUTER_DIRECTIVES, EmployeeEditFormComponent ]
})

export class EmployeeDetailComponent implements OnInit {
  public currentEmployee;
  public errorMessage: string;

  constructor(
    private _router: Router,
    private _routeParams: RouteParams,
    private _detailService: EmployeeDetailServiceComponent,
    private _deleteService: EmployeeDeleteServiceComponent
  ){}

  ngOnInit() {
    let id = parseInt(this._routeParams.get('id'));
    this._detailService.getEmployee(id).subscribe(
                     employee => this.currentEmployee = employee,
                     error =>  this.errorMessage = <any>error
                   );
  }

  deleteHandler(id: number) {
    this._deleteService.deleteEmployee(id).subscribe(
      employee => this.currentEmployee = employee,
      errorMessage => this.errorMessage = errorMessage,
      () => this._router.navigate(['EmployeeList'])
    )
  }
}

规范代码：

/// <reference path="../../typings/main/ambient/jasmine/jasmine.d.ts" />

import {
    it,
    describe,
    expect,
    TestComponentBuilder,
    injectAsync,
    setBaseTestProviders,
    beforeEachProviders
} from "angular2/testing";
import {
    Response,
    XHRBackend,
    ResponseOptions,
    HTTP_PROVIDERS
} from "angular2/http";
import {
    MockConnection,
    MockBackend
} from "angular2/src/http/backends/mock_backend";
import {
    TEST_BROWSER_PLATFORM_PROVIDERS,
    TEST_BROWSER_APPLICATION_PROVIDERS
} from "angular2/platform/testing/browser";
import {
    Component,
    provide
} from "angular2/core";
import {
    RouteParams
} from 'angular2/router';
import 'rxjs/Rx';

import { Employee } from '../models/employee';
import { EmployeeDetailComponent } from './employee-detail.component';
import { EmployeeEditFormComponent } from './employee-edit-form.component';
import { EmployeeDetailServiceComponent } from '../services/employee-detail-service.component';
import { EmployeeDeleteServiceComponent } from '../services/employee-delete-service.component';

class MockDetailService{
    public getEmployee (id: number) {
        return new Employee(1, "Abhinav Mishra");
    }
}

class MockDeleteService{
    public deleteEmployee (id: number) {
        return new Employee(1, "Abhinav Mishra");
    }
}

describe('Employee Detail Component Tests', () => {
    setBaseTestProviders(
        TEST_BROWSER_PLATFORM_PROVIDERS,
        TEST_BROWSER_APPLICATION_PROVIDERS
    );

    beforeEachProviders(() => {
        return [
            HTTP_PROVIDERS,
            provide(XHRBackend, {useClass: MockBackend}),
            provide(RouteParams, { useValue: new RouteParams({ id: '1' }) }),
            provide(EmployeeDetailServiceComponent, {useClass: MockDetailService}),
            provide(EmployeeDeleteServiceComponent, {useClass: MockDeleteService})
        ]
    });

    it('should render list', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
        return tcb
            .overrideProviders(EmployeeDetailComponent,
                [
                    provide(EmployeeDetailServiceComponent, {useClass: MockDetailService}),
                    provide(EmployeeDeleteServiceComponent, {useClass: MockDeleteService})
                ]
            )
            .createAsync(EmployeeDetailComponent).then((componentFixture) => {
                componentFixture.detectChanges();
                expect(true).toBe(true);
        });
    }));
});

我一直收到以下错误：

Error: XHR error (404 Not Found) loading http://localhost:9876/angular2/router
      at error (/home/abhi/Desktop/angular2-testing/node_modules/systemjs/dist/system.src.js:1026:16)
      at XMLHttpRequest.xhr.onreadystatechange (/home/abhi/Desktop/angular2-testing/node_modules/systemjs/dist/system.src.js:1047:13)
      at XMLHttpRequest.wrapFn [as _onreadystatechange] (/home/abhi/Desktop/angular2-testing/node_modules/angular2/bundles/angular2-polyfills.js:771:30)
      at ZoneDelegate.invokeTask (/home/abhi/Desktop/angular2-testing/node_modules/angular2/bundles/angular2-polyfills.js:365:38)
      at Zone.runTask (/home/abhi/Desktop/angular2-testing/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
      at XMLHttpRequest.ZoneTask.invoke (/home/abhi/Desktop/angular2-testing/node_modules/angular2/bundles/angular2-polyfills.js:431:34)

获得一些反馈会很棒。