前言

之前對單元測試的認知就是複雜，難搞，思路有，就是不知道怎樣去實現，最近一次開會解決問題的過程中，發現原來單元測試可以十分簡單，簡單到幾行程式碼就能實現。

示例

下面程式碼實現的功能是，判斷課程所在的學院<College> college是否在使用者所有的學院Array<College> colleges中，如果存在，變數show賦值為true，不存在，則賦值為false，如果college為undefined或者null，也賦值為true。

/**
 * 觀察課程學院是否與使用者所在學院相同
 * @param college 課程學院
 * @param colleges 使用者學院
 */
 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;
 }

要對該方法進行單元測試，思路就是傳值進去進行對比，重點在於傳值，用之前的思路就是，定義college和colleges,然後進行對比：

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

通過控制檯的資訊可以發現，無論是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: 3},{id: 1}])).toBe(true);
 });

值傳進去了，方法也能判斷了，比起之前的寫法簡直要好太多，而且對於一些方法來說，這種方法省力不少，尤其是對多種情況進行測試，要進行多個變數的定義：

/**
 * 判斷查詢的關鍵字是否課程程式碼或名稱中
 * @param course 課程
 * @param searchKey 查詢關鍵字
 */
 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;
 }

該方法實現的是通過課程名稱或程式碼進行查詢操作，通過對查詢關鍵字和課程名稱或程式碼進行對比實現該功能，要考慮以下幾種情況：查詢關鍵字為null、查詢關鍵字與課程名稱或程式碼部分完全不相同、查詢關鍵字與課程名稱或程式碼部分相同、查詢關鍵字與課程名稱或程式碼完全相同、查詢關鍵字包含課程名稱或程式碼。

如果用舊思想進行測試：

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,'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: '','')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222','1111')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '222','22')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222','222')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222','2222')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '',name: '222'},'')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '','1111')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '','22')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '','222')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '','2222')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '222','2222')).toBe(false);
 });

設想一下自己看到他人寫的測試程式碼，如果所需要的變數很少，courseOne等等能滿足需求，看著也沒問題，但是當變數很多的時候，估計寫測試的都會忘記每個變數的屬性值，更不用說看的人，而且，使用下面的方法寫的程式碼，所需欄位以及欄位值一目瞭然，一行程式碼就能體現所有資訊，看著也賞心悅目。

總結

簡單的單元測試寫起來真的要簡單很多，而且感覺比之前的要優雅很多，看起來真的挺整潔的，整整齊齊的看著很舒服，感謝潘老師的指導，也感謝小夥伴們給予的幫助。