http://www.cnblogs.com/vipyoumay/p/5331787.html

转载 2017年01月03日 10:16:53

先决条件

  • 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',
      ],
// 新增元素 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: 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:1080
set 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



以上内容有任何错误或不准确的地方请大家指正,不喜勿喷! 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如果觉得还有帮助的话,可以点一下右下角的【推荐】,希望能够持续的为大家带来好的技术文章!想跟我一起进步么?那就【关注】我吧。

相关文章推荐

linux/unix僵尸进程(转自http://www.cnblogs.com/newpanderking/p/3784328.html)

什么是僵尸进程?

mongodb中的副本集搭建实践(转自:http://www.cnblogs.com/visionwang/p/3290435.html)

准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb)。sudo mongod --replSet application --dbpath /data/node1/ --port 9...

http://www.cnblogs.com/vigiles/p/3643489.html

Hadoop上路-04_HBase0.98.0入门 以下操作在Hadoop分布式集群基础上进行。 一。分布式环境搭建 下载:http://www.apache.org/dyn/closer....

关于js中数据类型的探讨,转载http://www.cnblogs.com/sharpxiajun/p/4133462.html

今天看到在看有关js中基本数据类型和引用类型的知识点,看到一篇博文,感觉作者分析的很深入,写得很明白,故此转载一下。 转载出处:http://www.cnblogs.com/sharpxiajun/p...

http://www.cnblogs.com/sucan/p/5021285.html

优秀程序员的七大特征,你具备几条? 世界上的很多事情都是有规律的,就像 《高效能人士的七个习惯》,优秀的程序员也有七个主要特征。这些特征有些是先天具备的,也就是天赋,但有些是在日常的...

浅谈JavaScript、ES5、ES6 ,,转自http://www.cnblogs.com/lovesong/p/4908871.html

什么是JavaScriptJavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。(好吧,概念什么最讨厌了)动态:在运行时确定数据类型。变量使用之前不需要类...

http://www.cnblogs.com/nzbbody/p/3504199.html

C++ int与string的转化 int本身也要用一串字符表示,前后没有双引号,告诉编译器把它当作一个数解释。缺省情况下,是当成10进制(dec)来解释,如果想用8进制,16进制,怎么办?加上...

Android网络开启、关闭整理http://www.cnblogs.com/huazaizai/p/3398675.html

出自:http://www.cnblogs.com/huazaizai/p/3398675.html WiFi、GPRS、飞行模式的开启、关闭以及一些状态的检测 1 ...
  • tcgwl
  • tcgwl
  • 2013-11-14 10:57
  • 1015

http://www.cnblogs.com/worldtraveler/p/4736643.html

AFN 一、什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 ...

Lambda表达式详解(原文:张龙豪 http://www.cnblogs.com/knowledgesea/p/3163725.html)

Lambda表达式详解 原文链接:http://www.cnblogs.com/knowledgesea/p/3163725.html 前言         1、天真热,程序员活着不...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)