站長資訊網Angular怎么進行單元測試？下面本篇給大家整理分享4個Angular單元測試編寫的高階技巧，希望對大家有所幫助！
測試思路:
- 1.能單元測試，盡量單元測試優先
- 2.不能單元測試，通過封裝一層進行測試，譬如把測試的封裝到一個組件，但又有弱于集成測試
- 3.集成測試
- 4.E2E 測試
測試難度，也是逐漸加大的，耗費的時間也是越多的。那么想測試的簡單，那么在開發的時候，就有意識的，去把思路理清楚，code寫的簡單高效些~。
本文使用的測試技術棧：Angular12 +Jasmine, 雖然其他測試技術語法不同，但是整體思路差不多。【相關教程推薦：《angular教程》】
Tips: Jasmine 測試用例判定，方法有哪些，可以在這里找到，戳我
單元測試
其中component，默認是Angular使用以下語法創建的待測試對象的instance
beforeEach(() => { fixture = TestBed.createComponent(BannerComponent); component = fixture.componentInstance; fixture.detectChanges(); });
函數測試
1.函數調用，且沒有返回值
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(); })
結構指令HostListener測試
結構指令，常用語隱藏、顯示、for循環展示這類功能
# code @Directive({ selector: '[ImageURlError]' }) export class ImageUrlErrorDirective implements OnChanges { constructor(private el: ElementRef) {} @HostListener('error') public error() { this.el.nativeElement.style.display = 'none'; } }
如何測試？
測試思路：
- 圖片加載錯誤，才觸發，那么想辦法觸發下錯誤即可
- 指令一般都依附在組件上使用，在組件image元素上，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 — 難度 *
- 如果不打算一個個方法的進行測試，那么可以通過組織數據，調用入口，把方法通過集成測試 — 難度 ***
測試click 事件
click事件的觸發，有直接js調用click，也有模仿鼠標觸發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事件的對象集合，逐個調用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元素;
- 元素上，觸發dispatchEvent，即可 ,
思路二：
-
直接測試組件，不利用Host
-
然后利用 fixture.nativeElement.querySelector('.card')，找到綁定click元素;
-
使用 triggerEventHandler('click');
