बिना क्रिया वादा अस्वीकृति: किसी भी मार्गों से मेल नहीं कर सकते हैं

Question

जब मैं इस इकाई परीक्षण चलाने:

it('can click profile link in template',() => { 
    const landingPageLinkDe = linkDes[0]; 
    const profileLinkDe = linkDes[1]; 
    const aboutLinkDe = linkDes[2]; 
    const findLinkDe = linkDes[3]; 
    const addLinkDe = linkDes[4]; 
    const registerLinkDe = linkDes[5]; 
    const landingPageLinkFull = links[0]; 
    const profileLinkFull = links[1]; 
    const aboutLinkFull = links[2]; 
    const findLinkFull = links[3]; 
    const addLinkFull = links[4]; 
    const registerLinkFull = links[5]; 

    navFixture.detectChanges(); 
    expect(profileLinkFull.navigatedTo) 
     .toBeNull('link should not have navigated yet'); 
    profileLinkDe.triggerEventHandler('click', { button: 0 }); 
    landingPageLinkDe.triggerEventHandler('click', { button: 0 }); 
    aboutLinkDe.triggerEventHandler('click', { button: 0 }); 
    registerLinkDe.triggerEventHandler('click', { button: 0 }); 
    findLinkDe.triggerEventHandler('click', { button: 0 }); 
    addLinkDe.triggerEventHandler('click', { button: 0 }); 

    navFixture.detectChanges(); 
    expect(landingPageLinkFull.navigatedTo).toBe('/'); 
    expect(profileLinkFull.navigatedTo).toBe('/profile'); 
    expect(aboutLinkFull.navigatedTo).toBe('/about'); 
    expect(findLinkFull.navigatedTo).toBe('/find'); 
    expect(addLinkFull.navigatedTo).toBe('/add'); 
    expect(registerLinkFull.navigatedTo).toBe('/register'); 
}); 

मैं इस त्रुटि मिलती है:

zone.js:388 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'add' ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: Cannot match any routes. URL Segment: 'add'(…) Error: Cannot match any routes. URL Segment: 'add'

परीक्षण अभी भी गुजरता है, लेकिन यह जानना दिलचस्प होगा कि मैं क्यों मुझे त्रुटि मिल रही है। जब मैं उपयोगकर्ता के रूप में एप्लिकेशन का उपयोग करता हूं तो मुझे त्रुटि नहीं मिलती है। मैंने त्रुटि का शोध किया है और आमतौर पर मार्गों में एक डिफ़ॉल्ट पथ प्रदान नहीं करने के कारण, हालांकि मैंने ऐसा किया है।

क्या मैं इस त्रुटि के कारण कुछ गलत कर रहा हूं?

