everything-claude-code/docs/ja-JP/skills/angular-developer/references/testing-fundamentals.md

テストの基礎

このガイドでは、Angularのユニットテストおよびコンポーネントテストを記述するための基本的な原則と実践を説明します。プロジェクトにすでに設定されているテストランナーを使用してください。

核心哲学: 非同期ファースト

最新のAngularアプリケーションは、特にシグナルやゾーンレス変更検知を使用する場合、状態変更を非同期にスケジュールすることが多いです。テストはこれを考慮する必要があります。

「Act（実行）、Wait（待機）、Assert（検証）」パターンを推奨します:

1. Act（実行）: 状態を更新するかアクションを実行します（例: コンポーネントの入力を設定する、ボタンをクリックする）。
2. Wait（待機）: await fixture.whenStable() を使用して、フレームワークがスケジュールされた更新を処理しレンダリングするのを待ちます。
3. Assert（検証）: 結果を確認します。

基本的なテスト構造の例

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {MyComponent} from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let h1: HTMLElement;

  beforeEach(async () => {
    // 1. テストモジュールを設定する
    await TestBed.configureTestingModule({
      imports: [MyComponent],
    }).compileComponents();

    // 2. コンポーネントフィクスチャーを作成する
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    h1 = fixture.nativeElement.querySelector('h1');
  });

  it('should display the default title', async () => {
    // ACT: （暗黙的）コンポーネントはデフォルト状態で作成される。
    // 初期データバインディングを待機する。
    await fixture.whenStable();
    // 初期状態を検証する。
    expect(h1.textContent).toContain('Default Title');
  });

  it('should display a different title after a change', async () => {
    // ACT: コンポーネントのタイトルプロパティを変更する。
    component.title.set('New Test Title');

    // 非同期更新が完了するのを待機する。
    await fixture.whenStable();

    // DOMが更新されたことを検証する。
    expect(h1.textContent).toContain('New Test Title');
  });
});

TestBed と ComponentFixture

• TestBed: テスト専用のAngularモジュールを作成するための主要なユーティリティです。テストに必要なコンポーネントの宣言、サービスの提供、インポートのセットアップのために beforeEach 内で TestBed.configureTestingModule({...}) を使用します。
• ComponentFixture: 作成されたコンポーネントのインスタンスとその環境を扱うためのハンドルです。
  • fixture.componentInstance: コンポーネントのクラスインスタンスにアクセスします。
  • fixture.nativeElement: コンポーネントのルートDOM要素にアクセスします。
  • fixture.debugElement: nativeElement をAngular固有のラッパーでラップしたもので、DOMをより安全かつプラットフォームに依存しない方法でクエリできます（例: debugElement.query(By.css('p'))）。