您的位置:首页 > Web前端 > AngularJS

基于Karma和Jasmine的AngularJS测试

2015-11-29 12:41 716 查看
1:工程目录结构

y@y:karma-t01$ tree -L 3
.
├── client
│ ├── app
│ │ └── user
│ ├── bower_components
│ │ ├── angular
│ │ ├── angular-mocks
│ │ └── angular-resource
│ └── bower.json
├── karma.conf.js
└── readme

7 directories, 3 files

项目说明:使用bower进行js包管理,使用Karma及Jasmine完成基本测试.
使用bower在线安装工程所依赖的包:

y@y:client$ bower install angular
y@y:client$ bower install angular-resource
y@y:client$ bower install angular-mocks

user目录结构:

y@y:app$ tree -L 1 user/
user/
├── user.js
├── users.json
└── user.test.js

0 directories, 3 files

2:user.js

/**
* Created by y on 15-11-24.
*/
'use strict';

var app = angular.module('Application', ['ngResource']);

app.factory('UserFactory', function($resource){
return $resource('users.json',{},{
query:{method:'GET',isArray:true}
});
});

app.controller('MainCtrl', function($scope,UserFactory) {
$scope.title = 'Hello AngularJS In Action!';
$scope.users = UserFactory.query();
});

3:user.test.js

/**
* Created by y on 15-11-24.
*/
'use strict';

describe('MainCtrl',function(){
var scope,httpBackend;

beforeEach(angular.mock.module('Application'));

beforeEach(angular.mock.inject(function($rootScope,$controller,_$httpBackend_){

httpBackend = _$httpBackend_;
httpBackend.when('GET','users.json')
.respond([
{
name:'张三', age:25
},
{
name:'李四', age:24
},
{
name:'王五', age:27
}
]);

scope = $rootScope.$new();

$controller('MainCtrl',{$scope:scope});
}));

//test begin
it('should have variable title="Hello AngularJS In Action!"',function(){
expect(scope.text).toBe('Hello AngularJS In Action!');
});

//test begin
it('should fetch list of users', function(){
httpBackend.flush();

expect(scope.users.length).toBe(3);
expect(scope.users[0].name).toBe('张三');
});

});

4:users.json

[
{
name:'张三', age:25
},
{
name:'李四', age:24
},
{
name:'王五', age:27
}
]

5:进行Karma文件配置,Karma默认使用Jasmine作为测试框架.

切换到你想要放置配置文件的目录,然后在终端中输入下面的命令来创建配置文件:

y@y:karma-t01$ karma init karma.conf.js
配置信息如下:主要进行files节点配置

// Karma configuration
// Generated on Tue Nov 24 2015 23:12:58 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: [
        'client/bower_components/angular/angular.js',
        'client/bower_components/angular-mocks/angular-mocks.js',
        'client/bower_components/angular-resource/angular-resource.js',
        'client/app/**/*.js'
],

// 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
});
};

6:在控制台输入命令进行测试

y@y:karma-t01$ karma start karma.conf.js
INFO [karma]: Karma v0.12.32 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 39.0.2171 (Linux)]: Connected on socket CO5e5TAX7Pv9PzqGAAAA with id 34588683
Chrome 39.0.2171 (Linux): Executed 2 of 2 SUCCESS (0.06 secs / 0.048 secs)

提示执行2个测试,成功两个.

7:参考链接
http://bower.io/
http://jasmine.github.io/
http://karma-runner.github.io/0.13/index.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: