angularjs中的e2e测试实例,处理函数整理

今天我来实现一个简单的聊天室,后台用nodejs,
客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架.

1、concat() 连接两个或更多的数组
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
例如:

在上一篇文章里有讲到ng的单元测试,今天来说说e2e(端对端)测试.

初始工作

复制代码 代码如下:

当我们测试某个模块的单个功能点时,单元测试最适合,不过当面临用户进行多个页面交互的时候产生bug了,单元测试就不行了,这时候就得用e2e来模拟用户操作还原问题现场.当然利用e2e测试也能够测试程序的健壮性,很多单元测试办不到的事情,e2e测试都能够办到.

1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install
express –save,–save可以使包添加到package.json文件里.
2.安装socket.io,命令npm install socket.io –save.

 <script type=”text/javascript”>
        var arr = [1, 2, 3];
        var arr1 = [11, 22, 33];
        document.write(arr.concat(4, 5, arr1));
 </script>

之前,ng是利用Angular Scenario
Runner来运行e2e测试,现在已经换成Protractor来跑e2e了.

编写服务端代码

输出结果:
1,2,3,4,5,11,22,33

Protractor

首先我们通过express来托管网站,并附加到socket.io实例里,因为socket.io初次连接需要http协议

2、join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
例如:

Protractor是Angularjs里用来测试e2e的框架,它本身是一个npm模块,内部是构建在WebDriverJS之上的,Protractor能够真正让你的测试用例运行在浏览器上,完全模拟用户的真实行为.

复制代码 代码如下:

复制代码 代码如下:

下面贴上它的一些资源地址:

var express = require(‘express’),
    io = require(‘socket.io’);

 <script type=”text/javascript”>
       var arr = [‘item 1’, ‘item 2’, ‘item 3’];
       var list = ‘<ul><li>’ +
arr.join(‘</li><li>’) + ‘</li></ul>’;
 </script>

1.Protractor提供的测试api
2.Protractor简单使用例子
3.WebDriverJs指南,这是Protractor依赖的核心,npm模块名为selenium-webdriver

var app = express();

list结果:

Protractor运行原理

app.use(express.static(__dirname));

‘<ul><li>item 1</li><li>item
2</li><li>item 3</li></ul>’
这是迄今为止最快的方法!使用原生代码(如
join()),不管系统内部做了什么,通常比非原生快很多。——James Padolsey,
james.padolsey.com

Protractor运行e2e测试所依赖的主要有以下几个东西:

var server = app.listen(8888);

3、pop() 删除并返回数组的最后一个元素
pop()方法将删除数组的最后一个元素,把数组长度减
1,并且返回它删除的元素的值。
如果数组已经为空,则pop()不改变数组,并返回undefined值
例如:

1.WebDriver
APIs,就是上面提到的WebDriverJs,是由Selenium提供给前端测试用的相关js
api
2.Selenium Server,一个后端jar包,用来负责跟浏览器驱动进行通讯用的
3.WebDriver browser drivers,用来显示真实网站内容并与Selenium
Server通讯用,这里才是传递真实浏览器操作的地方

var ws = io.listen(server);

复制代码 代码如下:

整个运行过程如下图

添加服务器连接事件,当客户端连接成功之后,发公告告诉所有在线用户,并且,当用户发送消息时,发广播通知其它用户.

 <script type=”text/javascript”>
       var arr = [“George”, “John”, “Thomas”];
       document.write(arr + “<br/>”);
       document.write(arr.pop() + “<br/>”);
       document.write(arr);
 </script>

图片 1

复制代码 代码如下:

输出结果:
George,John,Thomas
Thomas
George,John

想了解更多关于这几个组件之前交互的可以点击这里

ws.on(‘connection’, function(client){
    console.log(‘\033[96msomeone is connect\033[39m \n’);
    client.on(‘join’, function(msg){
        // 检查是否有重复
        if(checkNickname(msg)){
            client.emit(‘nickname’, ‘昵称有重复!’);
        }else{
            client.nickname = msg;
            ws.sockets.emit(‘announcement’, ‘系统’, msg + ‘
加入了聊天室!’);
        }
    });
    // 监听发送消息
    client.on(‘send.message’, function(msg){
        client.broadcast.emit(‘send.message’,client.nickname,  msg);
    });
    // 断开连接时,通知其它用户
    client.on(‘disconnect’, function(){
        if(client.nickname){
            client.broadcast.emit(‘send.message’,’系统’, 
client.nickname + ‘离开聊天室!’);
        }
    })

4、push() 向数组的末尾添加一个或更多元素,并返回新的长度
例如:

利用ng种子项目来讲解e2e

})

复制代码 代码如下:

我们利用ng官方提供的种子项目来讲解一个真实的e2e例子,首先利用下面命令获取种子项目

由于客户端是通过昵称来标识的,所以服务端需要一个检测昵称重复的函数

 <script type=”text/javascript”>
       var arr = [“George”, “John”, “Thomas”];
       document.write(arr + “<br/>”);
       document.write(arr.push(“James”) + “<br/>”);
       document.write(arr);
 </script>

复制代码 代码如下:

复制代码 代码如下:

输出结果:
George,John,Thomas
4
George,John,Thomas,James

git clone

// 检查昵称是否重复
var checkNickname = function(name){
    for(var k in ws.sockets.sockets){
        if(ws.sockets.sockets.hasOwnProperty(k)){
            if(ws.sockets.sockets[k] &&
ws.sockets.sockets[k].nickname == name){
                return true;
            }
        }
    }
    return false;
}

 

然后运行

编写客服端代码

5、unshift() 向数组的开头添加一个或更多元素,并返回新的长度
例如:

复制代码 代码如下:

由于服务端采用第三方websokcet框架,所以前端页面需要单独引用socket.io客户端代码,源文件可以从socket.io模块里找,windows下路径为node_modules\socket.io\node_modules\socket.io-client\dist,这里有开发版和压缩版的,默认引用开发版就行.

复制代码 代码如下:

npm install

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图