Angulaire 2 tests unitaires des composants avec routerLink

Question

Je suis en train de tester mon composante angulaire 2 final, mais j'obtiens une erreur parce que le composant utilise l' routerLink directive. J'obtiens l'erreur suivante:

Ne peut pas se lier à 'routerLink', car il n'est pas connu de la propriété de 'a'.

C'est le code de l' ListComponent modèle

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

Et voici mon test.

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);
  });
});

J'ai regardé plusieurs réponses à des questions similaires, mais ne pouvait pas trouver une solution qui a fonctionné pour moi.

Answer 1

Vous devez configurer tous les de routage. Pour les tests, plutôt que d'utiliser l' RouterModule, vous pouvez utiliser l' RouterTestingModule de @angular/router/testing, où vous pouvez configurer certains se moquer de routes. Vous aurez également besoin d'importer de l' CommonModule de @angular/common votre *ngFor. Ci-dessous est un test de passage

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

Mise à JOUR

Une autre option, si vous voulez juste tester que les itinéraires sont affichés correctement, sans essayer de naviguer...

Vous un il suffit d'importer l' RouterTestingModule sans que de la configuration des routes

imports: [ RouterTestingModule ]

ensuite il suffit de vérifier que le lien est rendu avec le bon chemin d'accès d'URL, par exemple

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

Answer 2

Si vous n'êtes pas test routeur liés à d'autres choses, vous pouvez configurer le test d'ignorer les instructions inconnues avec "NO_ERRORS_SCHEMA'

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

Answer 3

Écrire un test pour l' routerLink. Vous pouvez suivre les étapes ci-dessous.

1. Importer RouterTestingModule et RouterLinkWithHref.

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

2. Importer RouterTestingModule dans votre module

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

3. En cas de test trouvez la directive RouterLinkWithHref tot tester l'existence du lien.

   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);
   });