Unit testing in angular2, dependency injection

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?

Recommended topics

Hot tags