概要
ng new [アプリ名]で作ったときに、デフォルトで入っているテストのコード「app.component.spec.ts」を解読しながら、テストの基礎的な書き方を覚えていきます。
デフォルトプロジェクトのテストコード
ソースコードを丸ごと持ってきたのが以下の通りです。
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'defaultApp'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('defaultApp');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('defaultApp app is running!');
});
});
このコードを上から順にみていきます。
解説
describe
describe('AppComponent', () => {
describe関数は、関連するテストケースをまとめたものをグループ化して、それに名前を付けています。
第1引数が名前で、第2引数にテストケースの関数です。
beforeEachとasync
beforeEachは、テストケースを実行する前の初期化処理をこの中で書きます。
asyncは非同期処理が終わるまで、次の処理に進まないように指示しています。
TestBed.configureTestingModuleとawait
TestBed.configureTestingModuleでは、テストで使用するモジュールや、テスト対象のコンポーネントを指定したりします。その後、コンパイルで利用できるようにします。
awaitは非同期処理に対して先頭に付けて、その非同期処理が終わるまで、次の処理に進まないようにしている。
it
itは、1つのテストケースを表現します。第1引数にテストケースの名前や内容、第2引数にテストケースを処理するコードを書きます。
TestBed.createComponent
createComponentは、指定したコンポーネントのインスタンスのようなものを作ります。
その後の処理のfixture.componentInstanceがインスタンスのプロパティです。
expect(app).toBeTruthy()
これは、appがTrueとなる値になっているかを判断し、TrueであればこのテストケースがOKであることになります。
expectには様々なテスト結果を確認する関数があり、それを使って、結果が想定と一致しているかを確認します。