Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
前言
之前對(duì)單元測(cè)試的認(rèn)知就是復(fù)雜,難搞,思路有,就是不知道怎樣去實(shí)現(xiàn),最近一次開(kāi)會(huì)解決問(wèn)題的過(guò)程中,發(fā)現(xiàn)原來(lái)單元測(cè)試可以十分簡(jiǎn)單,簡(jiǎn)單到幾行代碼就能實(shí)現(xiàn)。
示例
下面代碼實(shí)現(xiàn)的功能是,判斷課程所在的學(xué)院<College> college是否在用戶(hù)所有的學(xué)院Array<College> colleges中,如果存在,變量show賦值為true,不存在,則賦值為false,如果college為undefined或者null,也賦值為true。
/** * 觀察課程學(xué)院是否與用戶(hù)所在學(xué)院相同 * @param college 課程學(xué)院 * @param colleges 用戶(hù)學(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; }
要對(duì)該方法進(jìn)行單元測(cè)試,思路就是傳值進(jìn)去進(jìn)行對(duì)比,重點(diǎn)在于傳值,用之前的思路就是,定義college和colleges,然后進(jìn)行對(duì)比:
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); });
通過(guò)控制臺(tái)的信息可以發(fā)現(xiàn),無(wú)論是null還是undefined,都是可以通過(guò)的,后來(lái)老師提供了新的思路,既然要測(cè)試的是功能,就不要管怎么傳的,可以不用傳對(duì)象,然后就有了下面的寫(xiě)法:
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)去了,方法也能判斷了,比起之前的寫(xiě)法簡(jiǎn)直要好太多,而且對(duì)于一些方法來(lái)說(shuō),這種方法省力不少,尤其是對(duì)多種情況進(jìn)行測(cè)試,要進(jìn)行多個(gè)變量的定義:
/** * 判斷查詢(xún)的關(guān)鍵字是否課程代碼或名稱(chēng)中 * @param course 課程 * @param searchKey 查詢(xún)關(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; }
該方法實(shí)現(xiàn)的是通過(guò)課程名稱(chēng)或代碼進(jìn)行查詢(xún)操作,通過(guò)對(duì)查詢(xún)關(guān)鍵字和課程名稱(chēng)或代碼進(jìn)行對(duì)比實(shí)現(xiàn)該功能,要考慮以下幾種情況:查詢(xún)關(guān)鍵字為null、查詢(xún)關(guān)鍵字與課程名稱(chēng)或代碼部分完全不相同、查詢(xún)關(guān)鍵字與課程名稱(chēng)或代碼部分相同、查詢(xún)關(guān)鍵字與課程名稱(chēng)或代碼完全相同、查詢(xún)關(guān)鍵字包含課程名稱(chēng)或代碼。
如果用舊思想進(jìn)行測(cè)試:
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è)想一下自己看到他人寫(xiě)的測(cè)試代碼,如果所需要的變量很少,courseOne等等能滿足需求,看著也沒(méi)問(wèn)題,但是當(dāng)變量很多的時(shí)候,估計(jì)寫(xiě)測(cè)試的都會(huì)忘記每個(gè)變量的屬性值,更不用說(shuō)看的人,而且,使用下面的方法寫(xiě)的代碼,所需字段以及字段值一目了然,一行代碼就能體現(xiàn)所有信息,看著也賞心悅目。
總結(jié)
簡(jiǎn)單的單元測(cè)試寫(xiě)起來(lái)真的要簡(jiǎn)單很多,而且感覺(jué)比之前的要優(yōu)雅很多,看起來(lái)真的挺整潔的,整整齊齊的看著很舒服,感謝潘老師的指導(dǎo),也感謝小伙伴們給予的幫助。
- Angular性能優(yōu)化之第三方組件和懶加載技術(shù)
- Angular框架詳解之視圖抽象定義
- AngularJS 中括號(hào)的作用詳解
- Angular短信模板校驗(yàn)代碼
- 關(guān)于angular引入ng-zorro的問(wèn)題淺析
- Angular+Ionic使用queryParams實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)傳值的方法
- AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
- Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼
- 淺談Angular的12個(gè)經(jīng)典問(wèn)題
相關(guān)文章
angular將html代碼輸出為內(nèi)容的實(shí)例
今天小編就為大家分享一篇angular將html代碼輸出為內(nèi)容的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09AngularJs篇:使用AngularJs打造一個(gè)簡(jiǎn)易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼
本篇文章主要介紹了AngularJs篇:使用AngularJs打造一個(gè)簡(jiǎn)易權(quán)限系統(tǒng)的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2016-12-12Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解
這篇文章主要為大家介紹了Angular的FormArray和模態(tài)框結(jié)合使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11詳解Angular Forms中自定義ngModel綁定值的方式
在Angular應(yīng)用中有兩種方式來(lái)實(shí)現(xiàn)表單綁定,但是對(duì)于一些特殊的表單控件沒(méi)法實(shí)現(xiàn),這篇文章主要介紹了詳解Angular Forms中自定義ngModel綁定值的方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件
這篇文章主要為大家介紹了Angular懶加載動(dòng)態(tài)創(chuàng)建顯示該模塊下聲明的組件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05詳解angular部署到iis出現(xiàn)404解決方案
這篇文章主要介紹了詳解angular部署到iis出現(xiàn)404解決方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08