navbar.component.spec.ts

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { 
    ComponentFixture, 
    TestBed, 
    async, 
    fakeAsync 
} from '@angular/core/testing'; 
import { 
    BrowserDynamicTestingModule, 
    platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing'; 
import { By } from '@angular/platform-browser'; 
import { 
    DebugElement, 
    Component, 
    ViewChild, 
    Pipe, 
    PipeTransform, 
    CUSTOM_ELEMENTS_SCHEMA, 
    NO_ERRORS_SCHEMA 
} from '@angular/core'; 
import { DatePipe } from '@angular/common'; 
import { Router, RouterOutlet, RouterModule } from '@angular/router'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { NavbarComponent } from './navbar.component'; 
import { RouterLinkStubDirective } from '../../router-stubs'; 
import { click } from '../../test/utilities.spec'; 

describe('NavbarComponent',() => { 
    let navComponent: NavbarComponent; 
    let navFixture: ComponentFixture<NavbarComponent>; 
    let linkDes: any; 
    let links: any; 
    let landingPageLink: any; 
    let profileLink: any; 
    let aboutLink: any; 
    let findLink: any; 
    let addLink: any; 
    let registerLink: any; 

    beforeAll(() => { 
     TestBed.resetTestEnvironment(); 
     TestBed.initTestEnvironment(BrowserDynamicTestingModule, 
      platformBrowserDynamicTesting()); 
    }); 

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ 
       NavbarComponent, 
       RouterLinkStubDirective 
      ], 
      imports: [RouterTestingModule], 
      schemas: [NO_ERRORS_SCHEMA] 
     }).compileComponents(); 
    })); 

    beforeEach(() => { 
     navFixture = TestBed.createComponent(NavbarComponent); 
     navComponent = navFixture.componentInstance; 
     navFixture.detectChanges(); 
     linkDes = navFixture.debugElement 
      .queryAll(By.directive(RouterLinkStubDirective)); 
     links = linkDes 
      .map((de: any) => de.injector 
       .get(RouterLinkStubDirective) as RouterLinkStubDirective); 
     landingPageLink = links[0].linkParams; 
     profileLink = links[1].linkParams; 
     aboutLink = links[2].linkParams; 
     findLink = links[3].linkParams; 
     addLink = links[4].linkParams; 
     registerLink = links[5].linkParams; 
    }); 

    it('can get RouterLinks from template',() => { 
     expect(links.length).toBe(6, 'should have 6 links'); 
     expect(landingPageLink[0]) 
      .toEqual('/', '1st link should go to landing page'); 
     expect(profileLink[0]) 
      .toEqual('/profile', '2nd link should go to profile'); 
     expect(aboutLink[0]) 
      .toEqual('/about', '3rd link should go to about'); 
     expect(findLink[0]) 
      .toEqual('/find', '4th link should go to find'); 
     expect(addLink[0]) 
      .toEqual('/add', '5th link should go to add'); 
     expect(registerLink[0]) 
      .toEqual('/register', '6th link should go to register'); 
    }); 

    it('can click profile link in template',() => { 
     const landingPageLinkDe = linkDes[0]; 
     const profileLinkDe = linkDes[1]; 
     const aboutLinkDe = linkDes[2]; 
     const findLinkDe = linkDes[3]; 
     const addLinkDe = linkDes[4]; 
     const registerLinkDe = linkDes[5]; 
     const landingPageLinkFull = links[0]; 
     const profileLinkFull = links[1]; 
     const aboutLinkFull = links[2]; 
     const findLinkFull = links[3]; 
     const addLinkFull = links[4]; 
     const registerLinkFull = links[5]; 

     navFixture.detectChanges(); 
     expect(profileLinkFull.navigatedTo) 
      .toBeNull('link should not have navigated yet'); 
     profileLinkDe.triggerEventHandler('click', { button: 0 }); 
     landingPageLinkDe.triggerEventHandler('click', { button: 0 }); 
     aboutLinkDe.triggerEventHandler('click', { button: 0 }); 
     registerLinkDe.triggerEventHandler('click', { button: 0 }); 
     findLinkDe.triggerEventHandler('click', { button: 0 }); 
     addLinkDe.triggerEventHandler('click', { button: 0 }); 

     navFixture.detectChanges(); 
     expect(landingPageLinkFull.navigatedTo).toBe('/'); 
     expect(profileLinkFull.navigatedTo).toBe('/profile'); 
     expect(aboutLinkFull.navigatedTo).toBe('/about'); 
     expect(findLinkFull.navigatedTo).toBe('/find'); 
     expect(addLinkFull.navigatedTo).toBe('/add'); 
     expect(registerLinkFull.navigatedTo).toBe('/register'); 
    }); 
}); 

परीक्षण के लिए ठूंठ:

import 'zone.js/dist/long-stack-trace-zone.js'; 
import 'zone.js/dist/async-test.js'; 
import 'zone.js/dist/fake-async-test.js'; 
import 'zone.js/dist/sync-test.js'; 
import 'zone.js/dist/proxy.js'; 
import 'zone.js/dist/jasmine-patch.js'; 

import { 
    EventEmitter, 
    Output, 
    trigger, 
    state, 
    style, 
    transition, 
    animate, 
    Directive, 
    Input 
} from '@angular/core'; 

import { 
    ComponentFixture, 
    TestBed, 
    async, 
    fakeAsync 
} from '@angular/core/testing'; 
import { 
    BrowserDynamicTestingModule, 
    platformBrowserDynamicTesting 
} from '@angular/platform-browser-dynamic/testing'; 
import { By } from '@angular/platform-browser'; 
import { 
    DebugElement, 
    Component, 
    ViewChild, 
    Pipe, 
    PipeTransform 
} from '@angular/core'; 
import { DatePipe } from '@angular/common'; 
import { Router } from '@angular/router'; 
import { NavbarComponent } from './shared/subcomponents/navbar.component'; 
import { AppComponent } from './app.component'; 
import { click } from './test/utilities.spec'; 

