Last active
August 10, 2016 11:18
-
-
Save mafo5/bfce5c83d0c7e9953b1c632f1759bc84 to your computer and use it in GitHub Desktop.
Testing router functionality of a component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* tslint:disable:no-unused-variable */ | |
import { addProviders, async, inject, getTestInjector } from '@angular/core/testing'; | |
import { provideRouter } from '@angular/router'; | |
import { createPlatform, PlatformRef, EventEmitter } from '@angular/core'; | |
import { LocationStrategy } from '@angular/common'; | |
import { SpyLocation } from '@angular/common/testing'; | |
import { AppComponent } from './app.component'; | |
import { ObservableWrapper } from '@angular/core/src/facade/async'; | |
const routes = []; | |
class MockLocationStrategy extends SpyLocation { | |
internalBaseHref:string = '/'; | |
/** @internal */ | |
_subject:EventEmitter<any> = new EventEmitter(); | |
constructor() { | |
super(); | |
} | |
pushState(ctx:any, title:string, path:string, query:string):void { | |
this.go(path, query); | |
} | |
onPopState(fn:(value:any) => void):void { | |
ObservableWrapper.subscribe(this._subject, fn); | |
} | |
getBaseHref():string { | |
return this.internalBaseHref; | |
} | |
} | |
describe('App: Testapp', () => { | |
beforeEach(() => { | |
addProviders([ | |
provideRouter(routes), | |
{ provide: LocationStrategy, useClass: MockLocationStrategy }, | |
AppComponent | |
]); | |
try { | |
getTestInjector().get(PlatformRef); | |
} catch (error) { | |
console.log('have to create platform'); | |
createPlatform(getTestInjector()); | |
} | |
}); | |
it('should create the app', | |
inject([AppComponent], (app: AppComponent) => { | |
expect(app).toBeTruthy(); | |
})); | |
it('should have as title \'app works!\'', | |
inject([AppComponent], (app: AppComponent) => { | |
expect(app.title).toEqual('app works!'); | |
})); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from '@angular/core'; | |
import { Router } from '@angular/router'; | |
@Component({ | |
moduleId: module.id, | |
selector: 'app-root', | |
templateUrl: 'app.component.html', | |
styleUrls: ['app.component.css'] | |
}) | |
export class AppComponent { | |
title = 'app works!'; | |
currentNav: any; | |
constructor(router:Router) { | |
router.events.subscribe((event) => { | |
this.currentNav = event; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
These are the changed files of an angular CLI 1.0.0-beta.10 created angular2 RC4 project.
The first test will fail with "Bootstrap at least one component before injecting Router." Why?
The second test will fail with "There can be only one platform. Destroy the previous one to create a new one."
What is really strange because the first test created a platform but the get in the second test fails.
I'm not interested in mocking the router because I will need to rely on the router functions for further tests.