Angular 進行簡單單元測試

時間 2020-08-17

原文原文鏈接

前言

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

示例

下面代碼實現的功能是，判斷課程所在的學院<College> college是否在用戶全部的學院Array<College> colleges中，若是存在，變量show賦值爲true，不存在，則賦值爲false，若是college爲undefined或者null，也賦值爲true。github

/**
   * 觀察課程學院是否與用戶所在學院相同
   * @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,而後進行對比：segmentfault

it('is show', () => {
    const college = new College({id: 1})
    const collegeOne  = new College({id: 1});
    const collegeTwo = new College({id: 2});
    component.colleges = [];
    expect(component.whetherShow(college,component.colleges)).toBe(true);
    component.colleges = undefined;
    expect(component.whetherShow(college,component.colleges)).toBe(true);
    component.colleges = [collegeOne];
    expect(component.whetherShow(college,component.colleges)).toBe(true);
    component.colleges = [collegeTwo];
    expect(component.whetherShow(college,component.colleges)).toBe(false);
    component.colleges = [collegeOne, collegeTwo];
    expect(component.whetherShow(college,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: 2}, {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、查詢關鍵字與課程名稱或代碼部分徹底不相同、查詢關鍵字與課程名稱或代碼部分相同、查詢關鍵字與課程名稱或代碼徹底相同、查詢關鍵字包含課程名稱或代碼。
若是用舊思想進行測試：spa

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

若是使用新思想：3d

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

設想一下本身看到他人寫的測試代碼，若是所須要的變量不多，courseOne等等能知足需求，看着也沒問題，可是當變量不少的時候，估計寫測試的都會忘記每一個變量的屬性值，更不用說看的人，並且，使用下面的方法寫的代碼，所需字段以及字段值一目瞭然，一行代碼就能體現全部信息，看着也賞心悅目。code