5

私は、次のコードを持っている...角2経路をモックするにはどうすればよいですか?

export class LoginComponent { 
    userName: string; 
    password: string; 
    rememberMe: boolean = false; 
    constructor(private auth: AuthenticationService, 
       private router: Router) { 
     ... 
    } 
    ... 
} 

私はユニットテストをしようとしていますが、私の最初の試みが失敗した....

beforeEach(() => { 
     router = new Router(); 
     component = new LoginComponent(authService, router); 
}); 

を、それがルータのコンストラクタのためのparamsを必要とするため。 Here I saw ...

beforeEach(() => addProviders([ 
    APP_ROUTER_PROVIDERS, // must be first 
    {provide: APP_BASE_HREF, useValue: '/'}, // must be second 
    {provide: ActivatedRoute, useClass: Mock}, 
    {provide: Router, useClass: Mock} 
])); 

しかし、私は、私の依存関係でAPP_ROUTER_PROVIDERSまたはMockのどこを持っていないようですので、私はそれが古いかもしれないと思う(または私は依存関係を必要とします)。

これをどうやって嘲笑しますか?それは私が取り組んでいるテストのために重要ではない。あなたは自分自身のモックを作成して、例えば、値によってそれを提供することができ、単純なケースでは

答えて

6

describe('whatever',() => { 
    let mockRouter: any; 
    ... 

    beforeEach(async(() => { 
    // create your own mock 
    mockRouter = jasmine.createSpyObj('Router', ['navigate']); 

    ... 

    TestBed.configureTestingModule({ 
     declarations: [LoginComponent], 
     providers: [ 
     // provide it by value 
     { provide: Router, useValue: mockRouter }, 
     ... 
     ], 
    }).compileComponents(); 
    })); 

    ... 

}); 

これはむしろ「new -up」クラスにしようとするよりも、テストベッドの依存性注入を使用していますテスト中。文脈での例については、例えば、参照文献を参照されたい。 one of my projects on GitHub

+0

これは実際のプロジェクトとはどのように違いますか(私が見た前に投稿しました)。 'TestBed.configureTestingModule({imports:[RouterTestingModule]});'と 'router = TestBed.get(Router);'は必要です。私はまだそれをテストしていないので、私はそれが動作するかどうかはわかりません。 – Jackie

+0

@Jackie「実際のプロジェクト」*は何を意味していますか? – jonrsharpe

+0

https://github.com/angular/angular/blob/master/modules/%40angular/router/test/router.spec.ts – Jackie

2

正しいように見えるので、あなたはこれが唯一のbeforeEachで2本のラインを必要見ることができるように私は...

...しかし、私は実際にそれを異なって実装し、

describe("Login Component",() => { 
    let component: LoginComponent; 
    let authService: AuthenticationService; 
    let router: Router; 

    describe("Testing the subscription happens",() => { 
     beforeEach(() => { 
      TestBed.configureTestingModule({imports: [RouterTestingModule]}); 
      router = TestBed.get(Router); 
      authService = new AuthenticationService(); 
      authService.notifications = new Subject(); 
      authService.notifications.subscribe = jasmine.createSpy("SpyToTestNotifications"); 
     }); 
     it("Make sure we try to subscribe to the auth event",() => { 
      component = new LoginComponent(authService, router); 
      expect(authService.notifications.subscribe).toHaveBeenCalled(); 
     }) 
    }); 
}); 

を上記の答えを受け入れ

TestBed.configureTestingModule({imports: [RouterTestingModule]}); 
router = TestBed.get(Router); 

しかし、@ jonrsharpeによれば、これは多くのことを行うので、他の副作用が起こる可能性は保証できません。しかし、それは素早く汚れていて、うまくいくと思われます。

2

ここでは、テストごとにクエリ文字列パラメータをロードする作業例を示します。角度2.3で動作します。

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     MyViewerComponent, 
     ... 
     ], 
     imports: [ 
     HttpModule, 
     FormsModule, 
     RouterModule, 
     ... 
     ], 
     providers: [ 
     {provide: ActivatedRoute, useValue: {queryParams: {test: 111}}}, 
     {provide: MyService, useClass: MyMockService} 
     ] 
    }) 
     .compileComponents(); 
    }));