Inputs、Outputs、DOMのテスト
レンダリング結果とイベントをアサートします
「Inputs、Outputs、DOMのテスト」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
コンポーネントの契約をテストする
コンポーネントは、inputs（データの入力）、outputs（イベントの出力）、描画された DOM を通じて通信します。優れたコンポーネントテストでは、この 3 つの接点を操作し、内部実装ではなく画面に現れる結果を検証します。
Input の設定
コンポーネントインスタンスの input プロパティに値を代入し、detectChanges() を呼び出して再描画します。シグナル入力の場合は fixture.componentRef.setInput() で設定します。
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();querySelector による DOM の読み取り
fixture.nativeElement.querySelector() を使って描画された要素を検索し、テキストや属性を検証します。
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement と By.css
fixture.debugElement.query(By.css(...)) は DebugElement ラッパーを返します。その .nativeElement が DOM ノードであり、プラットフォームをまたいで利用できる、より柔軟な検索も行えます。
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');リスト用の queryAll
繰り返し要素（たとえば @for ループ）には queryAll を使ってすべての一致を取得し、件数を確認します。
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');クリックのシミュレーション
DOM イベントを発生させて操作をテストします。DebugElement では triggerEventHandler を使うか、ネイティブ要素の .click() を呼び出し、その後で detectChanges() を実行します。
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);Output イベントのテスト
イベントを発生させる操作を実行する前に、コンポーネントの output（EventEmitter または output シグナル）を購読します。
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');属性とクラスの検証
入力値に応じて変化する条件付きクラスや属性を検証できます。
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);フォーム入力の更新
テキストフィールドをテストするには、入力値を設定して input イベントをディスパッチし、Angular のバインディングを更新します。
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');変更のたびに detectChanges が必要な理由
Zone ベースのテストでもゾーンレステストでも、状態を変更した後は明示的に detectChanges() を呼び出す必要があります。テストは Angular の自動的な更新処理の外で実行されるためです。これを忘れると、「アサーションで古い DOM が検出される」という問題が最もよく発生します。
内部ではなく振る舞いをテストする
private フィールドではなく、描画された出力や発生したイベントを検証することを推奨します。そうすればテストの回復性が高まり、同じユーザー向けの振る舞いを保ったまま内部実装をリファクタリングしても、テストが壊れません。
クイックチェック
DebugElement を取得できる API はどれでしょうか。
まとめ
setInput で inputs を操作し、querySelector と By.css で DOM を読み取り、購読によって outputs を取得し、クリックや input イベントをシミュレートしました。変更後は必ず detectChanges() を呼び出し、ユーザーに見える振る舞いを検証してください。
よくある質問
「Inputs、Outputs、DOMのテスト」レッスンは無料ですか？
はい。「Inputs、Outputs、DOMのテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Inputs、Outputs、DOMのテスト」で何を学びますか？
レンダリング結果とイベントをアサートします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Inputs、Outputs、DOMのテスト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- TestBedとコンポーネントフィクスチャ
- Inputs、Outputs、DOMのテスト
- サービスと依存関係のモック
- Signalsと非同期コードのテスト