Unit testing in angular2, dependency injection

Question

Starting out with angular 2 after spending time with angular 1. Not having unit tested this much as it's more of a side project thing, I'm trying at least start out OK... I started with the example from AngularClass if that makes a difference.

Struggling in app.component.ts already, which contains my navigation bits. Relevant bits of the template here:

<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <div class="nav navbar-nav">
      <a class="navbar-brand" [routerLink]=" ['./'] ">Navbar</a>
      <loading class="nav-item nav-link pull-xs-right" [visible]="user === null"></loading>
  </div>
</div>
</nav>

<div class="container">
  <main>
    <router-outlet></router-outlet>
</main>
</div>

<footer>
  <hr>
  <div class="container">

</div>
</footer>

Component itself does not contain much:

import { Component, ViewEncapsulation } from '@angular/core';
import { AuthService } from './_services';
import { User } from './_models';
import { Loading } from './_components';

@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    template: require('./app.component.html'),
    styles: [
        require('./app.style.css')
    ]
})
export class App {
    user: User;

    constructor(private auth: AuthService) {

    }

    ngOnInit() {
        this.auth.getUser().subscribe(user =>  this.user = user);
    }
}

All modules, components and routes are bootstrapped through the App module. Can post if required.

The test I'm having to write for it has me hooking up basically everything from the router (so it seems). First, [routerLink] is not a native attribute of 'a'. Ok, I fix it. Then:

Error in ./App class App - inline template:3:6 caused by: No provider for Router!

So, I hook up router, only to find:

Error in ./App class App - inline template:3:6 caused by: No provider for ActivatedRoute!

Which I added, to find out that:

Error in ./App class App - inline template:3:6 caused by: No provider for LocationStrategy!

By now, the test looks like:

import { inject, TestBed, async } from '@angular/core/testing';
import { AuthService } from './_services';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
import { AppModule } from './app.module';

// Load the implementations that should be tested
import { App } from './app.component';
import { Loading } from './_components';

describe('App', () => {
    // provide our implementations or mocks to the dependency injector
    beforeEach(() => TestBed.configureTestingModule({
        declarations: [App, Loading],
        imports: [RouterModule],
        providers: [
            {
                provide: Router,
                useClass: class {
                    navigate = jasmine.createSpy("navigate");
                }
            }, {
                provide: AuthService,
                useClass: class {
                    getAccount = jasmine.createSpy("getAccount");
                    isLoggedIn = jasmine.createSpy("isLoggedIn");
                }
            }, {
                provide: ActivatedRoute,
                useClass: class { }
            }
        ]
    }));

    it('should exist', async(() => {

        TestBed.compileComponents().then(() => {
            const fixture = TestBed.createComponent(App);

            // Access the dependency injected component instance
            const controller = fixture.componentInstance;

            expect(!!controller).toBe(true);
        });
    }));
});

I'm already mocking the inputs, this seems wrong to me. Am I missing something? Is there a smarter way of loading the whole app on a test, instead of bolting in every single dependency, all the time?

Louis · Accepted Answer · 2017-11-01 20:19:30Z

14

For testing, you should use the RouterTestingModule instead of the RouterModule. If you want to add routes you can use withRoutes

imports: [
  RouterTestingModule.withRoutes(Routes) // same any normal route config
]

See Also

Angular 2 unit testing components with routerLink
Second half of this post for an idea of mock the ActivatedRoute. Sometimes you don't want the whole routing facility when unit testing. You can just mock the route.

edited Nov 1, 2017 at 20:19

Louis

152k28 gold badges288 silver badges332 bronze badges

answered Sep 29, 2016 at 12:41

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

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

6 Comments

Jorg Over a year ago

Thanks, I'll read up on those. So far, changing RouterModule for RouterTestingModule has lead to: inline template:3:6 caused by: undefined is not an object (evaluating 'router.events.subscribe').

Jorg Over a year ago

Nevermind, me behind stupid. Thanks, your solution works :)

Paul Samsotha Over a year ago

My guess is that you are still using the mock Router instead of using the real one

Jorg Over a year ago

Correct. I removed it all together.

forgottofly Over a year ago

What' defined inside (Routes) ?

|

Collectives™ on Stack Overflow

Unit testing in angular2, dependency injection

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related