karma+requirejs+angular 测试

http://karma-runner.github.io/0.8/plus/RequireJS.html

karma 不是测试框架，只是一个运行测试框架的服务器

karma测试的原理是，将所有的文件都加载，然后执行对应的测试文件

使用到的前端自动化工具：

grunt bower npm 等

安装依赖：

    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.1",
    "karma-jasmine": "^0.3.6",
    "karma-mocha": "^0.2.0", //与jasmine 二选一即可，建议使用jasmine，mocha需要其他的断言包
    "karma-requirejs": "^0.2.2",

初始化配置文件：

karma init

配置说明：

// Karma configuration
// Generated on Tue Nov 10 2015 09:39:31 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‘, ‘requirejs‘],


        // 配置要加载的文件
        //字符串形式的表示 通过<script>标签进行加载
        //对象形式的必须包含pattern、included属性，pattern进行匹配文件，included为true表示通过requirejs进行加载(后面会结束配置说明)，否则通过script标签进行加载
        files: [
            ‘app/bower_components/angular/angular.js‘,
            ‘app/bower_components/angular-route/angular-route.js‘,
            ‘app/bower_components/angular-mocks/angular-mocks.js‘,
            ‘app/components/**/*.js‘,
            ‘app/view*/**/*.js‘,
            {pattern: ‘app/define/*.js‘, included: false},
            {pattern: ‘app/test/*.js‘, included: false},
            ‘test-main.js‘
        ],


        // list of files to exclude
        exclude: [
            ‘**/*.swp‘
        ],


proxies:  {    //‘/static‘: ‘http://gstatic.com‘,    ‘/log‘: ‘http://localhost:3000‘ //避免跨域，测试异步请求时如果指定完整url就是跨域，会出错，如果只写路径会请求到karma服务器localhsot:9876/ },



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


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

requirejs配置

/**
 * Created by weichunhe on 2015/11/10.
 */
var tests = [];
for (var file in window.__karma__.files) { //这里的文件路径已经包含了 /base了
    if (window.__karma__.files.hasOwnProperty(file)) {
        if (/test1\.js$/.test(file)) {
            tests.push(file);
        }
    }
}
console.log(window.__karma__.files);
console.log(tests);
requirejs.config({
    // Karma serves files from ‘/base‘
    baseUrl: ‘/base/app/define‘,

    paths: {},

    shim: {},

    // ask Require.js to load these files (all our tests)
    deps: tests, //这里只包含需要测试的文件就可以了

    // start test run, once Require.js is done
    callback: window.__karma__.start
});

启动：

cd node_modules/.bin/

karma.cmd start ../../karma.conf.js

karma:

files: 根据正则表达式去遍历文件系统，将符合条件的文件在/base下面通过web提供服务

将included指定为false时通过requirejs加载，如果指定为true 会出现  Uncaught Error: Mismatched anonymous define() module 这是因为在加载requirejs之前通过script标签进行加载的

使用requirejs时：

所有在deps里面的文件都会去加载执行，所以deps里面放的只是要测试的文件就可以了，要么define、要么直接写，不能require，这是异步了

angular 的 $controllerProvider.reigster 在 angular启动之后注册的controller测试时通过angular-mock就加载不进来了

如果是所有controller都在angular bootstrap之前注册了，就可以使用 angular-mocks ，否则还是不要用了，太麻烦了；直接angular测试

        $injector = angular.injector([‘app‘]); //执行这步之后 注册的controller可以injector获取到
        require(‘app‘).register.controller(‘testCtrl‘, function (name) {
            console.log(‘controller‘, name);
        });
        $injector.invoke(function ($controller) {
            $controller(‘testCtrl‘, {name: ‘testCtrl‘});
        });

来自为知笔记(Wiz)