Angular進(jìn)行簡單單元測試的實現(xiàn)方法實例
更新時間：2020年08月16日 14:11:29 作者：錦城
這篇文章主要給大家介紹了關(guān)于Angular進(jìn)行簡單單元測試的實現(xiàn)方法，文中僅用了幾行代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
前言
之前對單元測試的認(rèn)知就是復(fù)雜，難搞，思路有，就是不知道怎樣去實現(xiàn)，最近一次開會解決問題的過程中，發(fā)現(xiàn)原來單元測試可以十分簡單，簡單到幾行代碼就能實現(xiàn)。
示例
下面代碼實現(xiàn)的功能是，判斷課程所在的學(xué)院<College> college是否在用戶所有的學(xué)院Array<College> colleges中，如果存在，變量show賦值為true，不存在，則賦值為false，如果college為undefined或者null，也賦值為true。
/**
* 觀察課程學(xué)院是否與用戶所在學(xué)院相同
* @param college 課程學(xué)院
* @param colleges 用戶學(xué)院
*/
public whetherShow(college: { id: number }, colleges: Array<{ id: number }>) {
Assert.notNull(college, 'college未定義');
const collegeId = college.id;
let show = colleges != null && colleges && colleges.length > 0 ? false : true;
if (colleges != null) {
colleges.forEach(selectCollege => {
if (collegeId === selectCollege.id) {
show = true;
}
});
}
return show;
}
要對該方法進(jìn)行單元測試，思路就是傳值進(jìn)去進(jìn)行對比，重點在于傳值，用之前的思路就是，定義college和colleges,然后進(jìn)行對比：
it('is show', () => {
const course = new Course({id: 1})
const collegeOne = new College({id: 1});
const collegeTwo = new College({id: 2});
component.colleges = [];
expect(component.whetherShow(course,component.colleges)).toBe(true);
component.colleges = undefined;
expect(component.whetherShow(course,component.colleges)).toBe(true);
component.colleges = [collegeOne];
expect(component.whetherShow(course,component.colleges)).toBe(true);
component.colleges = [collegeTwo];
expect(component.whetherShow(course,component.colleges)).toBe(false);
component.colleges = [collegeOne, collegeTwo];
expect(component.whetherShow(course,component.colleges)).toBe(true);
});
通過控制臺的信息可以發(fā)現(xiàn)，無論是null還是undefined，都是可以通過的，后來老師提供了新的思路，既然要測試的是功能，就不要管怎么傳的，可以不用傳對象，然后就有了下面的寫法：
it('is show', () => {
expect(component.whetherShow({id: 1}, null)).toBe(true);
expect(component.whetherShow({id: 1}, undefined)).toBe(true);
expect(component.whetherShow({id: 1}, [])).toBe(true);
expect(component.whetherShow({id: 1}, [{id: 2}, {id: 3}])).toBe(false);
expect(component.whetherShow({id: 1}, [{id: 1}, {id: 2}, {id: 3}])).toBe(true);
expect(component.whetherShow({id: 1}, [{id: 2}, {id: 3}, {id: 1}])).toBe(true);
});
值傳進(jìn)去了，方法也能判斷了，比起之前的寫法簡直要好太多，而且對于一些方法來說，這種方法省力不少，尤其是對多種情況進(jìn)行測試，要進(jìn)行多個變量的定義：
/**
* 判斷查詢的關(guān)鍵字是否課程代碼或名稱中
* @param course 課程
* @param searchKey 查詢關(guān)鍵字
*/
public isCodeOrNameContainsSearchKey(course: { code: string, name: string }, searchKey: string) {
return searchKey === null
|| course.code.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1
|| course.name.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1;
}
該方法實現(xiàn)的是通過課程名稱或代碼進(jìn)行查詢操作，通過對查詢關(guān)鍵字和課程名稱或代碼進(jìn)行對比實現(xiàn)該功能，要考慮以下幾種情況：查詢關(guān)鍵字為null、查詢關(guān)鍵字與課程名稱或代碼部分完全不相同、查詢關(guān)鍵字與課程名稱或代碼部分相同、查詢關(guān)鍵字與課程名稱或代碼完全相同、查詢關(guān)鍵字包含課程名稱或代碼。
如果用舊思想進(jìn)行測試：
it('isCodeOrNameContainsSearchKey', () => {
const courseOne = new Course({code: '', name: ''});
const courseTwo = new Course({code: '222', name: ''});
const courseThree = new Course({code: '', name: '222'});
const courseFour = new Course({code: '222', name: '222'});
expect(component.isCodeOrNameContainsSearchKey(courseOne, null));
expect(component.isCodeOrNameContainsSearchKey(courseOne, ''));
expect(component.isCodeOrNameContainsSearchKey(courseTwo, ''));
expect(component.isCodeOrNameContainsSearchKey(courseTwo, '1111'));
expect(component.isCodeOrNameContainsSearchKey(courseTwo, '22'));
expect(component.isCodeOrNameContainsSearchKey(courseTwo, '222'));
expect(component.isCodeOrNameContainsSearchKey(courseTwo, '2222'));
expect(component.isCodeOrNameContainsSearchKey(courseThree, ''));
expect(component.isCodeOrNameContainsSearchKey(courseThree, '1111'));
expect(component.isCodeOrNameContainsSearchKey(courseThree, '22'));
expect(component.isCodeOrNameContainsSearchKey(courseThree, '222'));
expect(component.isCodeOrNameContainsSearchKey(courseThree, '2222'));
expect(component.isCodeOrNameContainsSearchKey(courseFour, ''));
expect(component.isCodeOrNameContainsSearchKey(courseFour, '1111'));
expect(component.isCodeOrNameContainsSearchKey(courseFour, '22'));
expect(component.isCodeOrNameContainsSearchKey(courseFour, '222'));
expect(component.isCodeOrNameContainsSearchKey(courseFour, '2222'));
});
如果使用新思想：
it('isCodeOrNameContainsSearchKey', () => {
expect(component.isCodeOrNameContainsSearchKey({code: '', name: ''}, null)).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: ''}, '')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '1111')).toBe(false);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '22')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '222')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '2222')).toBe(false);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '1111')).toBe(false);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '22')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '222')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '2222')).toBe(false);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '1111')).toBe(false);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '22')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '222')).toBe(true);
expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '2222')).toBe(false);
});
設(shè)想一下自己看到他人寫的測試代碼，如果所需要的變量很少，courseOne等等能滿足需求，看著也沒問題，但是當(dāng)變量很多的時候，估計寫測試的都會忘記每個變量的屬性值，更不用說看的人，而且，使用下面的方法寫的代碼，所需字段以及字段值一目了然，一行代碼就能體現(xiàn)所有信息，看著也賞心悅目。
總結(jié)
簡單的單元測試寫起來真的要簡單很多，而且感覺比之前的要優(yōu)雅很多，看起來真的挺整潔的，整整齊齊的看著很舒服，感謝潘老師的指導(dǎo)，也感謝小伙伴們給予的幫助。
相關(guān)文章
Directive的概念在Angular 1.x就存在了，我對它的認(rèn)識比較模糊，所以直接通過一些例子來說明。Angular提供的內(nèi)置執(zhí)行有很多，這次使用兩個：ngFor、ngIf。2016-08-08
這篇文章主要介紹了AngularJS手動表單驗證的相關(guān)資料，AngularJS的表單驗證大致有兩種，一種是手動驗證，一種是自動驗證，本文重點介紹AngularJS手動表單驗證，感興趣的小伙伴們可以參考一下2016-02-02
angularJS?實現(xiàn)長按不觸發(fā)點擊事件可以復(fù)制剪貼方法
這篇文章主要為大家介紹了angularJS實現(xiàn)長按不觸發(fā)點擊事件可以復(fù)制剪貼方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法，感興趣的小伙伴們可以參考一下2015-12-12
Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用
這篇文章主要為大家介紹了Angular中AuthGuard路由守衛(wèi)的創(chuàng)建使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
Angular7創(chuàng)建項目、組件、服務(wù)以及服務(wù)的使用
這篇文章主要介紹了Angular7創(chuàng)建項目、組件、服務(wù)以及服務(wù)的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了Angular實現(xiàn)購物車計算示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了AngularJS中table表格基本操作,涉及AngularJS針對table表格元素與屬性的相關(guān)動態(tài)操作技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了在AngularJS中使用AJAX的方法,示例非常簡單,并不能完全體現(xiàn)出AJAX動態(tài)刷新的強(qiáng)大功能,需要的朋友可以參考下2015-06-06