Angular 13 如何在 Auth 保护中模拟 ActivatedRouteSnapshot

Question

您好，我在 Angular 13 项目中工作并将数据传递给我的 authGuard，这是我的代码：

 @Injectable()
    export class AuthGuard implements CanActivate {
      constructor(
        private route: Router,
        private userService: UserService) { }
    
      canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot,
      ): Observable<boolean> | Promise<boolean> | boolean {
    
//here im getting the roles i passed in the route module 
        let roles = route.data['roles'] as Array<string>;
    
        if (this.userService.hasRoles(roles)) {
          return true;
        }
    
        this.route.navigate(['']);
        return false;
    
      }
    }

这就是我如何在路由模块中保护我的组件：

{
    path: '', component: MyComponent,
    canActivate: [AuthGuard],
    data: {
        roles: ['ROLE_ONE','ROLE_TWO']
    }
}

这是我的单元测试：

fdescribe('AuthGuard Test', () => {
  let injector: TestBed;
  let userService: UserService;
  let guard: AuthGuard;
  let routeMock: any = { snapshot: {} };
  let routeStateMock: any = { snapshot: {}, url: '' };
  let routerMock = { navigate: jasmine.createSpy('navigate') }

  let activatedRouteSnapshotMock: ActivatedRouteSnapshot;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        AuthGuard,
        { provide: Router, useValue: routerMock },
        UserService,
        HttpClientModule
      ],
      imports: [
        RouterTestingModule,
        HttpClientTestingModule
      ]
    });
    injector = getTestBed();
    userService = injector.inject(UserService);
    guard = injector.inject(AuthGuard);

  });

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

it('#Should return false and redirect to home Page', () => {
    expect(guard.canActivate(routeStateMock, routeStateMock)).toEqual(false);
  });

当我运行我的测试时，我收到以下错误： TypeError: Cannot read properties of undefined (reading 'roles')

我如何模拟我的 ActivatedRouteSnapshot 中的数据属性并将值设置为我的角色属性？

提前致谢。

Answer 1

由于您从测试中调用方法guard.canActivate 。 您可以根据需要模拟routeMock 。 就像它也应该包含data对象一样。

let routeMock: any = { 
  snapshot: {
    data: {
        roles: ['ROLE_ONE','ROLE_TWO']
    }
  } 
};