Angularアプリをテストする方法

ユニットテストの作成:

Angularアプリのコンポーネントやサービスなどの単一のユニットをテストするために、Angularの組み込みテストフレームワークであるJasmineを使用します。
テストファイルを作成し、必要な依存関係をインポートします。
テスト対象のユニットをインスタンス化し、テストケースを記述します。
テストケース内で期待される結果をアサートします。

以下は、Angularコンポーネントのテストの例です:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
describe('MyComponent', () => {
 let component: MyComponent;
 let fixture: ComponentFixture<MyComponent>;
 beforeEach(async () => {
   await TestBed.configureTestingModule({
     declarations: [MyComponent],
   }).compileComponents();
 });
 beforeEach(() => {
   fixture = TestBed.createComponent(MyComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });
 it('should create', () => {
   expect(component).toBeTruthy();
 });
 it('should display the correct title', () => {
   const titleElement = fixture.nativeElement.querySelector('h1');
   expect(titleElement.textContent).toContain('My Component');
 });
});

結合テストの作成:

複数のコンポーネントやサービスなどの複数のユニットが協力して動作することを確認するために、結合テストを作成します。
Angularの組み込みテストユーティリティであるTestBedを使用して、テストモジュールを作成します。
モジュールに必要な依存関係をインポートし、テストケースを記述します。
テストケース内でユニット間の相互作用や期待される結果をアサートします。

以下は、Angularコンポーネント間の結合テストの例です:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';
describe('ParentComponent', () => {
 let component: ParentComponent;
 let fixture: ComponentFixture<ParentComponent>;
 beforeEach(async () => {
   await TestBed.configureTestingModule({
     declarations: [ParentComponent, ChildComponent],
   }).compileComponents();
 });
 beforeEach(() => {
   fixture = TestBed.createComponent(ParentComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });
 it('should create', () => {
   expect(component).toBeTruthy();
 });
 it('should update child component', () => {
   component.data = 'Updated data';
   fixture.detectChanges();
   const childComponent = fixture.nativeElement.querySelector('app-child');
   expect(childComponent.textContent).toContain('Updated data');
 });
});

E2Eテストの作成:
- アプリケーション全体の挙動をシミュレートするために、End-to-End (E2E) テストを作成します。
- Angularの組み込みテストフレームワークであるProtractorを使用します。
- テストスクリプトを作成し、アプリケーションの操作や画面遷移、期待される結果を定義します。
以下は、AngularアプリのE2Eテストの例です:
```
import { browser, by, element } from 'protractor';
describe('My App', () => {
 beforeEach(() => {
   browser.get('/');
 });
 it('should display welcome message', () => {
   const welcomeMessage = element(by.css('.welcome-message')).getText();
   expect(welcomeMessage).toEqual('Welcome to My App!');
 });
});
```

上記の手順とコード例を参考にして、Angularアプリケーションをテストする方法を学び、自身のアプリケーションに適用してみてください。