使用Yeoman搭建 AngularJS 應用 (10) —— 讓咱們搭建一個網頁應用

原文地址：http://yeoman.io/codelab/write-unit-tests.html

對於不熟悉的Karma的人來講，這是JavaScript測試框架，這個Angular的生成器包含了兩個測試框架: ngSenario和Jasmine，當咱們以前運行yo angular建立了一個karma.conf.js文件。而且獲取Karma的Node模塊。咱們將編輯一個Jasmine來測試咱們的項目。

運行單元測試

讓咱們回到命令行，使用Ctrl + C來關閉Grunt服務。這已經存在於Gruntfile.js基架中。輸入下面的命令

grunt test

當咱們運行 grunt test，你將看到Yeoman界面中的警告，不要擔憂，咱們來修復它。

記得查看grunt當前的端口有沒有被佔用，不然會出現錯誤的。

更新Karma的配置

第一，咱們須要檢查Karma配置來看咱們是否安裝了最新的Bower

打開karma.conf.js。如今這個files看起來是這樣的

    files: [
      // bower:js
      'bower_components/jquery/dist/jquery.js',
      'bower_components/angular/angular.js',
      'bower_components/bootstrap/dist/js/bootstrap.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/jquery-ui/jquery-ui.js',
      'bower_components/angular-ui-sortable/sortable.js',
      'bower_components/angular-mocks/angular-mocks.js',
      // endbower
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

Bower已經讀取了新的依賴文件，而且自動的添加了karma.conf.js文件

更新單元測試

你在test/spec/controllers/main.js更改代碼以下

it('should attach a list of awesomeThings to the scope', function () {
  expect(scope.awesomeThings.length).toBe(3);
});

而後代替成以下代碼

it('should have no items to start', function () {
  expect(scope.todos.length).toBe(0);
});

打開scripts/controllers/main.js

刪除$scope.todos中的3個元素

$scope.todos = [];

從新運行grunt test，你將看到測試經過

若是出現下面的錯誤

那就輸入下面的命令

npm install grunt-karma karma karma-phantomjs-launcher karma-jasmine jasmine-core phantomjs --save-dev

添加更多的單元測試

讓咱們添加更多的單元測試

it('should add items to the list', function () {
  scope.todo = 'Test 1';
  scope.addTodo();
  expect(scope.todos.length).toBe(1);
});

it('should add then remove an item from the list', function () {
  scope.todo = 'Test 1';
  scope.addTodo();
  scope.removeTodo(0);
  expect(scope.todos.length).toBe(0);
});

MainCtrl測試以下所示(test/spec/controllers/main.js)

'use strict';

describe('Controller: MainCtrl', function () {

  // load the controller's module
  beforeEach(module('mytodoApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
      $scope: scope
    });
  }));

  it('should have no items to start', function () {
    expect(scope.todos.length).toBe(0);
  });

  it('should add items to the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    expect(scope.todos.length).toBe(1);
  });

  it('should add then remove an item from the list', function () {
    scope.todo = 'Test 1';
    scope.addTodo();
    scope.removeTodo(0);
    expect(scope.todos.length).toBe(0);
  });

});

再次運行測試，咱們會獲得下面結果

測試成功