web-dev-qa-db-ja.com

Angular routerLinkを使用した2つのユニットテストコンポーネント

angular 2 finalでコンポーネントをテストしようとしていますが、コンポーネントがrouterLinkディレクティブを使用しているため、エラーが発生します。次のエラーが表示されます。

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

私は同様の質問に対するいくつかの答えを見ましたが、私に合った解決策を見つけることができませんでした。

angulartypescriptangular2-routingangular2-testing
52
select

すべてのルーティングを構成する必要があります。テストでは、RouterModuleを使用する代わりに、@angular/router/testingからのRouterTestingModuleを使用できます。ここでは、いくつかの模擬ルートを設定できます。 @angular/commonの*ngForからCommonModuleをインポートする必要もあります。以下は完全な合格テストです

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

更新

別のオプション、ナビゲートしようとせずに、ルートが正しくレンダリングされることをテストするだけの場合...

ルートを設定せずにRouterTestingModuleをインポートするだけです

imports: [ RouterTestingModule ]

次に、リンクが正しいURLパスでレンダリングされていることを確認します。

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

ルーター関連のものをテストしていない場合は、「NO_ERRORS_SCHEMA」で不明なディレクティブを無視するようにテストを構成できます

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

routerLinkのテストケースを作成します。以下の手順に従ってください。

  1. RouterTestingModuleおよびRouterLinkWithHrefをインポートします。

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

  2. モジュールにRouterTestingModuleをインポートします

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

  3. テストケースでは、リンクの存在をテストするディレクティブRouterLinkWithHref totを見つけます。

    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);
});
4
Anurag Singh Bisht