使用 routerLink 的 Angular 2 单元测试组件

问题描述

我正在尝试使用 angular 2 final 测试我的组件，但我收到一个错误，因为该组件使用了 routerLink 指令.我收到以下错误:

I am trying to test my component with angular 2 final, but I get an error because the component uses the routerLink directive. I get the following error:

无法绑定到routerLink"，因为它不是a"的已知属性.

这是ListComponent模板的相关代码

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

这是我的测试.

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

我查看了类似问题的几个答案，但找不到适合我的解决方案.

I looked at several answers to similar questions but could not find a solution that worked for me.

推荐答案

您需要配置所有的路由.对于测试，您可以使用 @angular/router/testing 中的 RouterTestingModule，而不是使用 RouterModule，您可以在其中设置一些模拟路线.您还需要从 @angular/common 为您的 *ngFor 导入 CommonModule.下面是一个完整的通过测试

You need to configure all the routing. For testing, rather than using the RouterModule, you can use the RouterTestingModule from @angular/router/testing, where you can set up some mock routes. You will also need to import the CommonModule from @angular/common for your *ngFor. Below is a complete passing test

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

更新

另一种选择，如果您只想测试路线是否正确呈现，而不尝试导航...

UPDATE

Another option, if you just want to test that the routes are rendered correctly, without trying to navigate...

您只需导入RouterTestingModule 无需配置任何路由

You an just import the RouterTestingModule without configuring any routes

imports: [ RouterTestingModule ]

然后只需检查链接是否使用正确的 URL 路径呈现，例如

then just check that the link is rendered with the correct URL path, e.g.

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

这篇关于使用 routerLink 的 Angular 2 单元测试组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！