單元測試使用Node.js，Gulp.js和摩卡的angularjs控制器

Question

我想單元測試一個使用Node.js的angularjs控制器。我正在使用gulp.js和mocha通過gulp-mocha運行測試。

這是我的gulpfile.js看起來像現在：

(function() { 

    var gulp = require('gulp'); 
    var mocha = require('gulp-mocha'); 

    gulp.task('default', function() { 
     return gulp 
      .src('Scripts/Tests/*.js', { read: false }) 
      .pipe(mocha({ 
       ui: 'tdd', 
       reporter: 'dot', 
       globals: { 
        angular: require('./Scripts/angular.js') 
       } 
      })); 
    }); 

})(); 

這是被測代碼：

(function() { 

    var application = angular.module('Main'); 

    application.controller('MainController', ['$scope', function ($scope) { 

     $scope.isDisabled = function() { 
      return true; 
     }; 

    }]); 

})(); 

這是測試文件本身：

(function() { 

    var chai = require('chai'); 
    var assert = chai.assert; 

    angular.module('Main', []); // Create an empty module 
    require('../MainController.js'); // Fill the module with the controller 

    suite('Main Controller', function() { 

     test('isDisabled always true', function() { 

      var controllerFactory = angular.injector.get('$controller'); 
      var controller = controllerFactory('MainController', { 
       '$scope': {} 
      }); 

      var result = controller.isDisabled(); 
      assert.isTrue(result); 
     }); 

    }); 

})(); 

爲了讓我的測試和我正在測試的文件能夠正常工作，我需要將角度設置爲全局。但是，撥打require在gulpfile.js給我一個Reference Error: window is not defined錯誤。這是有道理的，因爲我在Node.js中運行。

在Node.js中加載角度需要做些什麼？

Answer 1

我在Grunt中這樣做，但同樣的原則適用於Gulp。您需要注入「angular-mocks.js」文件才能模擬依賴注入。我使用噶http://karma-runner.github.io/0.12/index.html我karma.conf.js文件要做到這一點，並將其設置如下：

module.exports = function(config){ 
    config.set({ 
    basePath : '../../', 

    files : [ 
     'bower_components/angular/angular.js', 
     'bower_components/angular-mocks/angular-mocks.js', 
     ... 

然後你可以注入一個$控制器到您的測試和做的事情一樣測試你的控制器初始化。下面的測試是初始化範圍，然後測試控制器是否將方法添加到範圍中（請注意，我正在使用Jasmine，但同樣可以用mocha完成），但Jasmine具有一些很好的內建間諜功能。

describe('analysisController', function() { 
    var scope, state; 

    beforeEach(function() { 
     module('analysis'); 
     scope = { 
      $apply:jasmine.createSpy(), 
      ws: { 
       registerCallback:jasmine.createSpy(), 
       sendMessage:jasmine.createSpy() 
      } 
     }, 
     state = { 
      go : jasmine.createSpy() 
     }; 
    }); 
    it('should add a bunch of methods to the scope', inject(function ($controller) { 
     $controller('analysisController', { 
      $scope : scope, 
      $state: state 
     }); 
     expect(typeof scope.colorContrast).toBe('function'); 
     expect(typeof scope.XPathFromIssue).toBe('function'); 
    })); 
    ... 

Answer 2

正如@unobf所述（以及angularjs文檔說），訣竅來測試從Node.js的角是使用噶。這意味着安裝karma和karma-mocha，以及karma-chrome-launcher,karma-ie-launcher,karma-firefox-launcher（或其他）通過npm install。

然後我基本上從頭開始重做我gulp.js文件：

(function() { 

    var gulp = require('gulp'); 
    var karma = require('karma').server; 

    gulp.task('runTests', function (done) { 
     karma.start({ 
      configFile: __dirname + '/karma.config.js', 
      singleRun: true 
     }, done); 
    }); 

    gulp.task('default', ['runTests']); 

})(); 

我也必須創建一個karma.config.js文件來配置因緣使用Chrome，火狐，IE與摩卡。在同一文件中，我配置了摩卡使用TDD UI和點記者：

module.exports = function(config) { 
    config.set({ 
     browsers: ['Chrome', 'Firefox', 'IE'], 
     frameworks: ['mocha'], 
     files: [ 
      './Scripts/angular.js', 
      './Scripts/chai.js', 
      './Scripts/*.js', 
      './Scripts/Tests/*.js' 
     ], 
     singleRun: true, 
     client: { 
      mocha: { 
       reporter: 'dot', 
       ui: 'tdd' 
      } 
     } 
    }); 
}; 

我瞭解到，你必須先指定angularjs，chai.js等，所以他們第一次拿起並在全球範圍內爲其他文件。沿着相同的路線，測試代碼的文件必須在測試文件之前列出。

正在測試的代碼根本沒有改變。一旦我的測試運行，我意識到我的測試被打破，它結束了看起來像這樣經過：

(function() { 

    var assert = chai.assert; 

    suite('Main Controller', function() { 

     test('isDisabled always true', function() { 

      var injector = angular.injector(['ng', 'Main']); 
      var $controller = injector.get('$controller'); 
      var scope = {}; 
      var controller = $controller('MainController', { 
       '$scope': scope 
      }); 

      var result = scope.isDisabled(); 
      assert.isTrue(result); 
     }); 

    }); 

})(); 

大拿走是，控制器簡單地填充$scope對象。相反，我在$scope對象上調用isDisabled()。當然，得到的控制器是一個大量的工作，所以它是使用由angular-mocks.js提供的inject方法更有意義：

(function() { 

    var assert = chai.assert; 

    suite('Main Controller', function() { 

     var $scope = {}; 

     setup(function() { 
      module('Main'); 
      inject(function ($controller) { 
       $controller('MainController', { 
        '$scope': $scope 
       }); 
      }); 
     }); 

     test('isDisabled always true', inject(function ($controller) {   
      var result = $scope.isDisabled(); 
      assert.isTrue(result); 
     })); 

    }); 

})(); 

希望這是足以讓任何人開始誰是試圖使用Node.js的和摩卡來測試angularjs代碼。