NgMocks: 无法为canActivate守卫编写测试

huangapple
go评论121阅读模式
英文:

NgMocks: cannot write test for canActivate guard

问题

我正在实现一个简单的canActivate守卫的测试。请看下面的代码：

  1. // 守卫
  2. export const hasGraphResultsCanActiveGuard: CanActivateFn = (
  3.   route: ActivatedRouteSnapshot,
  4.   routerState: RouterStateSnapshot
  5. ) => {
  6.   return inject(Store)
  7.     .select(selectGraphResults)
  8.     .pipe(
  9.       map((results) => {
  10.         return results.length > 0;
  11.       }),
  12.       tap((hasResults) => {
  13.         if (!hasResults) {
  14.           inject(Router).navigate(['/app/map']);
  15.         }
  16.       })
  17.     );
  18. };
  20. // 模块中使用的路由
  21. const routes: Routes = [
  22.   {
  23.     path: 'analysis',
  24.     component: AnalysisComponent,
  25.     canActivate: [hasGraphResultsCanActiveGuard],
  26.   },
  27.   {
  28.     path: '**',
  29.     pathMatch: 'full',
  30.     redirectTo: 'analysis',
  31.   },
  32. ];
  34. // 测试
  35. describe('HasGraphResultsGuard', () => {
  36.   beforeEach(() => {
  37.     return (
  38.       MockBuilder(
  39.         [
  40.           RouterModule,
  41.           RouterTestingModule.withRoutes([]),
  42.           NG_MOCKS_ROOT_PROVIDERS,
  43.         ],
  44.         DisruptionPageModule
  45.       )
  46.         .exclude(NG_MOCKS_GUARDS)
  47.         .keep(hasGraphResultsCanActiveGuard)
  48.         .provide(
  49.           provideMockStore({
  50.             initialState: {
  51.               graph: cloneDeep(initialGraphState),
  52.             },
  53.           })
  54.         )
  55.     );
  56.   });
  58.   it('重定向到/app/map', fakeAsync(() => {
  59.     const fixture = MockRender(RouterOutlet, {});
  60.     const router = ngMocks.get(Router);
  61.     const location = ngMocks.get(Location);
  63.     // 初始化导航
  64.     if (fixture.ngZone) {
  65.       fixture.ngZone.run(() => router.initialNavigation());
  66.       tick();
  67.     }
  69.     // 初始状态没有图表结果，所以应该重定向
  70.     expect(location.path()).toEqual('/app/map');
  71.   }));
  72. });

除非我漏掉了什么，否则我认为我已经按照文档的建议完全实现了测试。以下是我收到的错误消息：

错误：MockBuilder找到了一个缺少的依赖项：hasGraphResultsCanActiveGuard。这意味着没有模块提供它。请使用“export”标志如果您想显式添加它。https://ng-mocks.sudo.eu/api/MockBuilder#export-flag

我尝试添加了导出标志，然后它说无法解析参数。

这个守卫在我的应用程序中按预期工作，但我无法在测试中正确连接事物。我是否漏掉了什么，还是文档不完整？

英文:

I'm implementing tests for a simple canActivate guard. See below:

  1. // guard
  2. export const hasGraphResultsCanActiveGuard: CanActivateFn = (
  3.   route: ActivatedRouteSnapshot,
  4.   routerState: RouterStateSnapshot
  5. ) => {
  6.   return inject(Store)
  7.     .select(selectGraphResults)
  8.     .pipe(
  9.       map((results) => {
  10.         return results.length > 0;
  11.       }),
  12.       tap((hasResults) => {
  13.         if (!hasResults) {
  14.           inject(Router).navigate(['/app/map']);
  15.         }
  16.       })
  17.     );
  18. };
  20. // routes in the module where its used
  21. const routes: Routes = [
  22.   {
  23.     path: 'analysis',
  24.     component: AnalysisComponent,
  25.     canActivate: [hasGraphResultsCanActiveGuard],
  26.   },
  27.   {
  28.     path: '**',
  29.     pathMatch: 'full',
  30.     redirectTo: 'analysis',
  31.   },
  32. ];
  34. // Test
  35. describe('HasGraphResultsGuard', () => {
  36.   beforeEach(() => {
  37.     return (
  38.       MockBuilder(
  39.         [
  40.           RouterModule,
  41.           RouterTestingModule.withRoutes([]),
  42.           NG_MOCKS_ROOT_PROVIDERS,
  43.         ],
  44.         DisruptionPageModule
  45.       )
  46.         .exclude(NG_MOCKS_GUARDS)
  47.         .keep(hasGraphResultsCanActiveGuard)
  48.         .provide(
  49.           provideMockStore({
  50.             initialState: {
  51.               graph: cloneDeep(initialGraphState),
  52.             },
  53.           })
  54.         )
  55.     );
  56.   });
  58.   it('Redirects to /app/map', fakeAsync(() => {
  59.     const fixture = MockRender(RouterOutlet, {});
  60.     const router = ngMocks.get(Router);
  61.     const location = ngMocks.get(Location);
  63.     // Initialize navigation
  64.     if (fixture.ngZone) {
  65.       fixture.ngZone.run(() => router.initialNavigation());
  66.       tick();
  67.     }
  69.     // The initial state has no graph results so it should redirect
  70.     expect(location.path()).toEqual('/app/map');
  71.   }));
  72. });

Unless I've missed something I believe I've implemented the test exactly as the docs suggest. Heres the error I get:

> Error: MockBuilder has found a missing dependency: hasGraphResultsCanActiveGuard. It means no module provides it. Please, use the "export" flag if you want to add it explicitly. https://ng-mocks.sudo.eu/api/MockBuilder#export-flag

I've tried adding the export flag and then it says it cant resolve the parameters.

The guard works as intended in my app but I cant connect things correctly in the test. Am I missing something or are the docs incomplete?

答案1

得分: 1

我认为ng-mocks更新到14.11.0解决了相同的问题。

英文:

had the same issue, i think a ng-mocks update to 14.11.0 solved it

huangapple
  • 本文由 发表于 2023年6月29日 00:33:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76575118.html
  • angular
  • mocking
  • ng-mocks
  • testing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定