Angular 4: test if window.location.href has been called

Question

I have an AuthGuard service responsible for detecting if a user is logged in. If not logged in, I redirect the user to our oauth provider url.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

import { environment } from './../../environments/environment';
import { Session } from './../core/security/session.service';

@Injectable()
export class AuthGuard implements CanActivate {
  /**
   * Class constructor.
   * @constructor
   *
   * @param {Session} - Instance of session.
   */
  constructor(private session: Session) {}

  /**
   * Method to implements from CanActivate interface.
   * Check if a user is authenticated.
   *
   * @return {boolean}
   */
  canActivate(): boolean {
    if (this.session.isActive()) {
      return true;
    }

    this.redirectToProvider();
    return false;
  }

  /**
   * Redirect to Identity unauthorized url.
   */
  private redirectToProvider() {
    const unauthorizeUrl = environment.api.identity.unauthorizeUrl;
    window.location.href = unauthorizeUrl;
  }
}

I would like to know if window.location.href has been called when a Session does not exists. Here is what I did so far:

import { TestBed, async, inject } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { AuthGuard } from './auth-guard.service';
import { Session } from './../core/security/session.service';

describe('AuthGuard', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        AuthGuard,
        Session
      ],
      imports: [RouterTestingModule]
    });
  });

  describe('.canActivate', () => {
    describe('active session', () => {
      it('returns true',
        async(inject([AuthGuard, Session], (guard, session) => {
          session.set({ name: 'user' });

          expect(guard.canActivate()).toBeTruthy();
        })
      ));
    });

    describe('no session', () => {
      it('redirects the user',
        async(inject([AuthGuard, Session], (guard, session) => {
          spyOn(window.location, 'href');
          session.destroy();

          expect(guard.canActivate()).toBeFalsy();
          expect(window.location.href).toHaveBeenCalled();
        })
      ));
    });
  })
});

but it gives me the following error:

Failed: <spyOn> : href is not declared writable or has no setter

Is there a way to mock the window object to achieve this or do I need to rely on some special class to handle such redirection so I can inject them in test?

Answer 1

You can inject window as an injection token. Angular also has a DOCUMENT DI token in @angular/common that you can directly use with document.location.href.

import { InjectionToken } from '@angular/core';

export const WindowToken = new InjectionToken('Window');
export function windowProvider() { return window; }

Add it in app.module.ts:

providers: [
    ...
    { provide: WindowToken, useFactory: windowProvider }
  ]

And inject it in the service:

constructor(@Inject(WindowToken) private window: Window, private session: Session)

In your spec file, mock the window object and test it. I've created a working example with two test services (one dependent on the other). The service is created with Angular's Static Injector:

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

import { CustomHrefService } from './custom-href.service';
import {AppModule} from '../app.module';
import {WindowToken} from './window';
import {Injector} from '@angular/core';
import {CustomHref2Service} from './custom-href-2.service';

const MockWindow = {
  location: {
    _href: '',
    set href(url: string) {
      this._href = url;
    },
    get href() {
      return this._href;
    }
  }
};

describe('CustomHrefService', () => {
  let service: CustomHrefService;
  let setHrefSpy: jasmine.Spy;

  beforeEach(() => {
    setHrefSpy = spyOnProperty(MockWindow.location, 'href', 'set');

    const injector = Injector.create({
      providers: [
        { provide: CustomHrefService, useClass: CustomHrefService, deps: [WindowToken, CustomHref2Service]},
        { provide: CustomHref2Service, useClass: CustomHref2Service, deps: []},
        { provide: WindowToken, useValue: MockWindow}
      ]
    });
    service = injector.get(CustomHrefService);
  });

  it('should be registered on the AppModule', () => {
    service = TestBed.configureTestingModule({ imports: [AppModule] }).get(CustomHrefService);
    expect(service).toEqual(jasmine.any(CustomHrefService));
  });

  describe('#jumpTo', () => {
    it('should modify window.location.href', () => {
      const url = 'http://www.google.com';
      service.jumpTo(url);
      expect(setHrefSpy).toHaveBeenCalledWith(url);
    });
  });
});