所有文章，首發於CSDN-檸檬加冰部落格

測試controller和service準備工作

準備工作

專案搭建

你已經按照上一篇文章，建立了ionic-tests工程，並在工程中載入了karma測試用例，完成了專案搭建、測試工作。

開始測試

理解karma和jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does
 
 not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

jasmine是一個行為驅動開發的測試框架,不依賴任何js框架以及dom,是一個非常乾淨以及友好API的測試庫.

下面簡單的以一個例子來說明它的用法

在之前建立的controller.test.js中，增加下面的程式碼

//最簡單的karma測試
describe("A spec (with setup and tear-down)", function () {
  var foo;
  //在測試用例執行前載入
 

  beforeEach(function () {
    foo = 0;
    foo += 1;
  });
  //在測試用例執行後加載
  afterEach(function () {
    foo = 0;
  });
  //測試用例
  it("is just a function, so it can contain any code", function () {
    //expect括號中是需要測試的函式，或是變數
    //toEqual括號中是期望的函式返回值或是變數值
    expect(foo).toEqual(1);
  });
  //測試用例--單個測試用例中，可以增加多個測試項
 

  it("can have more than one expectation", function () {
    expect(foo).toEqual(1);
    expect(true).toEqual(true);
  });
});

程式碼中，基本上把jasmineAPI的一些相關屬性都做了註釋，下面對核心的功能點進行簡單的介紹：

1. 首先任何一個測試用例以describe函式來定義,它有兩引數,第一個用來描述測試大體的中心內容,第二個引數是一個函式,裡面寫一些真實的測試程式碼

2. it是用來定義單個具體測試任務,也有兩個引數,第一個用來描述測試內容,第二個引數是一個函式,裡面存放一些測試方法

3. expect主要用來計算一個變數或者一個表示式的值,然後用來跟期望的值比較或者做一些其它的事件

4. beforeEach與afterEach主要是用來在執行測試任務之前和之後做一些事情,上面的例子就是在執行之前改變變數的值,然後在執行完成之後重置變數的值

5. 最後要說的是,describe函式裡的作用域跟普通JS一樣都是可以在裡面的子函式裡訪問的,就像上面的it訪問foo變數

測試controllers裡面的變數和函式

新增程式碼

在controller.test.js中，加入下面的程式碼

//ng controller的單元測試
describe('test ng controller', function () {
  //設定測試用例的變數
  //作用域包括整個用例
  var scope;
  var chatsServiceMock;

  //載入controller
  beforeEach(module('starter.controllers'));
  //因為controller中注入了services的模組，所以也要載入services模組
  beforeEach(module('starter.services'));
  //將所需模組注入到測試用例中
  beforeEach(inject(function ($rootScope, $controller, _Chats_) {
    scope = $rootScope.$new();
    chatsServiceMock = _Chats_;
    $controller('ChatsCtrl', {$scope: scope, Chats: _Chats_});
  }));
  //以下為測試用例
  it('should have scopeMock defined', function () {
    expect(scope).toBeDefined();
  });

  it('should get an instance of ChatsService', function () {
    expect(chatsServiceMock).toBeDefined();
  });
  //測試remove功能，該功能的需求是，
  // 原有5條資訊，執行完功能函式後，
  // services儲存的資料和controller陣列中儲存的資料減1，變為4
  it('should delete a person in chats', function () {
    var chat = {
      id: 0,
      name: 'Ben Sparrow',
      lastText: 'You on your way?',
      face: 'img/ben.png'
    };
    scope.remove(chat);
    expect(chatsServiceMock.all().length).toBe(4);
    expect(scope.chats.length).toBe(4);
  });
});

具體的解釋，可以參考裡面的註釋，自我感覺寫的已經比較清楚了，有不明白的地方可以留言交流。

karma測試

karma start tests/my.conf.js

測試services

新增程式碼

describe('Chats Unit Tests', function(){
  var Chats;
  beforeEach(module('starter.services'));

  beforeEach(inject(function (_Chats_) {
    Chats = _Chats_;
  }));

  it('can get an instance of my factory', inject(function(Chats) {
    expect(Chats).toBeDefined();
  }));

  it('has 5 chats', inject(function(Chats) {
    expect(Chats.all().length).toEqual(5);
  }));

  it('has Max as friend with id 1', inject(function(Chats) {
    var oneFriend = {
      id: 1,
      name: 'Max Lynx',
      notes: 'Hey, it\'s me',
      face: 'img/max.png'
    };

    expect(Chats.get(1).name).toEqual(oneFriend.name);
  }));
});

karma測試

karma start tests/my.conf.js