2017-02-15 4 views
3

Ich versuche, mit Komponententests (Karma, Jasmine) zu verwalten und erhalte einen Fehler:Angular2-Unit-Testfehler: Kann nicht an 'routerLink' binden, da es keine bekannte Eigenschaft von 'a' ist.

Can't bind to 'routerLink' since it isn't a known property of 'a'

ich habe nicht einmal * .spec.ts Datei geändert, die durch Winkel-cli erstellt wurde ...

Hier sind meine Dateien:

benutzer list.component.html

<ul> 
    <li *ngFor="let user of users"> 
    <a [routerLink]="user._id" (click)="userClicked(user)">{{user.fullName}}</a> 
    </li> 
</ul> 

<router-outlet></router-outlet> 

benutzer list.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { IUser, User } from '../../../interfaces/user'; 
import { UsersService } from '../../../services/users.service'; 

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

    users: IUser[] = []; 

    constructor(private usersService: UsersService, private router: Router) { } 

    ngOnInit() { 
    this.usersService.getAll() 
     .subscribe(users => { 
     this.users = users.sort(...).map(...); 
     }); 

    } 

    userClicked(user) { 
    this.usersService.setCurrentUser(user); 
    } 

    clickXBtn(user) { 
    this.usersService 
     .deleteUser(user) 
     .subscribe(...); 
    } 

} 

benutzer list.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 { UsersListComponent } from './user-list.component'; 

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

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ UsersListComponent ] 
    }) 
    .compileComponents(); 
    })); 

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

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

Was sollte ich ändern? Wie funktioniert es?

Antwort

2

Mögliche Duplikat Angular 2 Jasmine Can't bind to 'routerLink' since it isn't a known property of 'a'

Ihr Problem zu beheben, versuchen Sie die Router https://angular.io/docs/ts/latest/guide/testing.html#!#router-link-stub

@Directive({ 
    selector: '[routerLink]', 
    host: { 
    '(click)': 'onClick()' 
    } 
}) 
export class RouterLinkStubDirective { 
    @Input('routerLink') linkParams: any; 
    navigatedTo: any = null; 

    onClick() { 
    this.navigatedTo = this.linkParams; 
    } 
} 

und verwenden Sie die Stub Router in Ihrem Test

+0

Docs und besonders Demo Stummel - https://angular.io/resources/live-examples/testing/ts/app-specs.plnkr.html sind sehr hilfreich. Vielen Dank. –

+1

@ Zurab-D Nicht mehr :) Der Link ist kaputt – Pablo

Verwandte Themen