如何为Router Guard Jasmine测试模拟RouterStateSnapshot [英] How do I Mock RouterStateSnapshot for a Router Guard Jasmine test

问题描述

我有一个简单的路由器防护，我正在尝试测试 canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnapshot）。我可以像这个新的ActivatedRouteSnapshot（）一样创建ActivatedRouteSnapshot，但我无法弄清楚如何创建一个模拟的 RouterStateSnapshot 。 / p>

根据我尝试的代码...

 让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，[]））; 
返回{
州：州，
已激活：已激活
} 
} 
  

但是来自@ angular / router / src / utils / tree的 import {TreeNode}; 似乎需要进行转换或者某事因为我得到...

未捕获的SyntaxError：在webpack：///~ / @ angular / router中出现意外的令牌
/src/utils/tree.js:8:0< - test.bundle.ts:72431

解决方案

我设法做的略有不同，但它应该适合你：

  ... 
 
 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}， 
 {路径：'route2'，组件：DummyComponent}，
 ... 
]）
]，
声明：[DummyComponent，RoutingComponent]，
提供者：[
 GuardClass，
 {提供：RouterStateSnapshot，useValue：mockSnapshot} 
] 
}）。compileComponents（））; 
 
 it（ '不应该让用户因为某种原因克服防守'，
 inject（[GuardClass]，（guard：GuardClass）=> {
 let fixture = TestBed.createComponent（RoutingComponent）; 
期待（guard.can激活（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...

Uncaught SyntaxError: Unexpected token export at webpack:///~/@angular/router/src/utils/tree.js:8:0 <- test.bundle.ts:72431

解决方案

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);
  })
 ...

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