AngularJS实际项目应用——单元测试框架设计
|
转自：http://www.cnblogs.com/vipyoumay/p/5331787.html
先决条件
创建项目webstorm中创建空白web项目
创建html、js文件夹在项目中创建2个文件夹分别用于存放项目中用到的html、js文件。 安装框架安装前端框架项目中的前端框架主要为angularjs相关的框架,为了安装框架方便可安装bower包管理器。 1) 安装bower包管理器在webstorm的terminal中执行脚本 npm install bower -save
2) 初始化bower.json文件执行脚本生成bower.json文件，用于管理bower的依赖和配置。 bower init
3) 安装angular等框架除了项目要用到的angular框架外还需要安装angular-mocks框架 install bootstrap -save
install angular -install angular-mocks -save
安装服务器端框架服务器依赖于nodejs，需要安装nodejs的包，首先在根目录下创建package.json文件。 1)安装http-server模块install http-server -save
2)安装其他模块
启动服务器要启动node服务器需要在package.json中配置script节点,dependencies中定义依赖包，在script配置start节点用于启动服务器，test节点的内容会在后面讲解。 "name": "angularjs-test",
"version": "0.0.1",21)">"dependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"karma-junit-reporter": "^0.4.1",
"protractor": "^3.2.1"
},21)">"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1",
"pretest": "test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run"
}
配置后运行命令,启动服务器，浏览器上输入http://localhost:8000 npm start
开始单元测试编写功能代码在文件js中新建js文件index.js。在index.js中定义congroller,实现简单累加方法add,代码如下: /** * Created by stephen on 2016/3/24. */
(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);
在文件html中新建html文件index.html，加入两个输入框用户获取输入，当输入后绑定controller中的add方法实现计算器功能，代码如下: <!DOCTYPE html>
<html lang="en" ng-app"app"> headmeta charset"UTF-8"title>index</title> </headbodydiv ngcontroller"indexCtrl"input type"text"model"a" value"0"> + "b"> =span id'result'>{{add(a,b)}}/span> </div/body> </htmlscript src"/bower_components/angular/angular.min.js"></script> <script src="/bower_components/angular-mocks/angular-mocks.js"></script> "/js/index.js"/script>
启动服务器看到下图效果
编写测试代码在test文件夹中新建文件index-test.js用于编写index.js的单元测试。 'use strict';
describe(function () {
beforeEach(module('app'));
describe(function () {
it('add 测试', inject(function ($controller) {
var $scope = {};
//spec body
var indexCtrl = $controller({$scope: $scope});
expect(indexCtrl).toBeDefined();
expect($scope.add(2, 3)).toEqual(5);
}));
});
});
单元测试配置初始化karma配置文件,用于配置karma，执行命令 karma init
在karma配置文件代码中每个节点都有默认注释请参看 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: [
'bower_components/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',21)">'js/index.js',21)">'test/index-test.js'
],
// 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: // 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,
plugins: [
'karma-chrome-launcher',21)">'karma-jasmine',21)">'karma-junit-reporter'
],
junitReporter: {
outputFile: '/test_out/unit.xml',
suite: 'unit'
}
})
}
在package.json scripts 配置测试信息,指定karma文件地址 "test": "karma startkarma.conf.js",
运行单元测试运行命令，执行测试 test 运行结果如下，可以看到通过测试：
调试单元测试除了运行测试外，很多时候需要调试测试，在karma弹出网页中点击debug,进入http://localhost:9876/debug.html页面，就可以用chrome自带的调试工具调试代码了：
单元测试覆盖率如果需要对单元测试覆盖率进行统计，可以安装karma-coverage并配置karma文件。这样在单元测试完成后，会生成测试覆盖率报告文档。 install karma-coverage -save
在karma.conf.js文件中加入节点 // 新增节点用于配置输出文件夹
coverageReporter: {
type: 'html',
dir: 'coverage'
},
// 新增节点用于配置需要测试的文件地址（这里是controller地址）
preprocessors: {'js/*.js': ['coverage']}
// 新增元素'karma-coverage'
plugins: [
'karma-junit-reporter',21)">'karma-coverage',
],
// 新增元素 coverage
reporters: ['progress', 'coverage'],
运行单元测试后在目录中生成coverage文件夹，点击index.html可以查看测试覆盖率。
E2E测试e2e或者端到端（end-to-end）或者UI测试是一种测试方法，它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之，它从一个用户的角度出发，认为整个系统都是一个黑箱，只有UI会暴露给用户。 配置E2E测试新建文件夹e2e-test新建protractor.conf.js文件,用于配置protractor框架，代码如下。 exports.config = {
allScriptsTimeout: 11000,
baseUrl: 'http://localhost:8000/app/',
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
// Spec patterns are relative to the configuration file location passed
// to protractor (in this example conf.js).
// They may include glob patterns.
specs: ['*.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: // Use colors in the command line report.
},
defaultTimeoutInterval: 30000
};
配置package.json scripts脚本节点 "preupdate-webdriver": "npminstall",
"update-webdriver": "webdriver-managerupdate",21)">"preprotractor": runupdate-webdriver",21)">"protractor": "protractore2e-test/protractor.conf.js"
编写e2e测试脚本设计测试用例：文本框a的值录入1，文本框b录入2，期望结果3 describe('index.html',255)">function() {
beforeEach(function() {
browser.get('http://localhost:8000/html');
});
it('get index html',255)">function() {
var a = element(by.model('a'));
var b = element(by.model('b'));
a.sendKeys(1);
b.sendKeys(2);
var result = element(by.id('result'));
expect(result.getText()).toEqual('3');
});
});
执行测试查看测试结果 需要执行命名,查看是否更新webdriver(什么是webdriverhttp://sentsin.com/web/658.html), 注:安装或更新webdriver需要FQ，请在webstrom中设置代理地址。 set PROXY=http://localhost:1080
set HTTP_PROXY=%PROXY%
set HTTPS_PROXY=%PROXY%
代理设置成功后，运行以下命令 npm run update-webdriver 执行e2e测试,这是会弹出浏览器，自动点击浏览器，录入脚本输入完成自动化e2e测试，其本质还是调用selenium测试。 npm run protractor
参考资料[1] 官方测试demohttps://github.com/angular/angular-seed [2] protractor 官方文档http://angular.github.io/protractor/#/tutorial [3] 自动化E2E测试http://sentsin.com/web/658.html [4] karma官方文档https://karma-runner.github.io/latest/intro/configuration.html [5] angular单元测试官方文档https://docs.angularjs.org/guide/unit-testing 源码地址https://github.com/stephen-v/angular-e2etest-showcase
=================================================================
上面这篇文章是简单的angular单元测试，如果用到requirejs，angularAMD等框架，配置起来会更复杂一些，具体的可以参考一下这篇文章：
https://monkeyissexy.github.io/2016/08/17/karma_jasmine_with_requirejs_angularjs/。
这里我要说几点：
1）controller中用了ngload类似的异步加载机制，去加载文件，在用karma跑的时候有时候会出错，因为不能保证ngload已经把文件加载进来了。我们看上面的测试case都是用$controller方法去实例化controller的，这样就会出我说的问题。所以需要改用$injector.instantiate这个方法去实例化，用instantiate这个方法，对controller的写法有要求，可以参考我介绍controller的文章，怎么写controller，下面看一个例子：
var ldapCtrlInst = $injector.instantiate(LDAPCtrlDef,{
$scope:scope,ldapSrv:ldapSrv,uiGridUtils:{
createGridOptions:function(){return {};},resetGridSelection:jasmine.createSpy('resetGridSelection')
},modalUtils:{
showDlg:function(){
var deferred = $q.defer();
deferred.resolve("");
return deferred.promise;
}
}
});上面代码中的LDAPCtrlDef是通过define把ldap.controller.js引入进来时的变量，然后$scope,ldapSrv,uiGridUtils等都是需要注入controller的参数。
2）由于是单元测试，不需要真正调用后台的service，可以用下面的方式进行模拟
var deferred = $q.defer();
deferred.resolve({resultCode:"200",resultObject:[]});
spyOn(ldapSrv,'listLDAP').and.returnValue(deferred.promise); 3）在it方法里记得调用scope.$digest();触发angular的变量改变绑定机制
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |