私は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{
}
コンパイル時にコンポーネントに他のコンポーネントが含まれているかどうかをテストするには:
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);
ほとんどの場合、外部コンポーネントをテストするだけです。 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で新しいプロジェクトを生成し、生成された仕様ドキュメントをご覧ください。