http://www.cnblogs.com/vipyoumay/p/5331787.html
来源:互联网 发布:php轮子是什么意思 编辑:程序博客网 时间:2024/06/05 09:45
- angular单元测试与集成测试实践
- 先决条件
- 创建项目
- webstorm中创建空白web项目
- 创建html、js文件夹
- 安装框架
- 安装前端框架
- 1) 安装bower包管理器
- 2) 初始化bower.json文件
- 3) 安装angular等框架
- 安装服务器端框架
- 1)安装http-server模块
- 2)安装其他模块
- 启动服务器
- 安装前端框架
- 开始单元测试
- 编写功能代码
- 编写测试代码
- 单元测试配置
- 运行单元测试
- 调试单元测试
- 单元测试覆盖率
- E2E测试
- 配置E2E测试
- 编写e2e测试脚本
- 执行测试查看测试结果
- 参考资料
- 源码地址 https://github.com/stephen-v/angular-e2etest-showcase
先决条件
- nodejs
- webstorm
创建项目
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框架
bower install bootstrap -save
bower install angular -save
bower install angular-mocks -save
安装服务器端框架
服务器依赖于nodejs,需要安装nodejs的包,首先在根目录下创建package.json文件。
1)安装http-server模块
npm install http-server -save
2)安装其他模块
- jasmine-core:javascript单元测试框架;
- karma:模拟javascript脚本在各种浏览器执行的工具;
- karma-chrome-launcher: 在chrome浏览器执行的工具;
- karma-jasmine: jasmine-core在karma中的适配器;
- karma-junit-reporter: 生成junit报告;
- protractor:E2E测试框架
启动服务器
要启动node服务器需要在package.json中配置script节点,dependencies中定义依赖包,在script配置start节点用于启动服务器,test节点的内容会在后面讲解。
"name": "angularjs-test", "version": "0.0.1", "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" }, "scripts": { "postinstall": "bower install", "prestart": "npm install", "start": "http-server -a localhost -p 8000 -c-1", "pretest": "npm install", "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"><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>
启动服务器看到下图效果
编写测试代码
在test文件夹中新建文件index-test.js用于编写index.js的单元测试。
'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,执行命令
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', 'js/index.js', '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: 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, plugins: [ 'karma-chrome-launcher', 'karma-jasmine', 'karma-junit-reporter' ], junitReporter: { outputFile: '/test_out/unit.xml', suite: 'unit' } })}
在package.json scripts 配置测试信息,指定karma文件地址
"test": "karma start karma.conf.js",
运行单元测试
运行命令,执行测试
npm test
运行结果如下,可以看到通过测试:
调试单元测试
除了运行测试外,很多时候需要调试测试,在karma弹出网页中点击debug,进入http://localhost:9876/debug.html页面,就可以用chrome自带的调试工具调试代码了:
单元测试覆盖率
如果需要对单元测试覆盖率进行统计,可以安装karma-coverage并配置karma文件。这样在单元测试完成后,会生成测试覆盖率报告文档。
npm install karma-coverage -save
在karma.conf.js文件中加入节点
// 新增节点用于配置输出文件夹coverageReporter: { type: 'html', dir: 'coverage' },// 新增节点用于配置需要测试的文件地址(这里是controller地址)preprocessors: {'js/*.js': ['coverage']}// 新增元素'karma-coverage'plugins: [ 'karma-chrome-launcher', 'karma-jasmine', 'karma-junit-reporter', 'karma-coverage', ],// 新增元素 coveragereporters: ['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: true, // Use colors in the command line report. }, defaultTimeoutInterval: 30000};
配置package.json scripts脚本节点
"preupdate-webdriver": "npm install","update-webdriver": "webdriver-manager update","preprotractor": "npm run update-webdriver","protractor": "protractor e2e-test/protractor.conf.js"
编写e2e测试脚本
设计测试用例:文本框a的值录入1,文本框b录入2,期望结果3
describe('index.html', function() { beforeEach(function() { browser.get('http://localhost:8000/html'); }); it('get index html', 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(什么是webdriver http://sentsin.com/web/658.html),
手动安装protractor至全局npm i -g protractor
注:安装或更新webdriver需要FQ,请在webstrom中设置代理地址。
在webstrom
中切换至Terminal
窗口,在Terminal
窗口通过以下方式设置代理:
set PROXY=http://localhost:1080set HTTP_PROXY=%PROXY%set HTTPS_PROXY=%PROXY%
代理设置成功后,运行以下命令
npm run update-webdriver
执行e2e测试,这是会弹出浏览器,自动点击浏览器,录入脚本输入完成自动化e2e测试,其本质还是调用selenium测试。
npm run protractor
参考资料
[1] 官方测试demo https://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
- http://www.cnblogs.com/vipyoumay/p/5331787.html
- http://www.cnblogs.com/flylovesky/p/3274869.html
- http://www.cnblogs.com/ada-zheng/p/3284660.html
- http://www.cnblogs.com/zhanghaiba/p/3548602.html
- http://www.cnblogs.com/scy251147/p/3566638.html
- http://www.cnblogs.com/amosli/p/3577645.html
- http://www.cnblogs.com/VisualImage/p/3594973.html
- http://www.cnblogs.com/kuangbin/p/3164106.html
- http://www.cnblogs.com/wengzilin/p/3530712.html
- http://www.cnblogs.com/qingjoin/p/3549325.html
- http://www.cnblogs.com/interdrp/p/3785164.html
- http://www.cnblogs.com/ruiati/p/3930732.html
- http://www.cnblogs.com/knowledgesea/p/3491214.html
- http://www.cnblogs.com/ganganloveu/p/3755191.html
- http://www.cnblogs.com/kenshincui/p/3885689.html
- http://www.cnblogs.com/lanxuezaipiao/p/3440471.html
- http://www.cnblogs.com/wangfupeng1988/p/4001284.html
- http://www.cnblogs.com/kissazi2/p/4133927.html
- 7种常见的APPUI界面设计布局风格欣赏
- windows 查询进程及端口号,杀掉进程
- 【Java】关于二叉树的广度优先遍历及完全二叉树判定算法
- Android 三角标签控件、角标(AvatarLabelView)
- oracle 更新日期
- http://www.cnblogs.com/vipyoumay/p/5331787.html
- 【BZOJ 3697】采药人的路径 树上点分治
- oracle删除重复数据,只留一条数据
- day08
- makefile 的过程
- PHP 代码规范简洁之道
- HTTP常见请求状态码
- 关于iOS基础总结(4)--动画、MVVM、图片缓存、常用第三方
- Android什么时候只会调用onPause()而不会调用onStop()?