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

Angular単体テストを実行するにはどうすればよいですか?この記事では、Angular 単体テストを作成するための 4 つの高度なテクニックを紹介します。

#テストのアイデア:

1. 単体テストができる場合は、単体テストを優先するようにしてください
• 2 .単体テストはできません。テストをコンポーネントにカプセル化するなど、層をカプセル化してテストを実行しますが、統合テストよりも弱いです
• #3.統合テスト
• 4.E2E テスト

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

この記事で使用されているテスト テクノロジ スタック:

Angular12

Jasmine. 他のテスト テクノロジの構文は異なりますが、全体的な考え方は似ています。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

ヒント: Jasmine テスト ケースの決定、方法は何ですか。ここで見つけることができます。

Poke me

単体テスト

#コンポーネントは、デフォルトでは、次の構文を使用して Angular によって作成されたテスト対象のオブジェクトのインスタンスです

beforeEach(() => { 
  fixture = TestBed.createComponent(BannerComponent); 
  component = fixture.componentInstance; 
  fixture.detectChanges(); 
});

関数テスト

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

function test(index:number ,fn:Function){
 if(fn){
     fn(index);
 }
}

テスト方法?

カウンターの例: 戻り値を直接テストする unknown

  const res = component.test(1,() => {}）);
  expect(res).tobeUndefined();

推奨プラクティス:

 # 利用Jasmine
 it('should get correct data when call test',() =>{
     const param = {
       fn：() => {}
    }
   spyOn(param,'fn')
   component.test(1,param.fn);
   expect(param.fn).toHaveBeenCalled();
 })

構造命令 HostListener test

構造命令、一般的に使用される単語、hidden、show、for ループなどの関数が表示されます

 # code
 @Directive({ selector: '[ImageURlError]' })
export class ImageUrlErrorDirective implements OnChanges {
  constructor(private el: ElementRef) {}
  
  @HostListener('error')
  public error() { 
      this.el.nativeElement.style.display = 'none';
  } 
}

どうやってテストしますか?

#テストのアイデア:

#読み込み中にエラーが発生した場合にのみ画像がトリガーされ、エラーをトリガーする方法を見つけます

コマンドは通常、「コンポーネントで使用する」に添付されます。コンポーネントの画像要素では、dispath の下で errorEvent を使用するだけです

#1.添加一个自定义组件, 并添加上自定义指令
@Component({
  template: `<div>
    <image src="https://xxx.ss.png" ImageURlError></image>
  </div>`
})
class TestHostComponent {

}

#2.把自定义组件视图实例化，并派发errorEvent
beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
        declarations: [
            TestHostComponent,
            ImageURlError
        ]
    });
}));

beforeEach(() => { 
 fixture = TestBed.createComponent(TestHostComponent); 
 component = fixture.componentInstance; 
 fixture.detectChanges();
});
  
it('should allow numbers only', () => {
    const event = new ErrorEvent('error', {} as any);
    const image = fixture.debugElement.query(By.directive(ImageURlError));
    image.nativeElement.dispatchEvent(event); //派发事件即可，此时error()方法就会被执行到
});

#public、private、protected 修飾子を上手に活用しましょう

angular public によって変更された場合、spec.ts にアクセスできますが、private または protected によって変更された場合、アクセスできません。

黒板をノックします。

単体テストを行って各メソッドをテストする予定がある場合は、適切に public を使用してください --- 難易度 *

予定がない場合各メソッドをテストすると、データを整理し、入り口を呼び出し、メソッドを統合できます。 テスト -- 難易度***

• テスト クリック イベント

クリック イベントは、クリックへの直接の JS 呼び出しによって、またはマウスを模倣してクリック イベントをトリガーすることによってトリガーされます。

# xx.component.ts
@Component({
 selecotr: 'dashboard-hero-list'
})
class DashBoardHeroComponent {
    public cards = [{
        click: () => {
            .....
        }
    }]
}
# html
<dashboard-hero-list [cards]="cards"  class="card">
</dashboard-hero-list>`

テスト方法は?

テストのアイデア:

ホストを使用せずにコンポーネントを直接テストします。

コードによって返されるクリック イベントを含むオブジェクトのコレクションを使用し、クリック 1 つずつ呼び出して、コード カバレッジを改善します。

it('should get correct data when call click',() => {
    const cards = component.cards;
    cards?.forEach(card => {
        if(card.click){
            card.click(new Event('click'));
        }
    });
    expect(cards?.length).toBe(1);
});

• その他のクリック リファレンス アイデア:
• アイデア 1:

TestHostComponent を使用し、テストする必要があるコンポーネントをラップします

次に、fixture.nativeElement.querySelector('.card') を使用して、

# 上でコンポーネントにバインドされているクリック要素を見つけます。 ## 要素、dispatchEvent のトリガー、それだけです。

• アイデア 2:
• Host を使用せずにコンポーネントを直接テストします。

次に、fixture.nativeElement.querySelector(' .card') を使用して、バインドされたクリック要素を見つけます。

• Use
triggerEventHandler
• ('click');

• 更新 プログラミング関連の知識については、

  プログラミング ビデオをご覧ください。 ！

以上がAngular 単体テストを作成するための 4 つのヒント、ぜひご覧ください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。