unit testing - ¿Cómo realizar una prueba unitaria del método CanActivar guard de angular2 con Jasmine?

unit-testing angular2-guards

Question

Lo siento por hacer este tipo de pregunta. Pero no puedo encontrar ningún blog o tutoriales de youtube sobre cómo escribir las pruebas de archivos de protección canActivate. Tampoco en la documentación oficial hay nada mencionado.

Cualquier ayuda será muy apreciada.

Answer 1

Esta pregunta es bastante antigua, pero como estaba tratando de encontrar una documentación detallada de las pruebas de unidad en este momento, solo quería poner mi enfoque aquí. En general, si hay dependencias en mi guardia / servicio / componente / lo que sea, creo que todas deberían ser burladas y no deberían usarse los servicios reales. Como estos servicios no son lo que queremos probar en nuestra prueba de unidad para el guardia, solo queremos probar al guardia. Así que aquí hay un ejemplo genérico de cómo lo haría para un guardia que devuelve un observable:

import { MyGuard } from ''./path/to/your/guard'';
import { TestBed } from ''@angular/core/testing'';
import { finalize } from ''rxjs/operators'';

describe(''MyGuard Test'', () => {
    const createMockRoute = (id: string) => {
    return {
      params: { id: id }
    } as any;
  };

  const createMockRouteState = () => null;
  let guard: MyGuard;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        MyGuard,
      ]
    });

    guard = TestBed.get(MyGuard);
  });

  it(''should not be able to activate invalid route'', done => {
    const route = createMockRoute(null);
    const state = createMockRouteState();
    const res$ = guard.canActivate(route, state);
    res$.pipe(finalize(done)).subscribe(res => expect(res).toBeFalsy());
  });
});

y esto es lo que haría en su caso específico (debería funcionar con angular 6, canActivate también debería tomar 2 parámetros):

import { LoggedInGuard } from ''./loggedin.guard'';
import { TestBed } from ''@angular/core/testing'';
import { Router } from ''@angular/router'';
import { StorageService } from ''../storage.service'';

describe(''LoggedInGuard'', () => {
  let guard: LoggedInGuard;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        LoggedInGuard,
        { provide: Router, useClass: { navigate: () => null } },
        { provide: StorageService, useClass: { } }
      ]
    });

    guard = TestBed.get(LoggedInGuard);
  });

  it(''should not be able to activate when logged out'', () => {
    const storageService = TestBed.get(StorageService);
    storageService.isLoggedIn = false;
    const res = guard.canActivate(null, null);
    expect(res).toBeFalsy();
  });

  it(''should be able to activate when logged in'', () => {
    const storageService = TestBed.get(StorageService);
    storageService.isLoggedIn = true;
    const res = guard.canActivate(null, null);
    expect(res).toBeTruthy();
  });
});

Answer 2

ya que nadie respondió a mi pregunta, así que estoy pegando mi fragmento de código para que la referencia ayude a las personas que podrían tener esta situación.

sampleLoggedIn.guard.ts

import {Injectable} from ''@angular/core'';
import {Router, CanActivate} from ''@angular/router'';
import {StorageService} from ''../storage.service'';

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(private router: Router, private storageService: StorageService) {
    }

    /**Overriding canActivate to guard routes
     *
     * This method returns true if the user is not logged in
     * @returns {boolean}
     */
    canActivate() {
        if (this.storageService.isLoggedIn) {
            return true;
        } else {
            this.router.navigate([''home'']);
            return false;
        }
    }
}

sampleLoggedIn.guard.spec.ts

import {TestBed, async} from ''@angular/core/testing'';
import {FormsModule} from ''@angular/forms'';
import {HttpModule} from ''@angular/http'';
import {CommonModule} from ''@angular/common'';
import ''rxjs/Rx'';
import ''rxjs/add/observable/throw'';
import {Router} from ''@angular/router'';
import ''rxjs/add/operator/map'';
import {LoggedInGuard} from ''./loggedin.guard'';
import {StorageService} from ''../storage.service'';
import {CookieService} from ''angular2-cookie/core'';

describe(''Logged in guard should'', () => {
    let loggedInGuard: LoggedInGuard;
    let storageService: StorageService;
    let router = {
        navigate: jasmine.createSpy(''navigate'')
    };

    // async beforeEach
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule, CommonModule, HttpModule],
            providers: [LoggedInGuard, StorageService, CookieService,
                {provide: Router, useValue: router}
            ]
        })
            .compileComponents(); // compile template and css
    }));

    // synchronous beforeEach
    beforeEach(() => {
        loggedInGuard = TestBed.get(LoggedInGuard);
        storageService = TestBed.get(StorageService);
    });

    it(''be able to hit route when user is logged in'', () => {
        storageService.isLoggedIn = true;
        expect(loggedInGuard.canActivate()).toBe(true);
    });

    it(''not be able to hit route when user is not logged in'', () => {
        storageService.isLoggedIn = false;
        expect(loggedInGuard.canActivate()).toBe(false);
    });
});