Jest如何測試Angular的路由守衛

要使用Jest測試Angular的路由守衛，你需要遵循以下步驟：

1. 安裝必要的依賴項：確保已經安裝了@angular/core, @angular/router, jest, @types/jest, 和 ts-jest。

2. 創建一個路由守衛：首先，你需要創建一個路由守衛。例如，我們將創建一個名為AuthGuard的守衛。在你的Angular項目中，運行以下命令：

ng generate guard auth

3. 實現路由守衛：打開auth.guard.ts文件并實現你的守衛邏輯。例如：

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

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

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const isLoggedIn = // ... your logic to check if the user is logged in

    if (isLoggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

4. 配置Jest：在項目根目錄下創建或修改jest.config.js文件，添加以下內容：

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage'
};

5. 創建Jest設置文件：在項目根目錄下創建一個名為setup-jest.ts的文件，并添加以下內容：

import 'jest-preset-angular/setup-jest';

6. 編寫測試用例：在auth.guard.spec.ts文件中編寫針對AuthGuard的測試用例。例如：

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthGuard } from './auth.guard';
import { Router } from '@angular/router';

describe('AuthGuard', () => {
  let guard: AuthGuard;
  let router: Router;

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

    guard = TestBed.inject(AuthGuard);
    router = TestBed.inject(Router);
  });

  it('should be created', () => {
    expect(guard).toBeTruthy();
  });

  it('should return true if the user is logged in', () => {
    // Arrange
    const isLoggedIn = true;

    // Act
    const result = guard.canActivate(null, null);

    // Assert
    expect(result).toBeTrue();
  });

  it('should redirect to /login if the user is not logged in', () => {
    // Arrange
    const isLoggedIn = false;
    const navigateSpy = jest.spyOn(router, 'navigate');

    // Act
    const result = guard.canActivate(null, null);

    // Assert
    expect(result).toBeFalse();
    expect(navigateSpy).toHaveBeenCalledWith(['/login']);
  });
});

7. 運行測試：在終端中運行以下命令來執行測試：

ng test

或者，如果你只想運行與AuthGuard相關的測試，可以使用以下命令：

ng test --include='**/auth.guard.spec.ts'

這樣，你就可以使用Jest測試Angular的路由守衛了。請注意，這里的示例代碼可能需要根據你的實際項目進行調整。