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

r囧r小猫 2022-08-14 03:36 153阅读 0赞

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

首先是nodejs的安装：

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

接下来安装karma：

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

![20141126193733437][]

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

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

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

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

![20141126194718316][]

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

![20141126193511589][]

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

![20141126195354058][]

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

![20141126200630737][]

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

![20141126200906722][]

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

![20141126201417546][]

执行完成以后会在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

![20141126204232792][]

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

![20141126205212859][]

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

![20141126205654875][]

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

[Karma_Jasmine_AngularJS]: http://blog.jobbole.com/54936/
[nodejs]: http://www.nodejs.org/download/
[20141126193733437]: /images/20220810/9df8044066164a6c868a30b896abcecf.png
[20141126194718316]: /images/20220810/0c509b1bbee34d8ca336669b4ddc30ba.png
[20141126193511589]: /images/20220810/672cc8d35faf4fd1978c6ffb9c235ca1.png
[20141126195354058]: /images/20220810/d51368d4a5f04d2ea89201746ccbc97c.png
[20141126200630737]: /images/20220810/0932dbe8db2546ce8644cb9ad0000212.png
[20141126200906722]: /images/20220810/90db7325b1434a8a962fcad491407f9d.png
[20141126201417546]: /images/20220810/0fa3c042ba3b49a9a0c166f232985850.png
[20141126204232792]: /images/20220810/5bdc649cbf364b5e8e639ac470cddd98.png
[http_localhost_9876]: http://localhost:9876/
[20141126205212859]: /images/20220810/5039f4b4349b4131ba363ee527e2631d.png
[20141126205654875]: /images/20220810/badaa125400d4ea49ac7fe46d09c4216.png