如何為authguard單元測試canActivate of Angular？

Question

如何為auth guard執行單元測試？

我不知道如何開始，有人可以幫助我嗎？

這是我的authguard.component：

import { Injectable } from '@angular/core';
import {
  Router,
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from '@angular/router';

import { LoginService } from '../services/login/login.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private loginService: LoginService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const currentUser = this.loginService.currentUserValue;
    if (currentUser) {
      // Authorized so return true
      return !0;
    }

    // not authorized so redirect to signin page with the return url
    this.router.navigate(['/login'], {
      queryParams: { returnUrl: state.url }
    });
    return !1;
  }
}

Answer 1

您需要為路由器和LoginService進行模擬。

測試可能如下所示：

describe('LoginService', () => {
let navigateMock;
let loginService: LoginService;

beforeEach(() => {
    navigateMock = jest.fn();
    const RouterMock: Mock<Router> = jest.fn(() => (<Router> {
         navigate: navigateMock,
    }));
    // ...some more mocks
}

it('should redirect without error', (done: DoneCallback) => {
     // mock the login method, e.g. 
    loginServiceMock.loadDocumentAndLogin = jest.fn(() => Promise.reject({} as OAuthErrorEvent)); // if you use OAuth

     // call loginService.canActivate and expect the behaviour of the navigator    
     loginService.canActivate().subscribe(f => f, () => {
          expect(navigateMock).toBeCalledWith(['loginerror'], {
          queryParams: {
               code: '',
               description: ''
          }
          });
          done();
          });
     });

...