"Błąd: brak dostawcy routera" podczas pisania przypadków testowych jednostki Karma-Jasmine

Question

Wykonaliśmy jedną konfigurację kątową2, a wewnątrz utworzono jeden moduł (mój moduł), a wewnątrz tego modułu utworzono jeden komponent (mój-nowy- składnik) stosując następujące cmd polecenia:

ng nowy angular2test cd angular2test ng służyć ng moduł g mi moduł ng wytworzenia składnika my-nowego komponentu

Po utworzeniu konfiguracji i wszystkie składniki, z uruchomiliśmy polecenie ng test z folderu cmd inside angular2test.

Poniższy plik jest nasza my-new-component.component.ts plik:

import { Component, OnInit } from '@angular/core'; 
import { Router, Routes, RouterModule } from '@angular/router'; 
import { DummyService } from '../services/dummy.service'; 

@Component({ 
    selector: 'app-my-new-component', 
    templateUrl: './my-new-component.component.html', 
    styleUrls: ['./my-new-component.component.css'] 
}) 
export class MyNewComponentComponent implements OnInit { 

    constructor(private router : Router, private dummyService:DummyService) { } 

    ngOnInit() { 
    } 
    redirect() : void{ 
     //this.router.navigate(['/my-module/my-new-component-1']) 
    } 
} 

Poniższy plik jest nasza my-new-component.component.spec.ts plik:

/* tslint:disable:no-unused-variable */ 
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { RouterTestingModule } from '@angular/router/testing'; 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 
import { DummyService } from '../services/dummy.service'; 

import { MyNewComponentComponent } from './my-new-component.component'; 

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

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [RouterTestingModule, NgbModule.forRoot(), DummyService], 
     declarations: [ MyNewComponentComponent ] 
    }) 
    .compileComponents(); 
    })); 

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

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

Jesteśmy coraz niżej cmd błąd podczas uruchamiania polecenia test nG:

Chrome 54.0.2840 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.593 secs/2.007 secs) 
Chrome 54.0.2840 (Windows 7 0.0.0) MyNewComponentComponent should create FAILED 
     Failed: Unexpected value 'DummyService' imported by the module 'DynamicTestModule' 
     Error: Unexpected value 'DummyService' imported by the module 'DynamicTestModule' 

Zaktualizowaliśmy plik komponentu i plik spec. Zadowolony znajdź poniższy fragment kodu.

Poniższy plik jest nasza my-new-component.component.ts plik:

import { Component, OnInit } from '@angular/core'; 
import { Router, Routes, RouterModule } from '@angular/router'; 
import { DummyService } from '../services/dummy.service'; 

@Component({ 
    selector: 'app-my-new-component', 
    templateUrl: './my-new-component.component.html', 
    styleUrls: ['./my-new-component.component.css'] 
}) 
export class MyNewComponentComponent implements OnInit { 

    constructor(private router : Router, private dummyService:DummyService, public fb: FormBuilder) { 
    super(fb); 
    } 

    ngOnInit() { 
    } 
    redirect() : void{ 
     //this.router.navigate(['/my-module/my-new-component-1']) 
    } 
} 

Poniższy plik jest nasza my-new-component.component.spec.ts plik:

/* tslint:disable:no-unused-variable */ 
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { FormsModule, FormGroup, FormBuilder, Validators, ReactiveFormsModule} from '@angular/forms'; 
import { SplitPipe } from '../../common/pipes/string-split.pipe'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { DummyService } from '../services/dummy.service'; 
import { MyNewComponentComponent } from './my-new-component.component'; 

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

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [RouterTestingModule, DummyService ,HttpModule, FormBuilder], 
     declarations: [ MyNewComponentComponent, SplitPipe] 
    }) 
    .compileComponents(); 
    })); 

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

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

Ale podczas uruchamiania polecenia ng, otrzymujemy poniższy błąd.

09 12 2016 09:13:48.987:WARN [karma]: No captured browser, open http://localhost:9876/ 
09 12 2016 09:13:49.008:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/ 
09 12 2016 09:13:49.010:INFO [launcher]: Launching browser Chrome with unlimited concurrency 
09 12 2016 09:13:49.420:INFO [launcher]: Starting browser Chrome 
09 12 2016 09:13:58.642:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#QZ9LSSUVeK6KwNDlAAAA with id 46830907 
     Failed: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule' 
     Error: Unexpected value 'FormBuilder' imported by the module 'DynamicTestModule' 

Answer 1

Podczas konfigurowania modułu testowego należy zaimportować RouterTestingModule.

/* tslint:disable:no-unused-variable */ 
    import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
    import { By } from '@angular/platform-browser'; 
    import { DebugElement } from '@angular/core'; 

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

    import { MyNewComponentComponent } from './my-new-component.component'; 

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

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

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

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

Edit: przykład z udawaną DummyService

/* tslint:disable:no-unused-variable */ 
    import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
    import { By } from '@angular/platform-browser'; 
    import { DebugElement } from '@angular/core'; 

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

    import { MyNewComponentComponent } from './my-new-component.component'; 

    // import the service 
    import { DummyService } from '../dummy.service'; 

    // mock the service 
    class MockDummyService extends DummyService { 
    // mock everything used by the component 
    }; 

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

    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
     imports: [RouterTestingModule], 
     declarations: [MyNewComponentComponent], 
     providers: [{ 
      provide: DummyService, 
      useClass: MockDummyService 
     }] 
     }) 
     .compileComponents(); 
    })); 

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

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