angular - 失败 : Uncaught (in promise): Error: Cannot match any routes. URL 段 : 'login' . Jasmine & Angular 6

Question

社区 我刚开始玩单元测试，我已经用 Jasmine 和 karma 建立了一个 Angular 6 项目来进行单元测试。

由于某些奇怪的原因，当我RUN ng test 时出现此错误Jasmine 在 http://localhost:9876/?id=34428211

上打开新的浏览器窗口

Failed: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'

我在 grid-page.component.ts 上，我没有任何重定向到 login page 的路由，期望验证服务检查用户是否已登录，如果用户 token 已过期，然后我才重定向到登录页面。这是我能找到的唯一可能的解决方案，有人可以向我解释我能做些什么来解决这个问题。

还有一件事我想问你们，我是否需要对 app-routing.module.ts 进行任何测试，因为我没有测试任何路由。

grid-page.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NotificationsComponent } from '../../../components/ui/notifications/notifications.component';
import { MaterialModule } from '@app-modules/material.module.ts';
import { SidenavComponent } from '../../../components/ui/sidenav/sidenav.component';
import { HeaderComponent } from '../../../components/ui/header/header.component';
import { PlotToolbarComponent } from '../../../components/ui/plot-toolbar/plot-toolbar.component';
import { GridFiltersComponent } from '../../../pages/analytics/grid-page/components/grid-filters/grid-filters.component';
import { LoaderComponent } from '../../../components/loaders/loader/loader.component';
import { CalendarGridPlotComponent } from '../../../pages/analytics/grid-page/components/calendar-grid-plot/calendar-grid-plot.component';
import { RouterTestingModule } from '@angular/router/testing';
import { DropDownMenuComponent } from '../../../components/form_controls/drop-down-menu/drop-down-menu.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { GridPageComponent } from './grid-page.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule  } from '@angular/common/http';

describe('GridPageComponent', () => {
  let component: GridPageComponent;
  let fixture: ComponentFixture<GridPageComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ MaterialModule, RouterTestingModule, ReactiveFormsModule, HttpModule, BrowserAnimationsModule, HttpClientModule ],
      declarations: [
        GridPageComponent, NotificationsComponent, SidenavComponent,
        HeaderComponent, PlotToolbarComponent, GridFiltersComponent,
        LoaderComponent, CalendarGridPlotComponent, DropDownMenuComponent
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(GridPageComponent);
    component = fixture.componentInstance;
    // fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  // ===========================================================================
  // Variable specs
  // ===========================================================================

  fit('should spinnerLoader variable to be true', () => {
    expect(component.spinnerLoader).toBeTruthy();
  });

  fit('should barLoader variable to be true', () => {
    expect(component.barLoader).toBeTruthy();
  });

  fit('should isDarkTheme variable to be true', () => {
    expect(component.isDarkTheme).toBeFalsy();
  });

  fit('should sideNavState variable to be close', () => {
    expect(component.sideNavState).toBe('close');
  });

  fit('should form variable to be undefined', () => {
    expect(component.form).toBeUndefined();
  });


});

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './guards/auth.guard';


// PAGES

// STATUS PAGES
import { LoginComponent } from './pages/login/login.component';
import { Page404Component } from './pages/status/page404/page404.component';

import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { InventoryComponent } from './pages/inventory/inventory.component';

import { LocationAnalyticsComponent } from './pages/analytics/location-analytics/location-analytics.component';
import { TimelinePageComponent } from './pages/analytics/timeline-page/timeline-page.component';
import { GridPageComponent } from './pages/analytics/grid-page/grid-page.component';
import { StoreSelectionPageComponent } from './pages/store-selection-page/store-selection-page.component';


import { SettingsComponent } from './pages/settings/settings.component';


export const routes: Routes = [

  { path: '',                     redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
  { path: 'dashboard',            component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login',                component: LoginComponent },

  { path: 'store-selection',      component: StoreSelectionPageComponent, canActivate: [AuthGuard] },
  { path: 'inventory',            component: InventoryComponent, canActivate: [AuthGuard] },

  { path: 'analytics/timeline',   component: TimelinePageComponent, canActivate: [AuthGuard] },
  { path: 'analytics/grid',       component: GridPageComponent, canActivate: [AuthGuard] },
  { path: 'analytics/location',   component: LocationAnalyticsComponent, canActivate: [AuthGuard] },

  { path: 'settings',             component: SettingsComponent, canActivate: [AuthGuard] },

  { path: '**',                   component: Page404Component }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您可以尝试将路由添加到您的 RouterTestingModule。就像这样:

RouterTestingModule.withRoutes([{ path: 'yourPath', component: YourComponent }])