快捷導(dǎo)航

Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例

更新時(shí)間：2020年08月16日 14:11:29 作者：錦城

這篇文章主要給大家介紹了關(guān)于Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法，文中僅用了幾行代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

之前對(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是否在用戶所有的學(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;
 }

要對(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è)變量的定義：

/**
 * 判斷查詢的關(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;
 }

該方法實(shí)現(xiàn)的是通過(guò)課程名稱或代碼進(jìn)行查詢操作，通過(guò)對(duì)查詢關(guān)鍵字和課程名稱或代碼進(jìn)行對(duì)比實(shí)現(xiàn)該功能，要考慮以下幾種情況：查詢關(guān)鍵字為null、查詢關(guān)鍵字與課程名稱或代碼部分完全不相同、查詢關(guān)鍵字與課程名稱或代碼部分相同、查詢關(guān)鍵字與課程名稱或代碼完全相同、查詢關(guān)鍵字包含課程名稱或代碼。

如果用舊思想進(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)，也感謝小伙伴們給予的幫助。

您可能感興趣的文章: