通过缓存安装Karma和Jasmine并进行AngularJS单元测试

本文是基于基于Karma和Jasmine的AngularJS测试这篇译文的补充，因为我按照文档进行操作的时候遇到了文档中未提及的几个问题。

首先是nodejs的安装：

可以去nodejs下载界面下载，我用的是Windows Installer (.msi)（32位）的版本，安装步骤很简单，无脑点下一步就可以了。

接下来安装karma：

打开nodejs的命令行界面，执行命令：npm install -g karma



注意这个过程可能会花费比较长的时间，大约5到10分钟吧。

受限于我的工作环境，npm命令执行的下载操作无法完成，导致karma无法正常安装，但是我们可以通过在可以下载的环境中下载安装完成后把C:\Users\xxx\AppData\Roaming目录下的npm和npm-cache文件夹复制到工作环境相应的目录下来解决这个问题，这两个文件夹是npm下载的缓存文件夹。注意路径中的xxx是你当前的用户名。

对于想要通过缓存安装的同学要注意：在可以下载安装的环境中尽量做到安装完karma和jasmine后就把缓存文件夹复制出来，我用nodejs写过单元测试以后发现再把这两个缓存文件给别人就无法正常安装karma了。

安装成功后会有如下提示（如果是通过缓存安装的话会有一些warn告警，不用去管他）：



安装完成后我们发现执行karma的任意命令都会有这样的提示（下图的命令是查看karma的版本）：



安装了半天结果命令都无法识别，很恼火是吧，因为nodejs没有找到匹配的karma命令行入口。打开nodejs的安装目录，可以看到有一个npm.cmd文件：



把这个文件复制一份，重命名成karma.cmd，然后打开这个文件：

:: Created by npm, please don't edit manually.
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\.\node_modules\npm\bin\npm-cli.js" %*
) ELSE (
node "%~dp0\.\node_modules\npm\bin\npm-cli.js" %*
)

把里面的%~dp0\.\node_modules\npm\bin\npm-cli.js这一段换成C:\Users\xxx\AppData\Roaming\npm\node_modules\karma\bin\karma，注意有两个地方需要调整，修改完成后保存。

这个时候我们再检查一下karma的版本：



然后我们需要安装jasmine，执行命令：npm install -g jasmine




至此，测试环境我们已经构建完成了，接下来是写单元测试，首先切到我们的单元测试目录，执行命令：karma init karma.config.js



执行完成以后会在nodejs目录下生成一个karma.config.js文件，里面包含了我们创建脚本时给定的一些配置，由于我的工作环境无法下载对应的浏览器的plugin，因此我生成以后把里面的browsers: ['Chrome']改成了browsers: []，各位同学可能根据自己的环境来调整。

然后我们创建一个测试脚本以及一个测试用例（这里不说mock，因此我做了简化）：

home.js

'use strict';

var app = angular.module('Application', ['ngResource']);

app.controller('MainCtrl', function($scope) {
$scope.text = 'Hello World!';
});

home.test.js

'use strict';
 
describe('MainCtrl', function(){
    var scope; //we'll use these in our tests
 
    //mock Application to allow us to inject our own dependencies
    beforeEach(angular.mock.module('Application'));
    //mock the controller for the same reason and include $rootScope and $controller
    beforeEach(angular.mock.inject(function($rootScope, $controller){
       
        //create an empty scope
        scope = $rootScope.$new();
        //declare the controller and inject our empty scope
        $controller('MainCtrl', {$scope: scope});
    }));
    // tests start here
    it('should have variable text = "Hello World!"', function(){
        expect(scope.text).toBe('Hello World!');
    });
});

再修改一下我们的karma.config.js文件中的files和exclude部分：

// Karma configuration
// Generated on Wed Nov 26 2014 20:13:26 GMT+0800 (中国标准时间)

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: ['angular.js',
'angular-mocks.js',

'angular-resource.js',
'*.js'],

// list of files to exclude
exclude: ['karma.config.js'],

// 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: [],

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

这里我按照文档中说明来配置引用的js会报错，我认为这里也是有加载顺序的，应该先加载angular.js和angular-mocks.js。

我们在上面的配置文件中引用了angular.js、angular-mocks.js和angular-resource.js三个文件，同样需要把这三个文件复制到我们的单元测试目录下（CSDN有提供下载，这里就不贴下载地址了）。

然后执行命令：karma start



最后在我们需要测试这个js方法的浏览器中访问http://localhost:9876/



最后在我们的命令行窗口查看运行结果：



这样一个最简单的angularjs单元测试就完成了。