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.

 1 var allTestFiles = [];
 2 var TEST_REGEXP = /(spec|test)\.js$/i;
 3 
 4 Object.keys(window.__karma__.files).forEach(function(file) {
 5   if (TEST_REGEXP.test(file)) {
 6     // Normalize paths to RequireJS module names.
 7     allTestFiles.push(file);
 8   }
 9 });
10 
11 require.config({
12   // Karma serves files under /base, which is the basePath from your config file
13   baseUrl: '/base/app',
14   paths: {
15     angular: 'bower_components/angular/angular',
16     angularRoute: 'bower_components/angular-route/angular-route',
17     angularMocks: 'bower_components/angular-mocks/angular-mocks',
18     angularCookies:'bower_components/angular-cookies/angular-cookies',
19     angularResource:'bower_components/angular-resource/angular-resource'
20   },
21   shim: {
22     'angular' : {'exports' : 'angular'},
23     'angularRoute': ['angular'],
24     'angularCookies': ['angular'],
25     'angularResource': ['angular'],
26     'angularMocks': {
27       deps:['angular'],
28       'exports':'angular.mock'
29     }
30   },
31   priority: [
32     "angular"
33   ],
34   // dynamically load all test files
35   deps: allTestFiles,
36 
37   // we have to kickoff jasmine, as it is asynchronous
38   callback: window.__karma__.start
39 });
40 require([
41     'angular',
42     'app'
43   ], function(angular, app) {
44     var $html = angular.element(document.getElementsByTagName('html')[0]);
45     angular.element().ready(function() {
46       // bootstrap the app manually
47       angular.bootstrap(document, ['cxriaApp']);
48     });
49   }
50 );

test-main.js