失败：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“登录”。 茉莉花＆角6

Question

Community I just starting to play with unit testing and I have set up an Angular 6 project with Jasmine & karma for unit testings.

for some weird reason, I get this error when i RUN ng test Jasmine opens new browser window on 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'

I am on the grid-page.component.ts where I don't have any route that redirects to login page expect the authentication service that checks if the user is logged in and if the user token has expired and only then I redirect to the login page. That's the only possible solution I can find can someone explain to me what I can do solve this.

One more thing I want to ask you guys is if I need to make any test for the app-routing.module.ts because I don't test any routes.

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


});

app-routing.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

You are trying to pass value in url like

http://localhost:9876/?id=34428211

and your default ulr is

{ path: '',                     redirectTo: 'dashboard', pathMatch: 'full', canActivate: [AuthGuard] },

you applied the canActivate: [AuthGuard] ANgular Auth gard for it so request goes find the nest route. and there is no any route like your request ?id=34428211

please try this code
Your route like this

{ path: 'login:id',                component: LoginComponent },

url like this

http://localhost:9876/login/34428211