基于AngularJS开发撰写测试代码时的框架
来源:互联网 发布:java实施面试题 编辑:程序博客网 时间:2024/04/29 17:26
本文由Markdown语法编辑而成。
1. 前言:
在以“测试驱动开发”理念的推动下,测试已经变得越来越重要了。由于之前在做B/S项目的开发过程中前端采用了AngularJS框架。因此这里主要介绍AngularJS在进行测试时采用的框架和基本的测试原理。
关于测试的分类,在之前的博文中已经有所介绍。测试一般分为UT, IT和AT。在我所在的项目团队中,开发人员负责撰写UT和IT,测试人员负责撰写AT代码。
在AngularJS为框架的前端项目中,UT所采用的框架是Jasmine,IT和AT采用的框架是Protractor。以下分别介绍这两个框架。
2. 测试框架简介
在撰写测试代码之前,首先需要搭建测试的环境。在搭建测试环境前,需要预备的软件和包一般包括NodeJS, Grunt和WebStorm.
核心是Grunt。Grunt负责集成项目中的所有js文件。关于Grunt的介绍,可以阅读链接:
http://javascript.ruanyifeng.com/tool/grunt.html。而Grunt又是基于NodeJS的,因此如果要使用Grunt管理代码,就需要先安装NodeJS。WebStorm是开发前端代码的利器,而且它可以识别项目中的Gruntfile.js,自动将已经注册的任务都列举在窗口中。开发人员只需点击对应的task,即可自动化进行这些任务,大大提高了工作的效率。
如图所示是,当在WebStorm中加载项目后,打开Grunt窗口后,识别出的Gruntfile.js中列举的任务列表。开发和测试人员只需要双击对应的任务项,即可根据Grunt中的配置进行。
注意:为了使WebStorm能够识别项目中Gruntfile.js文件,需要进行相应的设置。需要设定nodeJS解释器的路径,和Node_modules中的grunt-cli的包的路径。
2.1 Jasmine
关于Jasmine的介绍,在前面的博文中已经有简要介绍。
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript framework. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
在Gruntfile.js中,
karma: { unit: { configFile: 'jstest/karma.config.js', runnerPort: 9876, browsers: ['Chrome'] }}
grunt.loadNpmTasks('grunt-karma');grunt.registerTask('test-karma', ['karma']);
是关于单体测试的设置。
configFile是指明karma.config.js的文件路径,runnerPort是测试启动一个Chrome浏览器,分配的端口号为9876。
在karma.config.js中是具体针对该项目的单体测试的设置,包括设置运行单体测试所依赖的js文件列表,所需要测试的文件名称,测试依赖的插件,测试报告的位置等信息。
karma.config.js的一般形式如下:
module.exports = function(config){ config.set( { // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '../vendors/angular/angular.js', '../vendors/angular/angular-mocks.js', '../vendors/jquery/jquery-2.1.3.min.js', '../scripts/yourFile.js', //这里是项目中的js文件列表 ......, {pattern: 'unit/***Test.js', included: true} ], // list of files to exclude exclude: [ ], // preprocess matching files before serving them to the browser preprocessors:{ } // test results reporter to use // possible values: 'dots', 'progress' reporters: ['progress', 'junit','coverage'], // 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 browsers: ['Chrome'], plugins: [ 'karma-coverage', 'karma-junit-reporter', 'karma-chrome-launcher', 'karma-jasmine' ], coverageReporter : { type : 'cobertura', //type : 'html', dir : '../TestDir/coverage/unit/' }, // Continuous Integration mode singleRun: true, // test report junitReporter : { outputFile: '../TestDir/TestResult/jsunit/unit.xml', suite: 'unit' } });};
2.2 Protractor
Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.
Protractor是一种端到端的测试框架。它会在一个真实的浏览器上运行测试,通过和用户实际可以完成的动作那样与浏览器进行交互。
因此,Protractor的测试思想是,模拟用户在页面加载成功后,在页面上进行的一系列操作的级联。
如在一个登陆界面中,模拟用户输入账号和密码后,点击“登陆”按钮进行登陆操作。
则测试的过程为,通过页面加载后各控件的ID或css等属性,定位出所要操纵的控件element, 然后再对这个element进行点击,双击,赋值等操作,然后预期这些操作后的结果是否和预期的结果相同,进行功能性验证。
参考链接:
- Jasmine: http://jasmine.github.io/2.0/introduction.html
- Protractor: http://www.protractortest.org/#/
- Grunt: http://www.gruntjs.net/
- Grunt: http://javascript.ruanyifeng.com/tool/grunt.html
- 基于AngularJS开发撰写测试代码时的框架
- 基于angularjs的前端开发框架 - PageSwitcher
- 基于CPPUNIT测试框架开发Android平台的测试程序
- 基于CPPUNIT测试框架开发Android平台的测试程序
- 撰写可测试的 JavaScript
- 基于测试的开发
- JEECG v2.3 基于代码生成器的智能开发框架
- 基于代码生成器的J2EE智能开发框架 JEECG
- 基于AngularJS的WebUI开发指南
- junit--基于测试开发和cobertura框架
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于DDD的.NET开发框架ABP实例,多租户 (Sass)应用程序,采用.NET MVC, Angularjs, EntityFramework-介绍
- 基于angularJS的前端自动化测试工具Protractor快速入门
- Android中获得上下文
- 自定义view的三种方式
- FileInputStream 和 FileOutputStream 封装文件的copy方法
- Structural Patterns Part 3/7: Composite Pattern
- Android 屏幕适配相关知识
- 基于AngularJS开发撰写测试代码时的框架
- 硬件加速导致的自定义drawable的内存泄漏
- 快速排序
- 【LQ系列】 杂谈 —— 聊一聊算法
- sqli-labs lesson-2
- MFC操作——滚动字幕(带资源)
- Stack Overflow技术报告给开发者哪些启示
- mysql 命令记录,逐步完善
- ACdream 1023 Xor