How to test Location in angular 2 with karma+jasmine

Question

Angular 2 v.2.0.0 - TS + karma + jasmine.

I test this function - back on click to previously page:

 public isClick: boolean = false;

 public backClicked(location: Location): void {
        if (!this.isClick) {
            this.isClick = true;
            this.location.back();
        }
    }

And this is my test:

describe("NavBarComponent", () => {
    describe("function backClicked(): void", () => {
        let testNavBarComponent: NavBarComponent;
        let loc: Location;
        beforeEach(() => {
            testNavBarComponent = new NavBarComponent(null);
        });
        loc = jasmine.createSpyObj("Location", ["back"]);
        it ("It is backClicked() function test", () => {
            testNavBarComponent.backClicked(loc);
            expect(loc.back).toHaveBeenCalledTimes(1);
        });
    });
});

After i run the test, i've got this error: TypeError: Cannot read property 'back' of null. Maybe problem with createSpyObj, or somethig else?

Answer 1

In the backClicked function, you're calling the class instance of location this.location rather than the instance of location passed to the function location. I'm assuming that your NavBarComponent has Location injected due to the error message (by default, things are undefined rather than null).

You could do something like the following:

beforeEach(() => {
    // Mock the location here instead, then pass to the NavBarComponent
    loc = jasmine.createSpyObj("Location", ["back"]);
    testNavBarComponent = new NavBarComponent(loc);
});

---

Alternatively, I've had good luck using Angular's ReflectiveInjector class. The documentation and articles available for mocking dependencies for tests in Angular 2 is all over the board from having so many iterations of the RC, so I'm not 100% sure this is considered a best practice:

import { ReflectiveInjector } from '@angular/core';
import { Location } from '@angular/common';

describe("NavBarComponent", () => {
    describe("function backClicked(): void", () => {
        let testNavBarComponent: NavBarComponent;
        let loc: Location;

        beforeEach(() => {
            let injector = ReflectiveInjector.resolveAndCreate([
                LocationStrategy,
                Location
            ]);

            // Get the created object from the injector
            loc = injector.get(Location);

            // Create the spy.  Optionally: .and.callFake(implementation)
            spyOn(loc, 'back');

            // Create NavBarComponent with the spied Location
            testNavBarComponent = new NavBarComponent(loc);
        });

        it ("It is backClicked() function test", () => {
            testNavBarComponent.backClicked(loc);
            expect(loc.back).toHaveBeenCalledTimes(1);
        });
    });
});

Edit: This can and should be accomplished using the TestBed.configureTestingModule now: https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html

Using the ReflectiveInjector, you can also declare your dependencies in the same way you do in app.module. For example, mocking the Http service:

let injector = ReflectiveInjector.resolveAndCreate([
    MockBackend
    BaseRequestOptions,
    {
        provide: Http,
        useFactory: (backend, options) => {
            return new Http(backend, options);
        },
        deps: [MockBackend, BaseRequestOptions]
    }
]);