如何模拟 RouterStateSnapshot 以进行 Router Guard Jasmine 测试

问题描述

我有一个简单的路由器防护，我正在尝试测试 canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ).我可以像这样创建 ActivatedRouteSnapshot new ActivatedRouteSnapshot() 但我不知道如何创建一个模拟的 RouterStateSnapshot.

根据我尝试的代码...

让 createEmptyStateSnapshot = function(urlTree: UrlTree, rootComponent: Type){const emptyParams = {};const emptyData = {};const emptyQueryParams = {};const 片段 = '';const 激活 = 新的 ActivatedRouteSnapshot();const state = new RouterStateSnapshot(new TreeNode(activated, []));返回 {状态:状态，激活:激活}}

但是 import {TreeNode} from "@angular/router/src/utils/tree"; 似乎需要转译什么的，因为我得到...

未捕获的语法错误:意外的令牌导出在 webpack:///~/@angular/router/src/utils/tree.js:8:0 <- test.bundle.ts:72431

解决方案

我的做法略有不同，但应该对你有用:

...let mockSnapshot:any = jasmine.createSpyObj("RouterStateSnapshot", ['toString']);@成分({模板:'<路由器插座></路由器插座>'})类路由组件{}@成分({模板: ''})类 DummyComponent { }描述('测试守卫'，()=> {beforeEach(() => TestBed.configureTestingModule({进口:[RouterTestingModule.withRoutes([{path: 'route1', 组件: DummyComponent},{path: 'route2', 组件: DummyComponent},...])],声明: [DummyComponent, RoutingComponent],供应商: [警卫班，{提供:RouterStateSnapshot，useValue:mockSnapshot}]}).compileComponents());it('无论出于何种原因，都不应该让用户越过守卫',注入([GuardClass]，(后卫:GuardClass)=> {让夹具 = TestBed.createComponent(RoutingComponent);期望(guard.canActivate(new ActivatedRouteSnapshot(), mockSnapshot)).toBe(false);})...

I have a simple router guard and I am trying to test the canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ). I can create the ActivatedRouteSnapshot like this new ActivatedRouteSnapshot() but I cannot figure out how to create a mocked RouterStateSnapshot.

Per the code I tried...

let createEmptyStateSnapshot = function(
    urlTree: UrlTree, rootComponent: Type<any>){
    const emptyParams = {};
    const emptyData = {};
    const emptyQueryParams = {};
    const fragment = '';
    const activated = new ActivatedRouteSnapshot();
    const state = new RouterStateSnapshot(new TreeNode<ActivatedRouteSnapshot>(activated, []));
    return {
        state: state,
        activated: activated
    }
}

But import {TreeNode} from "@angular/router/src/utils/tree"; seems to need to be transpiled or something because I get...

解决方案

I managed to do it slightly differently but it should work for you :

...

let mockSnapshot:any = jasmine.createSpyObj<RouterStateSnapshot>("RouterStateSnapshot", ['toString']);

@Component({
  template: '<router-outlet></router-outlet>'
})
class RoutingComponent { }

@Component({
  template: ''
})
class DummyComponent { }

describe('Testing guard', () => {
  beforeEach(() => TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes([
        {path: 'route1', component: DummyComponent},
        {path: 'route2', component: DummyComponent},
        ...
      ])
  ],
  declarations: [DummyComponent, RoutingComponent],
  providers: [
    GuardClass,
    {provide: RouterStateSnapshot, useValue: mockSnapshot}
  ]
}).compileComponents());

  it('should not allow user to overcome the guard for whatever reasons',
    inject([GuardClass], (guard:GuardClass) => {
      let fixture = TestBed.createComponent(RoutingComponent);
      expect(guard.canActivate(new ActivatedRouteSnapshot(), mockSnapshot)).toBe(false);
  })
 ...

这篇关于如何模拟 RouterStateSnapshot 以进行 Router Guard Jasmine 测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！