Angular2 RC.1 - इंजेक्षन रूटर इकाई परीक्षण

Question

में मैं अपने NG2 परीक्षण लिख रहा हूँ, और मैं अपने परीक्षण के लिए अपने घटक में रूटर इंजेक्शन लगाने के कुछ परेशानी में चल रहा हूँ। मेरे घटक के लिए कन्स्ट्रक्टर केवल एक तर्क लेता है - private router: Router।

लेकिन, जब मैं अपने परीक्षण का मामला चलाने के लिए, मैं जबकि यह रूटर इंजेक्षन करने की कोशिश कर रहा है एक त्रुटि हो रही है। मैं क्या गलत कर रहा हूं? क्या कोई कामकाजी उदाहरण प्रदान कर सकता है? No provider for ComponentResolver! (Router -> ComponentResolver)

यहाँ मेरी परीक्षा है::

मैं angular2-RC.1

यहाँ उपयोग कर रहा हूँ त्रुटि मैं हो रही है

import {describe, it, expect, beforeEach, afterEach, beforeEachProviders, inject} from "@angular/core/testing"; 
import {ReflectiveInjector, provide} from "@angular/core"; 
import {HTTP_PROVIDERS} from "@angular/http"; 
import {Router, ROUTER_PROVIDERS} from "@angular/router"; 
import {ROUTER_FAKE_PROVIDERS} from "@angular/router/testing"; 
import {Location} from "@angular/common"; 
import {SpyLocation} from "@angular/common/testing/location_mock"; 
import {Observable} from "rxjs/Observable"; 
import {MyComp} from "./MyComp"; 

describe("MyComp",() => { 

    let injector: ReflectiveInjector, 
     myComp: MyComp, 
     router: Router; 

    beforeEach(() => { 

    injector = ReflectiveInjector.resolveAndCreate([   
     HTTP_PROVIDERS, 
     ROUTER_FAKE_PROVIDERS,   
     provide(Location, {useClass: SpyLocation}) 

    ]); 

    router = injector.get(Router); 
    myComp = new MyComp(router); 


    });  

    afterEach(() => { 
    injector = null;  
    myComp = null; 
    router = null; 
    }); 

    it("should be defined",() => { 

    expect(myComp).toBeDefined(); 

    }); 



}); 

Answer 1

आप रूटर के लिए एक चमेली जासूस वस्तु बनाने के लिए की जरूरत है। AppComponent में एक निर्माता है जो राउटर लेता है।

import { AppComponent } from './app.component'; 
import {Router, ROUTER_PROVIDERS} from "@angular/router"; 

describe('app component',() => { 
    let component: AppComponent; 
    let router: Router; 
    beforeAll(() => { 
     router = jasmine.createSpyObj("Router", ['navigate']); 
     component = new AppComponent(router); 
    }); 
    it("should be defined",() => { 
     expect(component).toBeDefined(); 
    }); 
}); 

Answer 2

कुछ संशोधनों ... इस सरल समाधान मेरे लिए काम करता है:

import {MyComp} from "./MyComp"; 
import {RootRouter} from 'angular2/src/router/router'; 
import {provide} from 'angular2/core'; 
import {Router} from 'angular2/router'; 

describe("MyComp",() => { 
    let myComp: MyComp, 
    router; 

beforeEach(() => { 
    provide(Router, {useClass: RootRouter}) 
    myComp = new MyComp(router); 
}) 

it("should be defined",() => { 
    expect(myComp).toBeDefined(); 
    }); 
}); 

Answer 3

ठीक है, मैं एक समाधान के साथ आया था। यह आदर्श नहीं है, लेकिन यह काम करता है। असल में, मैं MockRouter कक्षा बना रहा हूं जो मुझे आवश्यक तरीकों को लागू करता है।

MockRouter:

export class MockRouter { 

    public navigate() { 
     console.log(“Mock router was called.”); 
    } 

} 

अब, अपने परीक्षण मामले में, सब मैं क्या करना है रूटर के लिए नकली कार्यान्वयन प्रदान किया जाता है:

provide(Router, {useClass: MockRouter})

यह होगा वास्तव में अच्छा अगर एनजी 2 दस्तावेज़ दिखाएंगे कि आप अपने जैस्मीन परीक्षण मामलों में Router को सही तरीके से इंजेक्ट कैसे कर सकते हैं। उनकी वस्तुओं का मज़ाक उड़ाते हुए ऐसा लगता है कि यह एक अनावश्यक कदम होना चाहिए।

(FYI करें, मैं ROUTER_FAKE_PROVIDERS उपयोग करने की कोशिश और अभी भी ऊपर ComponentResolver त्रुटि मिली)

Answer 4

