Angular怎么進(jìn)行單元測試？下面本篇給大家整理分享4個Angular單元測試編寫的高階技巧，希望對大家有所幫助！

測試思路:

• 1.能單元測試，盡量單元測試優(yōu)先
• 2.不能單元測試，通過封裝一層進(jìn)行測試，譬如把測試的封裝到一個組件，但又有弱于集成測試
• 3.集成測試
• 4.E2E 測試

測試難度，也是逐漸加大的，耗費(fèi)的時間也是越多的。那么想測試的簡單，那么在開發(fā)的時候，就有意識的，去把思路理清楚，code寫的簡單高效些~。

本文使用的測試技術(shù)棧：Angular12 +Jasmine, 雖然其他測試技術(shù)語法不同，但是整體思路差不多。【相關(guān)教程推薦：《angular教程》】

Tips: Jasmine 測試用例判定，方法有哪些，可以在這里找到，戳我

單元測試

其中component，默認(rèn)是Angular使用以下語法創(chuàng)建的待測試對象的instance

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

函數(shù)測試

1.函數(shù)調(diào)用，且沒有返回值

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

請問如何測試？

反例： 直接測試返回值undefined

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

結(jié)構(gòu)指令HostListener測試

結(jié)構(gòu)指令，常用語隱藏、顯示、for循環(huán)展示這類功能

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

如何測試？

測試思路：

• 圖片加載錯誤，才觸發(fā)，那么想辦法觸發(fā)下錯誤即可
• 指令一般都依附在組件上使用，在組件image元素上，dispath下errorEvent即可

#1.添加一個自定義組件, 并添加上自定義指令 @Component({   template: `<div>     <image src="https://xxx.ss.png" ImageURlError></image>   </div>` }) class TestHostComponent {  }  #2.把自定義組件視圖實(shí)例化，并派發(fā)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); //派發(fā)事件即可，此時error()方法就會被執(zhí)行到 });

善用 public,private,protected 修飾符

angular中public修飾的，spec.ts是可以訪問到；但是 private，protected修飾的，則不可以；

敲黑板

• 如果打算走單元測試，一個個方法測試，那么請合理使用public — 難度 *
• 如果不打算一個個方法的進(jìn)行測試，那么可以通過組織數(shù)據(jù)，調(diào)用入口，把方法通過集成測試 — 難度 ***

測試click 事件

click事件的觸發(fā)，有直接js調(diào)用click，也有模仿鼠標(biāo)觸發(fā)click事件。

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

如何測試？

測試思路：

• 直接測試組件，不利用Host
• 利用code返回的包含click事件的對象集合，逐個調(diào)用click ，這樣code coverage 會得到提高

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

其余 click 參考思路：

思路一：

• 利用TestHostComponent，包裹一下需要測試的組件
• 然后利用 fixture.nativeElement.querySelector('.card')找到組件上綁定click元素;
• 元素上，觸發(fā)dispatchEvent，即可 ,

思路二：

• 直接測試組件，不利用Host

• 然后利用 fixture.nativeElement.querySelector('.card')，找到綁定click元素;

• 使用 triggerEventHandler('click');