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

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


首先是nodejs的安装:

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


接下来安装karma:

打开nodejs的命令行界面,执行命令:npm install -g karma

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第1张图片

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


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


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


安装成功后会有如下提示(如果是通过缓存安装的话会有一些warn告警,不用去管他):

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第2张图片


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

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第3张图片


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

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第4张图片


把这个文件复制一份,重命名成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的版本:

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第5张图片


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

通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第6张图片


至此,测试环境我们已经构建完成了,接下来是写单元测试,首先切到我们的单元测试目录,执行命令:karma init karma.config.js
通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第7张图片

执行完成以后会在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/
通过缓存安装Karma和Jasmine并进行AngularJS单元测试_第8张图片

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

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


你可能感兴趣的:(angularjs)