日期:2014-05-16  浏览次数:20360 次

使用karma runner 进行javascript单元测试
废话少说,开始安装
1、先装node.js
http://nodejs.org/
2、确认node.js安装成功
node -v
若找不到命令,那你和我一样是windows server 2003,需设置环境变量,重新打开cmd
若还是不行,上手动档,命令行里先执行
set Path=%Path%;C:\Program Files\nodejs\
node -v

恭喜你!这招一定行,这都不行,请跳楼。
这就设置好环境变量了,但是CMD窗口不要关,重新打开还需要重新设置变量。
3、CMD到项目目录下,安装karma
http://karma-runner.github.io/0.12/intro/installation.html
cd E:\HTML5js\WebContent
npm install karma --save-dev
npm install karma-jasmine karma-chrome-launcher --save-dev
npm install -g karma-cli

安装时,有时会提示什么.dll类库找不着,悲崔的windows们,请安装visual studio 2010,安装visual studio 后,再重新执行npm安装命令。
4、运行karma测试命令是否正常
karma start

有时可能又运行不了,那么
node ./node_modules/karma/bin/karma start

5、编写配置文件
在当前目录下添加karma.conf.js
module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '.',

    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'js/*.js'
    ],

    // list of files to exclude
    exclude: [
      'client/main.js'
    ],

    preprocessors: {
    },

    // use dots reporter, as travis terminal does not support escaping sequences
    // possible values: 'dots', 'progress'
    // CLI --reporters progress
    reporters: ['progress', 'junit'],

    junitReporter: {
      // will be resolved to basePath (in the same way as files/exclude patterns)
      outputFile: 'test-results.xml'
    },

    // web server port
    // CLI --port 9876
    port: 9876,

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

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

    // enable / disable watching file and executing tests whenever any file changes
    // CLI --auto-watch --no-auto-watch
    autoWatch: true,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    // CLI --browsers Chrome,Firefox,Safari
    //browsers: [process.env.TRAVIS ? 'Firefox' : 'Chrome'],
    browsers: ['IE'],

    // If browser does not capture in given timeout [ms], kill it
    // CLI --capture-timeout 5000
    captureTimeout: 20000,

    // Auto run tests on start (when browsers are captured) and exit
    // CLI --single-run --no-single-run
    singleRun: false,

    // report which specs are slower than 500ms
    // CLI --report-slower-than 500
    reportSlowerThan: 500,

    plugins: [
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-ie-launcher',
      'karma-junit-reporter',
      'karma-commonjs'
    ]
  });
};


6、添加需要测试的js和测试用例
创建js目录,在js目录下创建 plus.js和test.js
plug.js源码
// Some code under test
function plus(a, b) {
  return a + b;
}



test.js源码

describe('plus', function() {
  it('should pass', function() {
    expect(true).toBe(true);
  });

  it('should work', function() {
    expect(plus(1, 2)).toBe(3);
  });
  
  it('should work', function() {
	    expect(plus(5, 2)).toBe(9);
	  });
});




7、执行测试
在当前目录下运行命令,启动测试:
karma start

若测试不成功,安装karma插件
npm install karma-chrome-launcher karma-firefox-launcher karma-ie-launcher karma-junit-reporter karma-commonjs --save-dev

安装好后,再执行karma start进行测试
命令行显示测试结果
E:\HTML5js\WebConte