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

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

#テストのアイデア:

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

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

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

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()方法就会被执行到
});

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);
});