Karma+Jasmie做前端项目的单元测试

karma+jasmine简单介绍

karma主要是网页端的javascript测试，karma会将你的js代码引用到浏览器中，给代码一个浏览器的运行环境，这是karma的一个主要功能。

jasmine是一个测试框架，首先提供了基本的断言机制，还有其他的高级功能，函数的监控，判断这个函数是不是被调用过，还有可以mock伪装ajax请求的结果，等等吧，具体的上jasmine的官网上看，这个玩的还不是很熟。

karma+jasmine安装

注意点：karma不要安装到全局，这个一定要注意。

只要注意到这一点，其他的都是官网上都有的了。

npm install karma
npm install -g karma-cli
npm install karma-jasmine
npm install karma-chrome-launcher
           

karma安装到本地，通过全局的karma-cli（客户端）来执行karma命令，不需要单独安装jasmine，用karma-jasmine就可以了。

下面讲一下karma和requirejs一起怎么使用。

首先安装karma-requirejs插件，然后karma init来配置karma.conf.js

也可以直接创建一个这个js，这里给一个现成的。

module.exports = function(config) {
  config.set({

    // 基本路径，这个是决定从哪里找引用的文件和要排除的文件
    basePath: '',

    // 要用的框架，这里用到了下面两个
    frameworks: ['jasmine', 'requirejs'],


    // 要加载到浏览器的文件，注意html结尾的也是可以加载的。
    files: [
      {pattern: 'lib/**/*.js', included: false},
      {pattern: 'service/**/*.js', included: false},
      {pattern: 'route/**/*.js', included: false},
      {pattern: 'conponent/**/*.js', included: false},
      {pattern: 'constants/**/*.js', included: false},
      {pattern: 'model/**/*.js', included: false},
      {pattern: 'template/**/*.html', included: false},
      {pattern: 'test/**/*Spec.js', included: false},
      'test-main.js'
    ],


    // 不想引用的js
    exclude: [
      'src/main.js'
    ],

    //插件，用到什么就写什么，不写会报错
    plugins : [
      'karma-jasmine',
        'karma-requirejs'
    ],
    // 生成测试结果报告的类型
    // 可能的值: 'dots', 'progress', 'junit', 'growl', 'coverage'
    reporters: ['dots'],
    // 端口号
    port: ,
    // 输出的要不要颜色
    colors: true,
    // 日志的等级，就那几样看着选
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // 是否自动监控，如果是文件一改就自动跑测试用例，这边选择的是否
    autoWatch: false,
    // 支持的浏览器，用来做兼容性测试，感觉diaodiao的。
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['Chrome'],
    // 浏览器超时时间，超过这个时间就kill掉了
    captureTimeout: ,
    // 
    // true表示找到浏览器就自动运行test然后退出，默认就好。
    singleRun: false
  });
};
           

上面就是conf文件了，copy放到项目根目录下就欧了，如果不用reqirejs就把相应的require的去掉，把test-main.js去掉就可以了。

用requirejs看下面怎么配置test-main.js

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;

// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
    // then do not normalize the paths
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base',

  paths: {
    'jquery': 'lib/jquery',
    'underscore': 'lib/underscore'
  },

  shim: {
    'underscore': {
      exports: '_'
    },
    'lib/bootstrap' : {
      deps : ['jquery'],
      exports : 'bootstrap'
    },
    'lib/jquery.qrcode.min' : {
      deps : ['jquery'],
      exports : 'qrcode'
    }
  },

  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});
           

require.config 里面的东西才是要修改的，这个用过requirejs的都应该知道怎么修改成自己项目的，如果想开始用require，去官网上搜搜。

给出一个测试例子，项目用到了backbone，render的时候需要dom节点，就可以在测试之前创建个节点出来。

define(['underscore','conponent/appCon'], function(_,appCon) {
    describe('just checking', function() {
        it('works for underscore', function() {
            // just checking that _ works
            expect(_.size([,,])).toEqual();
        });
    });

    beforeEach(function() {
        var element = "<div id='body'></div>";
        $("body").append(element);
    });

    describe('html page render', function() {
        it('runder page', function() {
            var app = new appCon();
            app.renderFirstPage({
                is_display_org_info : false
            });
        });
    });
});
           

如果是webstorm，直接右键karma.conf.js然后选择run就可以跑测试用例了。如果不是，就karma start 然后karma run 同样可以。

感觉一篇没法写完debug的东西，下一篇再介绍js的debug和测试覆盖率怎么弄。感觉用webstorm来debug js还是感觉吊吊的。