unit testing - "Error: no hay proveedor para el enrutador" al escribir casos de prueba de unidad de Karma-Jasmine

unit-testing angular

Question

Hemos realizado un proyecto angular2 configurado y dentro de ese módulo creado (my-module) y dentro de ese módulo creado un componente (my-new-component) usando los siguientes comandos cmd:

ng new angular2test
cd angular2test
ng g module my-module
ng generate component my-new-component

Después de crear la configuración y todos los componentes, ejecutamos el comando ng test desde cmd dentro de la carpeta angular2test.

El siguiente archivo es nuestro archivo my-new-component.component.ts :

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''])
}
}

El siguiente archivo es nuestro archivo my-new-component.component.spec.ts :

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

Recibimos el siguiente error de cmd al ejecutar el comando ng test:

 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''

Hemos actualizado el archivo de componente y el archivo de especificaciones. Por favor, encuentre debajo del fragmento de código.

El siguiente archivo es nuestro archivo my-new-component.component.ts :

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''])
}
}

El siguiente archivo es nuestro archivo my-new-component.component.spec.ts :

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

Pero al ejecutar el comando ng test, recibimos el siguiente error.

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

RouterTestingModule importar RouterTestingModule al configurar el módulo de prueba.

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

Editar: ejemplo con simulacro 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();
});
});