यहाँ एक वैकल्पिक समाधान जो थोड़ा अधिक वर्बोज़ है, लेकिन हमें मार्ग परिवर्तन की जांच के क्रम में SpyLocation उपयोग करने के लिए अनुमति देता है। सबसे पहले हम जेनेरिक टेस्ट राउटर प्रदाता बनाते हैं।

रूटर परीक्षण-providers.ts

import { ComponentResolver } from '@angular/core'; 
import { Type } from '@angular/core/src/facade/lang'; 
import { SpyLocation } from '@angular/common/testing'; 
import { Location } from '@angular/common'; 
import { Router, RouterOutletMap } from '@angular/router'; 
import { RouteSegment } from '@angular/router/src/segments'; 
import { RouterUrlSerializer, DefaultRouterUrlSerializer } from '@angular/router/src/router_url_serializer'; 
/** 
* this class provides the means of loading the tested component type 
*/ 
export class FakeRootComponentLoader { 
    constructor(private rootComponentType: Type) { 
     this.rootComponentType = rootComponentType; 
    } 
    public getRootComponentType =() => { 
     return this.rootComponentType; 
    } 
} 

let routerFactory = function (
     fakeRootComponentLoader: FakeRootComponentLoader, 
     componentResolver: ComponentResolver, 
     urlSerializer: RouterUrlSerializer, 
     routerOutletMap: RouterOutletMap, 
     location: Location): Router 
{ 
    let fakeRootComponentType = fakeRootComponentLoader.getRootComponentType(); 
    /** 
    * _rootComponent should not be null, but it is what in angular2 rc.1 code 
    * so we replicate the behaviour 
    */ 
    return new Router(
     null, 
     fakeRootComponentType, 
     componentResolver, 
     urlSerializer, 
     routerOutletMap, 
     location); 
}; 

export const ROUTER_TEST_PROVIDERS: any[] = [ 
    {provide: RouterUrlSerializer, useClass: DefaultRouterUrlSerializer}, 
    RouterOutletMap, 
    {provide: Location, useClass: SpyLocation}, 
    {provide: RouteSegment, useFactory: (r) => r.routeTree.root, deps: [Router]}, 
    { 
    provide: Router, 
    useFactory: routerFactory, 
    deps: [FakeRootComponentLoader, ComponentResolver, RouterUrlSerializer, RouterOutletMap, Location] 
    } 
]; 

इसी चमेली परीक्षण नीचे दी गई है।

navigation.spec.ts

import { Component } from '@angular/core'; 
import { beforeEach, beforeEachProviders, inject } from '@angular/core/testing'; 
import { ROUTER_DIRECTIVES, Route, Routes, Router } from '@angular/router'; 
import { TestComponentBuilder } from '@angular/compiler/testing'; 
import { Location } from '@angular/common'; 
import { ROUTER_TEST_PROVIDERS, FakeRootComponentLoader } from './router-test-providers'; 
/** 
* We inject router into the EmptyComponent, 
* Due to the way DI works in angular2, if we import the ROUTER_TEST_PROVIDERS, 
* and inject the Router, we will get our own implementation of the Router injected. 
*/ 
@Component({selector: 'empty-component', template: `empty`}) 
@Component({ 
    selector: 'empty-component', 
    template: `empty`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
class EmptyComponent { 
    constructor (private router: Router){ } 
    public getRouter() {return this.router;} 
} 

@Component({ 
    selector: 'root-component', 
    template: `<router-outlet></router-outlet>`, 
    directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([new Route({path: '/login', component: EmptyComponent})]) 
class RootComponent { } 
describe('navigation',() => { 
    beforeEachProviders(() => [ 
     { 
      provide: FakeRootComponentLoader, 
      useFactory:() => new FakeRootComponentLoader(RootComponent) 
     }, 
     ROUTER_TEST_PROVIDERS, 
     EmptyComponent 
    ]); 


    let location: Location; 
    let testCb: TestComponentBuilder; 
    let emptyComp: EmptyComponent; 
    beforeEach(inject([Location, TestComponentBuilder, EmptyComponent], (loc, tcb, emptyCt) => { 
     location = loc; 
     testCb = tcb; 
     emptyComp = emptyCt; 

    })); 

    it('should be defined',() => { 
     expect(EmptyComponent).toBeDefined(); 
    }); 

    it('Should navigate to login', (done) => { 
     expect(location.path()).toEqual(''); 
     testCb.createAsync(RootComponent).then(fixture => { 
      emptyComp.getRouter().navigate(['login']).then(() => { 
       fixture.detectChanges(); 
       expect(location.path()).toBe('/login'); 
       done(); 
      }).catch(e => done.fail(e)); 
     }); 
    }); 
}); 

Answer 5

गुमनाम ES 6 वर्ग और jasmine का उपयोग करना:

beforeEach(() => addProviders([ 
{ 
    provide: Router, 
    useClass: class { navigate = jasmine.createSpy("navigate"); } 
}]));