angularJS+requireJS并集成karma测试实践

最近在为下一个项目做前端技术选型，Angular是必须要用的（BOSS指定，个人感觉也不错，开发效率会很高）。由于需要加载的JS很多，所以打算看看angular和requirejs一起用会怎么样。在git上有一个模板加《angular-requirejs-seed》，这个对angular和requirejs结合有很好的指导。但是他把karma的单元测试js放在项目中了，我更喜欢放在test目录下。

由于为linux下没有截图工具，就手打了。求Linux下好用的截图工具分享。要用karma测试首先使用karma init命令生成测试文件karma.conf.js。

在项目下输入命令karma init  

　　Which testing framework do you want to use? jasmine　　

　　Do you want to use Require.js?  yes            注意：按上下键就可以选择

　　Do you want to capture any browsers automatically?   Chrome  注意，可以选多个

　　What is the location of your source and test files?  app/**/**/*.js  enter键  app/app.js  enter键  app/require-config.js  enter键 test/**/*Spec.js    这里的路径更加实际项目情况来确定。可以多个路径。

　　Should any of the files included by the previous patterns be excluded ? enter键跳过。

　　Do you wanna  generate a bootstrap file for RequireJS? yes

　　Do you want karma to watch all the files and run the tests on change? yes

　在这些步骤完成之后，会在根目录生成叫做karma.conf.js和test-main.js的两个文件。由于习惯，我喜欢将karma.conf.js放入test目录下，这时需要将karma.conf.js的basePath改为"..";这里的test-main.js文件就是karma在测试的代替app下的require-config.js的文件，所以test-main.js文件和require-config的内容几乎完全一样，只是由于位置不一样，所以在test-main中增加一个baseUrl.

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

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    allTestFiles.push(file);
  }
});

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  baseUrl: '/base/app',
  paths: {
    angular: 'bower_components/angular/angular',
    angularRoute: 'bower_components/angular-route/angular-route',
    angularMocks: 'bower_components/angular-mocks/angular-mocks',
    angularCookies:'bower_components/angular-cookies/angular-cookies',
    angularResource:'bower_components/angular-resource/angular-resource'
  },
  shim: {
    'angular' : {'exports' : 'angular'},
    'angularRoute': ['angular'],
    'angularCookies': ['angular'],
    'angularResource': ['angular'],
    'angularMocks': {
      deps:['angular'],
      'exports':'angular.mock'
    }
  },
  priority: [
    "angular"
  ],
  // dynamically load all test files
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});
require([
    'angular',
    'app'
  ], function(angular, app) {
    var $html = angular.element(document.getElementsByTagName('html')[0]);
    angular.element().ready(function() {
      // bootstrap the app manually
      angular.bootstrap(document, ['cxriaApp']);
    });
  }
);

 

'use strict';

if(window.__karma__) {
    var allTestFiles = [];
    var TEST_REGEXP = /spec\.js$/;

    var pathToModule = function(path) {
        return path.replace(/^\/base\/app\//, '').replace(/\.js$/, '');
    };

    Object.keys(window.__karma__.files).forEach(function(file) {
        if (TEST_REGEXP.test(file)) {
            // Normalize paths to RequireJS module names.
            allTestFiles.push(pathToModule(file));
        }
    });
}

require.config({
    paths: {
        angular: 'bower_components/angular/angular',
        angularRoute: 'bower_components/angular-route/angular-route',
        angularMocks: 'bower_components/angular-mocks/angular-mocks',
    angularCookies:'bower_components/angular-cookies/angular-cookies',
    angularResource:'bower_components/angular-resource/angular-resource',
    uiBootstrap:'bower_components/angular-bootstrap/ui-bootstrap'
    },
    shim: {
        'angular' : {'exports' : 'angular'},
        'angularRoute': ['angular'],
        'angularCookies': ['angular'],
        'angularResource': ['angular'],
        'angularMocks': {
            deps:['angular'],
            'exports':'angular.mock'
        }
    },
    priority: [
        "angular"
    ],
    deps: window.__karma__ ? allTestFiles : [],
    callback: window.__karma__ ? window.__karma__.start : null,
    baseUrl: window.__karma__ ? '../app' : ''
});

require([
    'angular',
    'app'
    ], function(angular, app) {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function() {
            // bootstrap the app manually
            angular.bootstrap(document, ['cxriaApp']);
        });
    }
);

