聊聊Angular中的單元測試

本篇文章和大家聊聊Angular中的單元測試，透過範例介紹一下單元測試工具（Karma Jasmine）的使用方法。

做了多年的Angular的前端開發，一直沒有膽量對前端進行單元測試，原因一是前端是跟用戶打交道，不好測試，原因二是項目的時間壓力沒有精力弄單元測試。這也就導致前端開發時，業務一旦改變，就要人肉來測試。費時又沒有技術含量，直接讓我懷疑人生。

最近得空，索性就把Angular的單元測試研究了一把。 Angular其實自己有單元測試的工具：Karma Jasmine：

• Karma：Karma是為測試JavaScript程式碼而生的自動化測試管理工具，可監控檔案的變化，自動執行測試。
• Jasmine：用來寫Javascript測試的的框架。

【相關教學推薦：《angular教學》】

#第一個測試案例

當創建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有什么区别呢？

二者都能测试的：

• Pipe

• Servcie

• Component

StoryBook不能测、Karma + Jasmine可测试的：

• Router

• Component的界面元素属性、Input、Output

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

• Component交互测试

• 组件管理

• 编写组件文档

从上面可以看出，Storybook进行的是黑盒测试，Karma + Jasmine则注重白盒测试，二者侧重点不同，没有谁强谁弱之分，只有扬长避短，利用好各自的优点，方可让前端测试更完美，将前端bug扼杀在开发阶段。

一些前端测试感悟

虽然前端开发的工作比较繁琐，也是客户Challenge最多的地方，但是不代表前端只有页面，没有架构。以前之所以觉得Angular的单元测试难做，就是觉得都是页面的东西怎么测？其实，终其原因，还是没有架构，所有的代码都集中在Component中，为了赶进度，通过拷贝、粘贴，怎么快怎么来。结果，悲剧了，后期代码维护困难，一点改动就需要人肉测试。

费时不说，开发人员也没有成长。接触Angular前端测试后，我的脑海里又出现了“测试驱动开发”。一段好代码，前提是要易于测试，不管这段代码是用于前端还是后端。 前端开发人员不仅仅要关注页面的易用性、美观性，同样需要关注前端的架构，一个易于测试的架构才是最好的“武器”。

更多编程相关知识，请访问：编程入门！！

以上是聊聊Angular中的單元測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！