Skip to content

Instantly share code, notes, and snippets.

@mafo5
Last active August 10, 2016 11:18
Show Gist options
  • Save mafo5/bfce5c83d0c7e9953b1c632f1759bc84 to your computer and use it in GitHub Desktop.
Save mafo5/bfce5c83d0c7e9953b1c632f1759bc84 to your computer and use it in GitHub Desktop.
Testing router functionality of a component
/* 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!');
}));
});
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;
});
}
}
@mafo5
Copy link
Author

mafo5 commented Aug 10, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment