角度2のテスト -/employees /：/ id/editへのルーティングのためのRouteParamsを提供

Question

私はルート/employees/:id/editに対応するコンポーネントを持っています。今、私は単体テストを書いてみたいと思います。そのために

、私は beforeEachProvidersブロックに RouteParamsを次ています

provide(RouteParams, { useValue: new RouteParams({ id: '1' }) } 

私の推測では、id属性はRouteParamsモックで置き換えられますでした。私は同じようitブロック内の現在のURLをログインしたときしかし：

console.log(window.location.href); 

私はinnerHTMLプロパティが空でもLOG: 'http://localhost:9876/context.html'

を取得します。

だから、私はRouteParamsを違うように模擬していますか？

コンポーネントコード：

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

import { Employee } from '../models/employee'; 
import { EmployeeDetailServiceComponent } from '../services/employee-detail-service.component'; 
import { EmployeeEditFormServiceComponent } from '../services/employee-edit-form-service.component'; 

@Component({ 
    selector: 'employee-edit-form', 
    template: ` 
    <div class="container"> 
    <h3>Employee Edit Form</h3> 
    <form (ngSubmit)="onSubmit()" #employeeForm="ngForm" *ngIf="currentEmployee != undefined"> 
     <div class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" class="form-control" required [(ngModel)]="currentEmployee.name" 
      ngControl="name" #name="ngForm"> 
     <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> 
     Name is required 
     </div> 
     </div> 
     <button type="button" class="btn btn-default" (click)="editEmployee()" [disabled]="!employeeForm.form.valid">Update</button> 
    </form> 
    </div> 
    `, 
    providers: [ 
    EmployeeDetailServiceComponent, 
    EmployeeEditFormServiceComponent 
    ] 
}) 

export class EmployeeEditFormComponent implements OnInit { 
    public currentEmployee: Employee; 
    public errorMessage: string; 

    constructor(
    private _router: Router, 
    private _routeParams: RouteParams, 
    private _detailService: EmployeeDetailServiceComponent, 
    private _editService: EmployeeEditFormServiceComponent 
){} 

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

    editEmployee() { 
    this._editService.editEmployee(this.currentEmployee) 
    .subscribe(
     employee => this.currentEmployee = employee, 
     error => this.errorMessage = <any>error, 
    () => this._router.navigate(['EmployeeDetail', {id: this.currentEmployee.id}]) 
    ); 
    } 
} 

スペックコード

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

import { 
    it, 
    describe, 
    expect, 
    TestComponentBuilder, 
    injectAsync, 
    setBaseTestProviders, 
    beforeEachProviders, 
    resetBaseTestProviders 
} from "angular2/testing"; 
import { 
    Component, 
    provide, 
    ApplicationRef 
} from "angular2/core"; 
import { 
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS 
} from "angular2/platform/testing/browser"; 
import { 
    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    ROUTER_PRIMARY_COMPONENT, 
    APP_BASE_HREF, 
    Router, 
    RouteParams, 
    RouteRegistry 
} from 'angular2/router'; 
import {RootRouter} from "angular2/src/router/router"; 
import {SpyLocation} from "angular2/src/mock/location_mock"; 
import {Location} from "angular2/src/router/location/location"; 
import { 
    XHRBackend, 
    HTTP_PROVIDERS, 
    Response, 
    ResponseOptions 
} from "angular2/http"; 
import { MockApplicationRef } from 'angular2/src/mock/mock_application_ref'; 
import { 
    MockBackend, 
    MockConnection 
} from "angular2/src/http/backends/mock_backend"; 
import { BrowserDomAdapter } from 'angular2/src/platform/browser/browser_adapter'; 
import 'rxjs/Rx'; 

import { AppComponent } from '../app.component'; 
import { EmployeeEditFormComponent } from './employee-edit-form.component'; 
import { EmployeeDetailServiceComponent } from '../services/employee-detail-service.component'; 
import { EmployeeEditFormServiceComponent } from '../services/employee-edit-form-service.component'; 


class MockEmployeeDetailServiceComponent {} 

class MockEmployeeEditFormServiceComponent {} 


@Component({ 
    template: '<employee-edit-form></employee-edit-form>', 
    directives: [EmployeeEditFormComponent] 
}) 
class TestMyEditForm extends EmployeeEditFormComponent{} 


describe('Employee Edit Form Tests',() => { 
    resetBaseTestProviders(); 
    setBaseTestProviders(
     TEST_BROWSER_PLATFORM_PROVIDERS, 
     TEST_BROWSER_APPLICATION_PROVIDERS 
    ); 
    beforeEachProviders(() => { 
     return [ 
      ROUTER_DIRECTIVES, 
      ROUTER_PROVIDERS, 
      HTTP_PROVIDERS, 
      EmployeeEditFormComponent, 
      EmployeeDetailServiceComponent, 
      EmployeeEditFormServiceComponent, 
      provide(XHRBackend, {useClass: MockBackend}), 
      provide(APP_BASE_HREF, {useValue: '/'}), 
      provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppComponent}), 
      provide(ApplicationRef, {useClass: MockApplicationRef}), 
      RouteRegistry, 
      provide(Location, {useClass: SpyLocation}), 
      provide(Router, {useClass: RootRouter}), 
      provide(RouteParams, { useValue: new RouteParams({ id: '1' }) }) 
     ] 
    }); 

    it('Should display the edit form of employees', 
     injectAsync([XHRBackend, TestComponentBuilder], (backend, tcb) => { 
      backend.connections.subscribe(
       (connection:MockConnection) => { 
        var options = new ResponseOptions({ 
         body: { 
          "id": 1, 
          "name": "Roshan Shrestha" 
         } 
        }); 

        var response = new Response(options); 

        connection.mockRespond(response); 
       } 
      ); 

      return tcb 
       .createAsync(TestMyEditForm) 
       .then((fixture) => { 
        fixture.detectChanges(); 
        var comp = fixture.debugElement.componentInstance; 
        console.log(comp); 
       }); 
     }) 
    ); 
}); 

Answer 1

実際には、あなたが提供されたデータはあなたのRouteParamsを注入されたのparameters属性内に含まれています。プロバイダをコンフィグレーションしてコンポーネントのコンストラクタに指定すると、インスタンスが挿入されますが、実際にルーティングが行われないため、URLは更新されません。

https://plnkr.co/edit/pFmiyk?p=preview：

@Component({ 
    selector: 'dropdown', 
    template: ` 
    <div>Test</div> 
    ` 
}) 
export class DropdownComponent { 
    constructor(public data:RouteParams) { 
    } 
} 

が対応plunkrを参照：ここ

beforeEachProviders(() => { 
    return [ 
    provide(RouteParams, { useValue: new RouteParams({ id: '1' }) 
    ]; 
}); 

it('should access route params', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
    return tcb.createAsync(DropdownComponent) 
    .then(fixture => { 
     let comp: DropdownComponent = fixture.componentInstance; 
     fixture.detectChanges(); 

     expect(comp.data.params).toEqual({ id: '1' }); 
    }); 
})); 

は、対応するコンポーネントです。