example - Angular 2/4/6/7-Prueba de unidad con enrutador

router events angular 4

Question

En Angular 2.0.0, estoy probando un componente que usa un enrutador. Sin embargo, aparece el mensaje "Los parámetros suministrados no coinciden con ninguna firma del objetivo de la llamada". error. En el código de Visual Studio en spec.ts, el nuevo enrutador () se resalta en rojo

Realmente aprecio si alguien me pudiera hacer saber cuál sería la sintaxis correcta. Gracias por adelantado. Mi código de la siguiente manera:

spec.ts

import { TestBed, async } from ''@angular/core/testing'';
import { NavToolComponent } from ''./nav-tool.component'';
import { ComponentComm } from ''../../shared/component-comm.service'';
import { Router } from ''@angular/router'';
describe(''Component: NavTool'', () => {
it(''should create an instance'', () => {
let component = new NavToolComponent( new ComponentComm(), new Router());
expect(component).toBeTruthy();
});
});

Constructor de componentes

constructor(private componentComm: ComponentComm, private router: Router) {}

Answer 1

Aquí un ejemplo si inyectamos el servicio de ruta en nuestro controlador de componentes:

import { TestBed, async } from ''@angular/core/testing'';
import { RouterTestingModule } from ''@angular/router/testing''; // Because we inject service in our component
import { Router } from ''@angular/router''; // Just if we need to test Route Service functionality
import { AppComponent } from ''./app.component'';
import { DummyLoginLayoutComponent } from ''../../../testing/mock.components.spec''; // Because we inject service in your component
describe(''AppComponent'', () => {
let router: Router; // Just if we need to test Route Service functionality
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
DummyLoginLayoutComponent // Because we inject service in our component
],
imports: [
RouterTestingModule.withRoutes([
{ path: ''login'', component: DummyLoginLayoutComponent },
]) // Because we inject service in our component
],
}).compileComponents();
router = TestBed.get(Router); // Just if we need to test Route Service functionality
router.initialNavigation(); // Just if we need to test Route Service functionality
}));
it(''should create the app'', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});

También podemos probar otras funcionalidades, como navigate() . Por si acaso:

it(''should call eventPage once with /register path if event is instanceof NavigationStart'', fakeAsync(() => {
spyOn(analyticService, ''eventPage'');
router.navigate([''register''])
.then(() => {
const baseUrl = window.location.origin;
const url = `${baseUrl}/register`;
expect(analyticService.eventPage).toHaveBeenCalledTimes(1);
expect(analyticService.eventPage).toHaveBeenCalledWith(url);
});
}));

Mi archivo con todos los componentes simulados (mock.components.specs.ts)

import { Component } from ''@angular/core'';
@Component({
selector: ''home'',
template: ''<div>Dummy home component</div>'',
styleUrls: []
})
export class DummyHomeComponent { }

Answer 2

Esto se debe a que la Route tiene algunas dependencias que espera pasen a su constructor.

Si usa componentes angulares, no debería intentar hacer pruebas aisladas. Debe usar la infraestructura de prueba angular para preparar el entorno de prueba. Esto significa dejar que Angular cree el componente, dejar que inyecte todas las dependencias requeridas, en lugar de que intentes crear todo.

Para comenzar, deberías tener algo como

import { TestBed } from ''@angular/core/testing'';
describe(''Component: NavTool'', () => {
let mockRouter = {
navigate: jasmine.createSpy(''navigate'')
};
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ NavToolComponent ],
providers: [
{ provide: Router, useValue: mockRouter },
ComponentComm
]
});
});
it(''should click link'', () => {
let fixture = TestBed.createComponent(NavToolComponent);
fixture.detectChanges();
let component: NavToolComponent = fixture.componentInstance;
component.clickLink(''home'');
expect(mockRouter.navigate).toHaveBeenCalledWith([''/home'']);
});
});

O algo así. Utiliza TestBed para configurar un módulo desde cero para las pruebas. Lo configura de la misma manera con un @NgModule .

Aquí solo nos estamos burlando del enrutador. Como solo estamos realizando pruebas unitarias, es posible que no queramos la instalación de enrutamiento real. Solo queremos asegurarnos de que se llame con los argumentos correctos. El simulacro y el spy podrán capturar esa llamada para nosotros.

Si desea usar el enrutador real, debe usar el RouterTestingModule , donde puede configurar rutas. Vea un ejemplo here y here

Ver también:

• Documentos angulares sobre pruebas para obtener más ejemplos utilizando la infraestructura de pruebas angulares.

Answer 3

Jasmine va mejor con objetos espías completos ...

describe(..., () => {
const router = jasmine.createSpyObj(''Router'', [''navigate’]);
...
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [ { provide: Router, useValue: router } ],
...
});
});

Answer 4

También puede usar el RouterTestingModule y simplemente espiar la función de navegación de esta manera ...

import { TestBed } from ''@angular/core/testing'';
import { RouterTestingModule } from ''@angular/router/testing'';
import { Router } from ''@angular/router'';
import { MyModule } from ''./my-module'';
import { MyComponent } from ''./my-component'';
describe(''something'', () => {
let fixture: ComponentFixture<LandingComponent>;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MyModule,
RouterTestingModule.withRoutes([]),
],
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
router = TestBed.get(Router)
});
it(''should navigate'', () => {
let component = fixture.componentInstance;
let navigateSpy = spyOn(router, ''navigate'');
component.goSomewhere();
expect(navigateSpy).toHaveBeenCalledWith([''/expectedUrl'']);
});
});