我在angular 4.0.0应用程序下进行单元测试,我的真实组件中的一些方法通过以下方式调用手动路由:

method(){
....
    this.navigateTo('/home/advisor');
....
}

with navigateTo是一个自定义路由方法,它调用:

  public navigateTo(url: string) {
    this.oldUrl = this.router.url;
    this.router.navigate([url], { skipLocationChange: true });
  }

我有这个路由文件:

import ...     // Components and dependencies

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      {
        path: 'registration',
        component: RegistrationComponent,
        children: [
          {
            path: 'synthese',
            component: SyntheseComponent
          },
          {
            path: 'queue',
            component: QueueComponent,
            children: [
              {
                path: 'queue-modal',
                component: QueueModalComponent
              },
              {
                path: 'confirm',
                component: ConfirmComponent
              }
            ]
          }
        ]
      },
      {
        path: 'toolbox',
        component: ToolboxComponent
      },
      {
        path: 'appointment',
        component: AppointmentRegistrationComponent
      },
      {
        path: 'appointment-validation',
        component: AppointmentValidationComponent
      },
      {
        path: 'datepicker',
        component: DatePickerComponent
      },
      {
        path: 'validation/:defaultNumber',
        component: ValidationComponent,
        children: [
                   {
                     path: 'synthese',
                     component: SyntheseComponent
                   }
                   ]
      },
      {
        path: 'modalField',
        component: ModalFieldComponent
      },
      {
        path: 'search',
        component: SearchComponent
      },
      {
        path: 'advanced-search',
        component: AdvancedSearchComponent
      },
      {
        path: 'tools',
        component: ToolsComponent
      },
      {
        path: 'advisor',
        component: AdvisorComponent
      },
      {
        path: 'pilote',
        component: PilotComponent
      },
      {
          path: 'blank',
          component: BlankComponent
        },
      {
        path: 'view-360/:id',
        component: View360Component,
        children: [
          {
            path: 'client',
            component: ClientComponent
          },
          {
            path: 'tools',
            component: ToolsAdvisorComponent
          },
          {
            path: 'valid-close',
            component: ValidCloseComponent
          },
          {
            path: 'application',
            component: ApplicationView360Component
          }
        ],
        canActivate: [AuthGuardAdviser]
      },
      {
        path: 'view-360',
        component: View360Component,
        children: [
          {
            path: 'client',
            component: ClientComponent
          }
        ],
        canActivate: [AuthGuardAdviser]
      },
      {
        path: 'contract',
        component: ContractComponent
      },
      {
        path: 'queue-again',
        component: QueueAgainComponent
      },
      {
        path: 'stock',
        component: StockComponent,
        children: [
          {
            path: 'mobile',
            component: MobileComponent
          },
          {
            path: 'stock-level',
            component: StockLevelComponent
          }
        ]
      },
      {
        path: 'usefull-number',
        component: UsefullNumberComponent
      },
      {
        path: 'admin',
        loadChildren: 'app/home/admin/admin.module#AdminModule',
        //           component: AdminComponent,
        canActivate: [AuthGuardAdmin]
      },
      {
        path: 'rb',
        loadChildren: 'app/home/rb/rb.module#RbModule',
        //        component: RbComponent
        //        canActivate: [AuthGuardAdmin]
      },
      {
        path: 'tools-advisor',
        component: ToolsAdvisorComponent
      },
      {
        path: 'catalog/:haveClient',
        component: CatalogComponent
      },
      {
        path: 'application',
        component: ApplicationComponent
      },
    ]
  },

   ];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class HomeRoutingModule { }

奇怪的是,即使我的应用程序也运行良好,但测试抛出了以下错误:

失败:未捕获(promise 中):错误:无法匹配任何路由.统一资源定位地址

我好像缺少一些配置.

Any ideas ??

推荐答案

以下是我的 comments :

当你想对路由进行单元测试时,你必须使用测试模块,而不是实际的模块.

import { RouterTestingModule } from '@angular/router/testing';

然后,在你的试验台上

imports: [RouterTestingModule]

现在,您应该能够对组件进行单元测试了

EDIT

要监视你的路由,你必须做的是

spyOn(component.router, 'navigate').and.returnValue(true);

你期望的是

expect(component.router.navigate).toHaveBeenCalledWith('/home/advisor');

Typescript相关问答推荐

等待的R没有用响应对象展开到R

如果在TypeScript中一个原始的类方法是递归的,如何使用类decorator 模式?

替代语法/逻辑以避免TS变量被分配之前使用." "

JS Redux Devtools扩展不工作

类型{...}的TypeScript参数不能赋给类型为never的参数''

如何使用函数填充对象?

使用Dockerfile运行Vite React应用程序时访问env变量

记录键的泛型类型

如何使所有可选字段在打印脚本中都是必填字段,但不能多或少?

对于始终仅在不是对象属性时才抛出的函数,返回Never

使用泛型识别对象值类型

我可以使用typeof来强制执行某些字符串吗

将布尔值附加到每个对象特性

我不明白使用打字脚本在模板中展开参考

如何定义这样一个TypeScript泛型,遍历路由配置树并累积路径

无法缩小深度嵌套对象props 的范围

是否可以定义引用另一行中的类型参数的类型?

为什么 TypeScript 类型条件会影响其分支的结果?

如何为字符串模板文字创建类型保护

如何判断路由或其嵌套路由是否处于活动状态?