karma + Jasmine 自动化测试AngularJS代码

上次说过一个关于Jasmine的自动化测试，但是并没有在angualrjs项目中使用。所以今天修改一下，下面是使用示例。

安装相关插件包。

• karma
  

  npm i -g karma

• jasmine
  

  npm i -g jasmine

• angular
  

  npm i bower
  ...
  bower i angular

• angular-mocks
  

  bower i angular-mocks

创建要被测试的js文件和测试的js文件。

• 被测试文件。angularDemo.js 内容如下：
  

  'use strict'
  
  var app = angular.module('app', []);
  
  app.controller('MainCtrl', function($scope) {
  
      $scope.text = 'The test is success!';
  });

• 测试文件。angularDemoSpec.js 内容如下：
  

  /**
   * Created by Gemu on 2/24/2016 0024.
   */
  describe('angular-demo', function() {
  
      var scope;
  
      beforeEach(angular.mock.module('app')); // 模拟 app module
  
      beforeEach(angular.mock.inject(function($rootScope, $controller) { // 我也不知道这是干啥的，反正功能就是为 scope 变量赋值为 app module中的controller里的$scope
          scope = $rootScope.$new();
          $controller('MainCtrl', {$scope: scope});
      }));
  
      it('get angular controller scope.text', function() {
          expect(scope.text).toBe('The test is success!');
      });
  });

初始化karma

这一步就要注意了，注意身边的美女有没有偷偷看你。

在终端中执行如下命令：

karma start karma.config.js

根据提示完成初始化，不知道填啥的就直接回车，完事后会生成karma.config.js文件，可以在这里重新配置。
配置中的files这个数组要注意一下，路径别写错了，而且要把插件（angular）的文件放到前面，后面才是自己写的要被测试和测试的文件。比如我的karma.config.js就是这个熊样的：

// Karma configuration
// Generated on Mon Feb 29 2016 14:20:59 GMT+0800 (China Standard Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      './bower_components/angular/angular.js',
      './bower_components/angular-mocks/angular-mocks.js',
      './src/js/*.js',
      './src/spec/*Spec.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

而我的目录结构长这个模样（画了框的是被诅咒的文件，没有用）：

启动karma测试

最后一步就是测试一下了，在终端输入karma start karma.config.js就可以了。

会打开Chrome浏览器（配的），不过打开的页面我也不知道有啥用，反正我是在终端看的结果。如果终端中输入成功会有类似于这样的提示：

Chrome 47.0.2526 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.008 secs / 0.005 secs)
29 02 2016 15:33:29.610:INFO [watcher]: Changed file "C:/Users/Gemu/WebstormProjects/JasmineDemo/src/spec/angularDemoSpec.js".
LOG: 'invoke demo2 function'
Chrome 47.0.2526 (Windows 10 0.0.0): Executed 2 of 2 SUCCESS (0.018 secs / 0.01 secs)

如果失败了，那就会有类似这样的提示：

Chrome 47.0.2526 (Windows 10 0.0.0) angular-demo get angular controller scope.text FAILED
        Expected 'The test is success!' to be 'The test is success!-'.
            at Object. (C:/Users/Gemu/WebstormProjects/JasmineDemo/src/spec/angularDemoSpec.js:16:28)
LOG: 'invoke demo2 function'
Chrome 47.0.2526 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0.02 secs / 0.012 secs)

参考：http://blog.jobbole.com/54936/ 

npm i -g karma

npm i -g karma

npm i -g karma