web-dev-qa-db-ja.com

angular 2コンポーネントに別のコンポーネントが含まれているかどうかを単体テストする方法

私はangular 2。

テンプレートに他のコンポーネントが含まれているコンポーネントがあります。

親コンポーネントが他のコンポーネントで構成されているかどうかを確認する単体テストを作成するにはどうすればよいですか。

サンプルについて言及したり、リソースに誘導したりすることは非常に役立ちます。

MyComponent.ts：

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: `<div>
<other-component></other-component>
</div>`
})
export class MyComponent{

}

OtherComponent.ts：

import { Component } from '@angular/core';
@Component({
selector: 'other-component',
templateUrl: `<div>
<h1>Other Component</h1>
</div>`
})
export class OtherComponent{

}
angularkarma-jasmineangular2-testing
14
Chan15

コンパイル時にコンポーネントに他のコンポーネントが含まれているかどうかをテストするには：

  • テストしているコンポーネントを注入します
  • 子コンポーネントを注入する
  • 親コンポーネントを作成する
  • 変更を検出する
  • querySelectorまたはquerySelectorAllを使用して、子コンポーネントを見つけます

通常、要素が存在することを確認してから、個々の子コンポーネントの仕様をさらにテストします。

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

import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        OtherComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it('should have the other component', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('app-other')).not.toBe(null);
  }));
});

querySelectorでnullをチェックすると、コンポーネントが存在するかどうかが判断されます。 querySelector MDN から：

一致が見つからない場合はnullを返します。それ以外の場合、最初に一致した要素を返します。

同じ子コンポーネントのインスタンスが複数あることを確認したい場合は、querySelectorAllを使用してlengthプロパティを確認できます。

expect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4);
22
silencedmessage

ほとんどの場合、外部コンポーネントをテストするだけです。 angularで内部コンポーネントを無視したい場合は、NO_ERRORS_SCHEMAを仕様に追加するのが最も簡単な方法です。

「@ angular/core」から{NO_ERRORS_SCHEMA}をインポートします

次に、TestBed.configureTestingModuleに次の行を追加します。

スキーマ：[NO_ERRORS_SCHEMA]

テストでは、コンポーネントHTMLの内部コンポーネントをインポートしていないという事実を無視します。

外側のコンポーネントで内側のコンポーネントをテストする場合、angular-cliを使用している場合、それらが自動的に生成するcomponent.specファイルには、一部であるdeclarations配列が含まれていることがわかります。 TestBed構成オブジェクトの。したがって、ファイルをインポートし、コンポーネントを宣言に追加するだけです。

上記の例：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MyComponent } from './my-component.component';
import { OtherComponent } from './other-component.component';

次に、describeブロックにbeforeEachがあります

beforeEach(async(() =>{
  TestBed.configureTestingModule({
    declarations: [ MyComponent,
                    OtherComponent ]
  })
  .compileComponent();
})

これで、コンポーネントはエラーなしで正しくコンパイルされるはずです。セットアップ全体を確認する場合は、angular-cliで新しいプロジェクトを生成し、生成された仕様ドキュメントをご覧ください。

11
Felix Tsai