Angular 単体テストを作成するための 4 つのヒント、ぜひご覧ください。

テストのアイデア:

• 1. 単体テストが可能な場合は、単体テストを優先してください。
• 2. 単体テストが不可能な場合は、テストをコンポーネントにカプセル化するなどしてテストします。
• 3. 統合テスト
• 4.
• E2E テスト

テストの難易度も徐々に上がり、時間がかかります。テストを簡単にしたいなら、開発中に意識的にアイデアを明確にして、シンプルで効率的なコードを書くべきですよ～。

この記事で使用されているテスト テクノロジ スタック: Angular12 + Jasmine。他のテスト テクノロジの構文は異なりますが、全体的な考え方は似ています。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

ヒント: Jasmine テスト ケースの決定、メソッドは何ですか。ここで見つけることができます。単体テストのコンポーネントをクリックします。

デフォルト

は、によって作成されたテスト対象のオブジェクトのインスタンスです。次の構文を使用する Angular

beforeEach(() => { 
  フィクスチャ = TestBed.createComponent(BannerComponent); 
  コンポーネント = fixture.componentInstance; 
  fixture.detectChanges(); 
});

関数テスト

1. 戻り値のない関数呼び出し

function test(index:number,fn:Function){
 if(fn){
     fn(インデックス);
 }

テスト方法は

?

反例: 戻り値を直接テストする unknown

const res =component.test(1,() => {}));
  推奨

される方法:

# Jasmine を使用する
 it('test を呼び出すと正しいデータが取得されるはずです',() =>{
     const パラメータ = {
       fn: () => {}
    }
   spyOn(param,'fn')
   コンポーネント.テスト(1,param.fn);
   Expect(param.fn).toHaveBeenCalled();
 })

構造命令 HostListener は、

構造命令をテストします。一般的に使用される用語は、そのような関数を表示するための for ループです

。
 @Directive({ セレクター: '[ImageURlError]' })
エクスポート クラス ImageUrlErrorDirective は OnChanges {を実装します。
  コンストラクター(プライベート el: ElementRef) {}
  
  @HostListener('エラー')
  パブリックエラー() { 
      this.el.nativeElement.style.display = 'none';
  } 

テスト方法は

?

テストのアイデア:

• イメージの読み込み中にエラーが発生するまで、イメージはトリガーされません。その後、
• コマンドはコンポーネントのイメージ要素に関連付けられます。 dispath

#1 を使用します。カスタムコンポーネントを追加し、カスタムディレクティブ @Component({
  テンプレート: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
クラス TestHostComponent {

}

#2. カスタム コンポーネント ビューをインスタンス化し、errorEvent を送出する
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        宣言: [
            テストホストコンポーネント、
            画像URLエラー
        】
    });
}));

beforeEach(() => { 
 フィクスチャ = TestBed.createComponent(TestHostComponent); 
 コンポーネント = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('数字のみを許可する必要があります', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //イベントをディスパッチするだけで、この時点で error() メソッドが実行されます});

angular の public 修飾子

、private 修飾子、および protected 修飾子をうまく活用します。

.ts はアクセスできますが、プライベートで保護された変更は許可されていません。

パブリックを

• 使用してください --- 難易度 *
• 各メソッドをテストする予定がない場合は、その後、データを整理し、入口を呼び出し、統合テストの難易度 ***

テスト

のクリック イベントに合格できます。クリック イベントのトリガーには、直接 JS でクリックを呼び出すことや、マウスを模倣してクリック イベントをトリガーすることが含まれます。

#xx.component.ts
@成分（{
 selecotr: 'ダッシュボードヒーローリスト'
})
クラス DashBoardHeroComponent {
    パブリックカード = [{
        クリック: () => {
            ……
        }
    }]
}
#html
<dashboard-hero-list [cards]="cards" class="card">
</dashboard-hero-list>`

テスト方法は?

テストのアイデア:

• コンポーネントを直接テストし、ホストから返されたクリック イベントを含むオブジェクトのコレクションを使用せず
• 、click を 1 つずつ呼び出してコード カバレッジを向上させます

('click を呼び出すと正しいデータが取得されるはずです'、 () => {
    const カード = コンポーネント.カード;
    カード?.forEach(card => {
        if(カード.クリック){
            Card.click(new Event('click'));
        }
    });
    Expect(cards?.length).toBe(1);

アイデア

1:

し

• てテストする必要があるコンポーネントをラップし
、その
• コンポーネント
• にバインドされている click 要素を検索します。

アイデア 2:

• テスト

• し、

• fixture.nativeElement.querySelector('.card') を使用してバインドされた click 要素を検索します

• 。