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.<anonymous> (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