web学习笔记02-基于Karma和Jasmine的AngularJS单元测试

简单介绍通过karma与jsmine框架对angular开发的应用程序进行单元测试。

前提：nodejs，webstorm

1.创建项目基本目录

    创建html、js，test文件夹，在项目中创建2个文件夹分别用于存放项目中用到的index.html、index.js,index-test.js文件。
创建目录

2.安装框架

安装前端框架

    项目中的前端框架主要为angularjs相关的框架,为了安装框架方便可安装bower包管理器。

  • 安装bower包管理器 
1
2
3
4
npm install bower -save
```  

- 初始化bower.json文件,管理bower的依赖和配置

bower init

1
2
3
![初始化bower.json文件](http://upload-images.jianshu.io/upload_images/1062695-fbbd2ac6bc2989ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

- 安装angular,angular-mocks框架

bower install bootstrap -save

bower install angular -save

bower install angular-mocks -save

1
2
3
4
5

![安装angular,angular-mocks框架](http://upload-images.jianshu.io/upload_images/1062695-a3f6c84e34f466b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 安装服务器端框架
- 服务器依赖于nodejs，需要安装nodejs的包，生成package.json文件。

npm init

1
- 安装http-server模块

npm install http-server -save

1
2
![安装http-server模块](http://upload-images.jianshu.io/upload_images/1062695-7d4350f294027ebf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
- 安装其他模块

npm install jasmine-core –save //javascript单元测试框架
npm install karma –save //模拟javascript脚本在各种浏览器执行的工具
npm install karma-chrome-launcher –save //在chrome浏览器执行的工具
npm install karma-jasmine –save //jasmine-core在karma中的适配器
npm install karma-junit-reporter –save //生成junit报告
npm install protractor –save //E2E测试框架

1
2
3
4
5
    偶尔会出现报错的时候，一般都是权限不够，在前面添加sudo就可以了。  
![package.json](http://upload-images.jianshu.io/upload_images/1062695-fc9fe28dcdf8261a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
scripts是自己定义的。

- 配置后运行命令,启动服务器，浏览器上输入http://localhost:8002

npm start

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

### 编写代码
#### index.html  

```html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>index</title>

</head>
<body>
<div ng-controller="indexCtrl">
    <input type="text" ng-model="a" value="0">
    +
    <input type="text" ng-model="b" value="0">
    =<span id='result'>{{add(a,b)}}</span>
</div>
</body>
</html>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-mocks/angular-mocks.js"></script>
<script src="/js/index.js"></script>

index.js

1
2
3
4
5
6
7
8
9
10
(function (angular) {
    angular.module('app', []).
    controller('indexCtrl', function ($scope) {
        $scope.add = function (a, b) {
            if(a&&b)
            return Number(a) + Number(b)
            return 0;
        }
    });
})(window.angular);

启动服务器

####index-test.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';
describe('app', function () {
    beforeEach(module('app'));
    describe('indexCtrl', function () {
        it('add 测试', inject(function ($controller) {
            var $scope = {};
            //spec body
            var indexCtrl = $controller('indexCtrl', {$scope: $scope});
            expect(indexCtrl).toBeDefined();
            expect($scope.add(2, 3)).toEqual(5);
        }));

    });
});

单元测试配置

初始化karma配置文件,用于配置karma，执行命令

1
karma init

karma init

在karma配置文件代码中每个节点都有注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Karma configuration
// Generated on Mon Sep 12 2016 11:43:48 GMT+0800 (CST)

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'],


    // list of files / patterns to load in the browser
    files: [
    ],


    // list of files to exclude
    exclude: [
    ],


    // 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,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

运行单元测试

1
npm test

屏幕快照 2016-09-12 上午11.57.23.png

屏幕快照 2016-09-12 上午11.57.49.png

参考：

angular单元测试与自动化UI测试实践