Angular 2: Testing components with router

Question

I am writing the simplest component that is using a routeLink:

@Component({
    selector: 'memorySnippet',
    templateUrl: '<div class="memory-snippet-wrapper" *ngIf="memory" 
                  [routerLink]="['MainPanel', 'MemoryPanel', {'id' : this.memory.id}]">',
    directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class MemorySnippetComponent {
    @Input() memory: Memory;
}

The problem occurs when I try testing this component. The moment I add the router link Karma is complaining about missing providers:

After adding all the providers Karma is asking I get this:

beforeEachProviders(() => [
    MemorySnippetComponent,
    MEMORY_SERVICE_PROVIDERS,
    ROUTER_PROVIDERS,
    ApplicationRef
]);

But when I run the test I get this error:

EXCEPTION: EXCEPTION: Error during instantiation of Token RouterPrimaryComponent! (RouterLink -> Router -> RouteRegistry -> Token RouterPrimaryComponent).

ORIGINAL EXCEPTION: unimplemented

ORIGINAL STACKTRACE: Error: unimplemented

What am I doing wrong??? Is Angular 2 (2.0.0-beta.1) just not ready for testing components with router directives?

That would be my interpretation of this error. It is still in beta, and testing guides haven't been released for this kind of testing. Perhaps you could find the RouterPrimaryComponent in the source and implement the interface then use provide(RouterPrimaryComponent, {useClass: MyRouterPrimaryComponent}) to override it and perhaps get your testing working. — SnareChops
– SnareChops, Commented Feb 1, 2016 at 20:42
check the repo with the testing seed from the Angular team -> github.com/juliemr/ng2-test-seed its from this talk youtube.com/watch?v=C0F2E-PRm44 — Angular University
– Angular University, Commented Feb 1, 2016 at 21:08
Doesn't that syntax need a return? `beforeEachProviders(() => { return [ MemorySnippetComponent, MEMORY_SERVICE_PROVIDERS, ROUTER_PROVIDERS, ApplicationRef ]}); — Todd W Crone
– Todd W Crone, Commented Feb 1, 2016 at 21:32

Sebas · Accepted Answer · 2016-12-13 17:08:50Z

9

You should have a beforeEachProviders method looking like:

import {MockApplicationRef} from '@angular/core/testing';

beforeEachProviders(() => [
  ROUTER_PROVIDERS,
  provide(APP_BASE_HREF, {useValue: '/'}),
  provide(ROUTER_PRIMARY_COMPONENT, {useValue: YourComponent}),
  provide(ApplicationRef, {useClass: MockApplicationRef}
]);

MockApplicationRef is provided by the framework for this kind of tests.

edited Dec 13, 2016 at 17:08

Sebas

21.6k9 gold badges60 silver badges109 bronze badges

answered Feb 1, 2016 at 22:04

cexbrayat

18.5k4 gold badges30 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tomer Almog Over a year ago

Thank you @cexbrayat, that worked! can you please point to the source of such documentation?

cexbrayat Over a year ago

That's a unit test from my ebook ^^ books.ninja-squad.com. But I think I found it in the framework source code AFAIR.

abhinavmsra Over a year ago

@TomerAlmog I am getting similar issue. Can you share the code how you fixed it?

Tomer Almog Over a year ago

The code above did fix it. I used another source when I had to test components with router dependencies. I found it in ngBook2 where they show how to create a mockRouter. it is very long, but if you need I will share it here.

danday74 · Accepted Answer · 2016-07-16 03:20:18Z

5

For RC4 with new router now use ...

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

A github project using this approach is ...

https://github.com/danday74/angular2-coverage

answered Jul 16, 2016 at 3:20

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Collectives™ on Stack Overflow

Angular 2: Testing components with router

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related