import { FormsModule, ReactiveFormsModule } from '@angular/forms' 

@Directive({ 
    selector: '[routerLink]', 
    host: { 
    '(click)': 'onClick()' 
    } 
}) 
export class RouterLinkStubDirective { 
    @Input('routerLink') linkParams: any; 
    navigatedTo: any = null; 

    onClick() { 
    this.navigatedTo = this.linkParams[0]; 
    } 
} 

app.routes.ts:

import { Routes } from '@angular/router'; 
import { LandingPageComponent } from './landing-page/landing-page.component'; 
import { FindPageComponent } from './find-page/find-page.component'; 
import { AddPageComponent } from './add-page/add-page.component'; 
import { RegisterPageComponent } from './register-page/register-page.component'; 
import { AboutPageComponent } from './about-page/about-page.component'; 
import { ProfilePageComponent } from './profile-page/profile-page.component'; 

export const routerConfig: Routes = [ 
    { 
    path: '', 
    component: LandingPageComponent 
    }, 
    { 
    path: '', 
    redirectTo: '', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'find', 
    component: FindPageComponent 
    }, 
    { 
    path: 'add', 
    component: AddPageComponent 
    }, 
    { 
    path: 'register', 
    component: RegisterPageComponent 
    }, 
    { 
    path: 'about', 
    component: AboutPageComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfilePageComponent 
    } 
]; 

navbar.component.html:

<nav class="navbar navbar-dark navbar-fixed-top text-uppercase"> 
    <div class="container-fluid"> 
     <button  class="navbar-toggler hidden-md-up pull-xs-right" 
        type="button" 
        data-toggle="collapse" 
        data-target="#nav-content"> 
        &#9776; 
     </button> 
     <a class="navbar-brand" [routerLink]="['/']" 
     routerLinkActive="active">vepo</a> 
     <div class="collapse navbar-toggleable-sm" id="nav-content"> 
      <ul class="nav navbar-nav pull-xs-right"> 
       <li class="nav-item"> 
        <a class="nav-link" [routerLink]="['/profile']" 
        routerLinkActive="active">profile</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" [routerLink]="['/about']" 
        routerLinkActive="active">about</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" [routerLink]="['/find']" 
        routerLinkActive="active">find</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" [routerLink]="['/add']" 
        routerLinkActive="active">add</a> 
       </li> 
       <li class="nav-item"> 
        <button type="button" class="as-text nav-link 
        text-uppercase" (click)="openModal()"> 
         login 
        </button> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link signup" [routerLink]="['/register']" 
        routerLinkActive="active">sign up free</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<login #modal></login> 
<router-outlet></router-outlet> 

Answer 1

मुझे हाल ही में एक ही समस्या थी। यह एक घटक के ngOnInit विधि के अंदर router.navigate पर कॉल के कारण हुआ था। परीक्षण घटक बनाने की कोशिश कर रहा था, लेकिन ngOnInit के अंदर यह घटक से दूर नेविगेट करने का प्रयास कर रहा था (क्योंकि कुछ शर्तों को पूरा नहीं किया गया था)।

मेरे मामले में, मैं के हिस्से के रूप में RouterTestingModule आयात कर रहा हूं। तो इसे ठीक करने के लिए मैंने बस RouterTestingModule के साथ एक मार्ग पंजीकृत किया। उदाहरण के लिए, मान लीजिए कि आपका नेविगेशन कॉल router.navigate(['example']) जैसा दिखता है और यह पर हल हो जाता है।

RouterTestingModule.withRoutes([ 
    { path: 'example', component: ExampleComponent} 
]) 

कर मेरी परीक्षण Cannot match any routes त्रुटियों जारी करने के बिना चलाने की अनुमति से ऊपर: इस प्रकार आप परीक्षण सेट कर सकते हैं।

इसके लायक होने के लिए, मुझे लगता है कि राउटर को रोकने के लिए एक बेहतर तरीका होगा और पुष्टि करें कि navigate पर उचित कॉल किए गए हैं।