下面是为测试路由的代码：

/**
 * Created by taox on 15-6-19.
 */
'use strict';

define([
  'angular',
  'angularMocks',
  'app'
], function() {
  describe('Routes test', function() {
    var location,route,rootScope;
    beforeEach(module('cxriaApp'));
    beforeEach(inject(function(_$location_,_$route_,_$rootScope_){
      location = _$location_;
      route = _$route_;
      rootScope = _$rootScope_;
    }));
    describe('index route', function(){
      var httpbackend;
      beforeEach(inject(function($httpBackend){
        httpbackend = $httpBackend;
      }));
      it('should load the homepage on successful load of /.', inject(function() {
        httpbackend.expectGET('./partials/home/home.html').respond('200','main HTML');
        location.path('/');
        rootScope.$digest();
        expect(route.current.controller).toBe('HomeCtrl');
      }));
      it('should redirect to the homepage on non-existent route',function(){
        httpbackend.expectGET('./partials/home/home.html').respond('200','main HTML');
        location.path('/non-existent-path');
        rootScope.$digest();
        expect(route.current.controller).toBe('HomeCtrl');
      });
      it('should redirect to room page on successful load of /room/1',function(){
        httpbackend.expectGET('./partials/room/room.html').respond('200','main HTML');
        location.path('/room/1');
        rootScope.$digest();
        expect(route.current.controller).toBe('RoomCtrl');
      })
    });
  });

});

对于karma再测试angular的指令时，为现在遇到一个很蛋疼的问题，那就时在当指令使用templateUrl时，需要karma-ng-html2js-preprocessor才能测试，这时需要修改karma.conf.js.

1.在files中增加模板的地址如：'app/directives/chatroom/*.html',

2.在plugins中增加''karma-ng-html2js-preprocessor',

3.在preprocessors中增加'app/directives/chatroom/*.html':['ng-html2js']

在这3步完成后，下面是我的测试文件，也通过测试了。

/**
 * Created by taox on 15-6-30.
 */
describe('Unit:Directives',function(){
  var scope,compile;

  beforeEach(module('chatroomDirective'));
  beforeEach(module('directives/chatroom/chatroom.html'));
  beforeEach(inject(function($compile,$rootScope){
    compile = $compile;
    scope = $rootScope;
  }));

  it('should content words 发送',function(){
    var ele = angular.element('<chatroom></chatroom>');
    var chatroom = compile(ele)(scope);
    scope.$digest();
    expect(chatroom.html()).toContain('发送');
  });
});

但是如果我在模板中绑定了ng-controller,则会报错。有人知道怎么将controller绑定到模板上吗？如果有知道的，求在http://www.cnblogs.com/towersxu/p/4600298.html 上面留言。下面是为尝试将controller绑定到模板上的方法：

/**
 * Created by taox on 15-6-30.
 */
describe('Unit:Directives',function(){
  var scope,compile,chatroomCtrl;

  beforeEach(module('chatroomDirective'));
  beforeEach(module('directives/chatroom/chatroom.html'));
  beforeEach(inject(function($compile,$controller,$rootScope){
    compile = $compile;
    scope = $rootScope.$new();
    chatroomCtrl = $controller('chatroomCtrl',{$scope:scope,$routeParams:{roomId:'1'}});
  }));

  it('should display words 发送',function(){
    var ele = angular.element('<chatroom></chatroom>');
    var chatroom = compile(ele)(scope);
    scope.$digest();
    expect(chatroom.html()).toContain('发送');
  });
});

　　错误提示为：Unknown provider:$routeParamsProvider<- $routeParams <-chatroomCtrl.我在测试controller的时候就不会出现这个错误。