今日の学習

Angular TDD

Testing Angular Applications

今日も読んでいく。

CH3 Testing components

この章でカバーされている内容

• コンポーネントのテスト

• shallow testとisolatedテストの違いについて

• classとfunctionのテスト

学んだこと

3-1 Basic component tests

一番基本的なものはコンポーネントをTypeScriptのクラスとしてテストする。Angularの組み込み機能を使う必要性はない。

3-2 Real-world component testing

依存のあるコンポーネントをテストする（実際のプロダクトのコンポーネントは依存を持つ）。 テストをするためには以下の依存を解決する必要がある。

3-2-1 Importing the dependencies

1. Angularのテスト用の依存

2. Angularに含まれる依存(例:FormsModule)

3. プロダクトコードの依存

• DebugElement > @angular/core

• ComponentFixture >@angular/core/testing

• TestBed > @angular/core/testing

• fakeAsync > @angular/core/testing

• tick > @angular/core/testing

• By > @angular/platform-browser

• NoopAnimationsModule > @angular/platform-browser/animations

• BrowserDynamicTestingModule > @angular/platform-browser-dynamic/testing

• RouterTestingModule > @angular/router/testing

3-2-2 Setting up the tests

Httpリクエストなどテストが難しい機能をStubで疑似的に代替する。

テストの準備をする。

1. TestBed.configureTestingModuleに必要な諸々をdeclarationsしたりimportsしたりprovidersする

2. TestBed.overrideModuleに必要な諸々を設定する

3. テスト用のコンポーネントを準備する

Moduleの準備とComponentの準備は別のbeforeEachに分けたほうがよい

3-2-3 Adding the tests 実際にコンポーネントに存在するメソッド毎にテストを書く。これ例なのでテストを後に書くパターンだけど、先に書くには？的な疑問で頭がいっぱいになる。

key words

• isolated tests

• shallow tests

• fakeAsync

• ComponentFixture

• TestBed

• DebugElement

• nativeElement