unit - test service angular 4

Componentes de prueba angulares de 2 unidades con routerLink

Question

Estoy tratando de probar mi componente con angular 2 final, pero recibo un error porque el componente usa la directiva routerLink . Obtuve el siguiente error:

No se puede vincular a ''routerLink'' ya que no es una propiedad conocida de ''a''.

Este es el código relevante de la plantilla ListComponent

<a 
  *ngFor="let item of data.list" 
  class="box"
  routerLink="/settings/{{collectionName}}/edit/{{item._id}}">

Y aquí está mi prueba.

import { TestBed } from ''@angular/core/testing'';

import { ListComponent } from ''./list.component'';
import { defaultData, collectionName } from ''../../config'';
import { initialState } from ''../../reducers/reducer'';


const data = {
  sort: initialState.sort,
  list: [defaultData, defaultData],
};

describe(`${collectionName} ListComponent`, () => {
  let fixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        ListComponent,
      ],
    }).compileComponents(); // compile template and css;
    fixture = TestBed.createComponent(ListComponent);
    fixture.componentInstance.data = data;
    fixture.detectChanges();
  });

  it(''should render 2 items in list'', () => {
    const el = fixture.debugElement.nativeElement;
    expect(el.querySelectorAll(''.box'').length).toBe(3);
  });
});

Miré varias respuestas a preguntas similares, pero no pude encontrar una solución que funcionó para mí.

Answer 1

Necesita configurar todo el enrutamiento. Para las pruebas, en lugar de usar el RouterModule , puede usar el RouterTestingModule desde @angular/router/testing , donde puede configurar algunas rutas simuladas. También deberá importar CommonModule desde @angular/common para su *ngFor . A continuación se muestra una prueba de aprobación completa

import { Component } from ''@angular/core'';
import { Router } from ''@angular/router'';
import { By } from ''@angular/platform-browser'';
import { Location, CommonModule } from ''@angular/common'';
import { RouterTestingModule } from ''@angular/router/testing'';
import { TestBed, inject, async } from ''@angular/core/testing'';

@Component({
  template: `
    <a routerLink="/settings/{{collName}}/edit/{{item._id}}">link</a>
    <router-outlet></router-outlet>
  `
})
class TestComponent {
  collName = ''testing'';
  item = {
    _id: 1
  };
}

@Component({
  template: ''''
})
class DummyComponent {
}

describe(''component: TestComponent'', function () {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        CommonModule,
        RouterTestingModule.withRoutes([
         { path: ''settings/:collection/edit/:item'', component: DummyComponent }
        ])
      ],
      declarations: [ TestComponent, DummyComponent ]
    });
  });

  it(''should go to url'',
    async(inject([Router, Location], (router: Router, location: Location) => {

    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();

    fixture.debugElement.query(By.css(''a'')).nativeElement.click();
    fixture.whenStable().then(() => {
      expect(location.path()).toEqual(''/settings/testing/edit/1'');
      console.log(''after expect'');
    });
  })));
});

ACTUALIZAR

Otra opción, si solo desea probar que las rutas se representan correctamente, sin intentar navegar ...

Simplemente importa el RouterTestingModule sin configurar ninguna ruta

imports: [ RouterTestingModule ]

luego simplemente verifique que el enlace se muestre con la ruta URL correcta, p. ej.

let href = fixture.debugElement.query(By.css(''a'')).nativeElement
    .getAttribute(''href'');
expect(href).toEqual(''/settings/testing/edit/1'');

Answer 2

Para escribir un caso de prueba para routerLink . Puedes seguir los pasos a continuación.

1. Importe RouterTestingModule y RouterLinkWithHref .

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

2. Importe RouterTestingModule en su módulo

   TestBed.configureTestingModule({
     imports: [ RouterTestingModule.withRoutes([])],
     declarations: [ TestingComponent ]
   })

3. En caso de prueba, encuentre la directiva RouterLinkWithHref tot test para la existencia del enlace.

   it(''should have a link to /'', () => {
     const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
     const index = debugElements.findIndex(de => {
       return de.properties[''href''] === ''/'';
     });
     expect(index).toBeGreaterThan(-1);
   });

Answer 3

Si no está probando cosas relacionadas con el enrutador, puede configurar la prueba para ignorar directivas desconocidas con ''NO_ERRORS_SCHEMA''

 import { NO_ERRORS_SCHEMA } from ''@angular/core'';
 TestBed.configureTestingModule({
   declarations: [
     ListComponent,
   ],
   schemas: [ NO_ERRORS_SCHEMA ]
 });