Angular單元測試淺說

原文連接

作了多年的Angular的前端開發，一直沒有膽量對前端進行單元測試，緣由一是前端是跟用戶打交道，很差測試，緣由二是項目的時間壓力沒有精力弄單元測試。這也就致使在前端開發時，業務一旦改變，就要人肉進行測試。費時又沒有技術含量，直接讓我懷疑人生。最近得空，索性就把Angular的單元測試研究了一把。Angular其實本身有單元測試的工具：Karma + Jasmine：

• Karma：Karma是爲測試JavaScript代碼而生的自動化測試管理工具，可監控文件的變化，自動執行測試。
• Jasmine：用來編寫Javascript測試的的框架。

第一個測試用例

當建立Angular應用後，在package.json文件中已經添加了Karma和Jasmine的依賴性：

"karma": "~1.7.1",  
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
複製代碼

作事後端測試的同行，估計已經知道這些組件的分工了：

• karma：Karma核心組件
• karma-chrome-launcher：Chrome發射器，測試會在Chrome上執行
• karma-coverage-istanbul-reporter：coverage報告
• karma-jasmine：Jasmine核心組件
• karma-jasmine-html-reporter：Html測試報告

在src目錄下會看到名爲：karma.conf.js、test.ts的兩個文件。

karma.conf.js：Karma的配置文件，其中須要重點關注的配置有：

• frameworks：使用的測試框架，這裏使用Jasmine

• port：測試使用的端口

• autoWatch：是否自動監測測試代碼的改變，自動執行測試

• plugins：測試使用到的插件，與package.json文件保持一致

• browsers：測試運行使用的瀏覽器，這裏使用Chrome，若是你須要使用其餘瀏覽器，須要經過npm安裝瀏覽器發射器，並在plugins和這裏設置，例如使用Safari：

  npm install karma-safari-launcher --save-dev
  
  plugins: [
      require('karma-safari-launcher')
  ]
  browsers: ['Safari'],
  複製代碼

test.ts：測試入口文件，其中初始化了測試環境以及指定全部測試文件

在app目錄下，還會找到一個名爲app.component.spec.ts的文件，這就是一個Jasmine的測試，內容以下：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
//測試入口，參數爲測試名、方法
describe('AppComponent', () => {
  //每一個測試用的Setup
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent  
      ],
    }).compileComponents();
  }));

  //測試用例
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'test-demo'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    //斷言，指望值是否知足要求
    expect(app.title).toEqual('test-demo');
  }));

  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    //經過querySelector獲取頁面元素
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to test-demo!');
  }));

  //每一個測試用例的TearDown
  afterEach(function() {
    //清除測試數據
  });
});

複製代碼

上述代碼使用了Jasmine的語法，關於Jasmine的更詳細介紹，參見JavaScript 單元測試框架：Jasmine 初探。這裏不贅述。

執行: ng test，就會看到上述文件的測試報告：

另外在測試報告中還可單擊某個測試單獨執行，報告以下：

填坑

對於Pipe、Service、Router等組件的測試，可參見Angular文檔，這裏重點講述下在測試中遇到的各類坑。

No provider ***

測試時，若是被測組件須要其餘第三方組件、servcie或pipe，沒有被引入，就會出現No provider 的錯誤，解決方法很簡單，在beforeEach中使用imports或provider引入便可：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        //這裏聲明
      ],
      imports: [
        //這裏引入
      ],
      providers: [
        //這裏引入
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
      .compileComponents();
  }));
複製代碼

請求超時

在開發時，異步請求因爲網絡緣由常會出現TimeOut的錯誤，一般的解決方法是設置TimeOut時間的上限，並對TimeOut錯誤做出人性化的提示。在測試時也一樣會發生TimeOut的錯誤：

解決辦法是能夠在某個測試用例中設置TimeOut的時間：

it('#loadBalance for BCT should return real value', async () => {
  jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
  ...
})
複製代碼

或者在BeforeEach中統一設置TimeOut時間：

describe("my async specs", function() {
    var originalTimeout;
    beforeEach(function() {
      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
    });

    ...

    afterEach(function() {
      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
    });
  });
複製代碼

定義測試Environment

Angular缺省針對開發和產品提供了不一樣的Environment，對於測試，咱們一樣能夠設置Enviroment。

在src/environment下建立environment.test.ts，並修改angular.json內容：

"architect":{
    "test":{
        ...
        "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            }
          }
    }
}
複製代碼

修改package.json文件：

"scripts": {
  "test": "ng test --configuration=test",
}
複製代碼

這樣執行以下命令：

npm test
//或者
ng test --configuration=test
複製代碼

執行測試時，使用的就是environment.test.ts文件中配置的內容。

測試數據回滾

作過Grails開發的夥計應該知道，單元測試、集成測試後，數據庫中的測試數據會經過配置文件清除掉。在前端測試中，測試數據須要自行調用清除代碼，對於使用LocalStorage、SessionStorage保持的數據亦是如此，方法很簡單，在afterEach添加清除代碼：

describe("my async specs", function() {
  
  afterEach(function() {
    //在這裏清除測試數據
  });
});
複製代碼

與StoryBook的配合

先前我發佈了一篇題爲《StoryBook實戰》的文章，StoryBook也是用來測試組件的，它與Karma+Jasmine有什麼區別呢？

兩者都能測試的：

1. Pipe
2. Servcie
3. Component

StoryBook不能測、Karma + Jasmine可測試的：

1. Router
2. Component的界面元素屬性、Input、Output

Karma + Jasmine不能作的，StoryBook能作的：

1. Component交互測試
2. 組件管理
3. 編寫組件文檔

從上面能夠看出，Storybook進行的是黑盒測試，Karma + Jasmine則注重白盒測試，兩者側重點不一樣，沒有誰強誰弱之分，只有揚長避短，利用好各自的優勢，方可以讓前端測試更完美，將前端bug扼殺在開發階段。

一些前端測試感悟

雖然前端開發的工做比較繁瑣，也是客戶Challenge最多的地方，可是不表明前端只有頁面，沒有架構。之前之因此以爲Angular的單元測試難作，就是以爲都是頁面的東西怎麼測？其實，終其緣由，仍是沒有架構，全部的代碼都集中在Component中，爲了趕進度，經過拷貝、粘貼，怎麼快怎麼來。結果，悲劇了，後期代碼維護困難，一點改動就須要人肉測試。費時不說，開發人員也沒有成長。接觸Angular前端測試後，個人腦海裏又出現了「測試驅動開發」。一段好代碼，前提是要易於測試，無論這段代碼是用於前端仍是後端。 前端開發人員不只僅要關注頁面的易用性、美觀性，一樣須要關注前端的架構，一個易於測試的架構纔是最好的「武器」。

參考文檔

1. StoryBook實戰
2. JavaScript 單元測試框架：Jasmine 初探
3. Karma簡介
4. Angular文檔——測試篇