网易技术干货 | 云信Web SDK测试实践

一、项目介绍

网易云信于2015年成立,为网易集团下属的内资公司,总部位于杭州。除资深老杭研外,团队核心90%来自硅谷、百度、腾讯、阿里、华为等大型企业/独角兽公司,平均行业经验10年以上,掌握业内领先的IM及实时视频通讯系统研发技术。凭借集团的强大优势、团队的专业能力及24小时全天候的运维支持服务,截止当前,网易云信产品已覆盖用户7亿+,覆盖196个国家,覆盖地区567个。

云信IM即时通讯为方便开发者接入提供了包含iOS、AOS、PC、Web的SDK开发包,基本涵盖了能够用到的接口,开发者直接调用即可实现相应功能模块,极大的节省了开发周期,节省了开发成本;其中Web端的SDK是由JavaScript实现,本次就是针对Web端的JS-SDK接口测试分享经验。

二、karma框架介绍

1. karma介绍

Karma 是一个基于 Node.js 的 JavaScript 测试执行过程管理工具(Test Runner)。该工具可用于测试所有主流 Web 浏览器,也可以集成到 CI(Continuous integration)工具,还可以和其他代码编辑器一起使用。Karma 会监控配置文件中所指定的每一个文件,每当文件发生改变,它都会向测试服务器发送信号,来通知所有的浏览器再次运行测试代码。此时,浏览器会重新加载源文件,并执行测试代码。其结果会传递回服务器,并以某种形式显示给开发者。

1.1 框架结构

karma是一种C/S架构的服务框架,包含 client 和 server,通讯方式基于 Http ,通常情况下,客户端和服务端基本都运行在开发者本地机器上

1.2 Server

  • 监听文件
  • 与 client 进行通讯
  • 向开发者输出测试结果
  • 提供 client 端所需的资源文件

1.2.1 Manager

主要责任就是跟 client 进行通讯,比如广播信号通知 client 开始测试以及收集 client 返回的测试结果,并且会与其他server的服务通信,比如用例执行完毕通知reporter服务生成测试报告。

1.2.2 Web Server

扫描二维码关注公众号,回复: 9830364 查看本文章

主要是提供访问本地静态资源用的,这里的资源包含:JS 测试框架,断言库,测试用例以及它的依赖等,client通过http获取必要资源执行用例。

1.2.3 Reporter

主要是生成测试结果,数据来源是Manager统计的测试结果

1.2.4 File System Watcher

主要是监听本地文件改变,内部维护了一个数据模型,包含所有测试相关的文件,它能保证 Web Server拉取的静态资源都是最新的,同时也能保证文件访问成本以及网络成本,永远只加载修改的文件。

1.3 client

client是测试文件真正运行的地方,比如一个 PC,iphone,tablet 端的浏览器,通常情况下跟 server 是同一个物理机,当然也可以运行在不同的机器,通过 HTTP 来通讯。一个server可以支持多个client执行用例。

1.3.1 Manager

这里主要是跟 server 进行消息通讯,以及与其它 client 组成部分进行交互,比如测试框架 mocha

1.3.2 Testing Framework

测试框架不是系统的一部分,karma 灵活支持第三方测试框架,以插件的形式接入。

1.3.3 Tests and Code under Test

这里包含用户所有的测试相关文件,它是通过 web-server 模块来获取,测试文件由 test framework 来执行。

2、jasmine介绍

Jasmine即是上面所说的JavaScript测试框架。它不依赖于其他任何JavaScript组件,它有干净的语法,Jasmine断言库可以让你简单的写出测试代码,(断言:表示为一些布尔表达式,你可以采用假设的方式,当程序输出的结果是否与假设的结果一致时,断言为真,否则,断言为假)在karma上运行Jasmine可以完成JavaScript的自动化测试、生成覆盖率报告等,jasmine单元测试有二个核心的部分:describe 函数块和it函数块。具体语法可查询网上资料。

三、框架搭建

1、node.js安装

下载最新版node.js安装,node.js集成的有npm包管理工具

2、初始化项目

创建一个文件夹,在该文件夹内执行npm init命令,初始化项目,生成package.json文件

3、安装karma

执行npm install karma --save-dev命令,安装karma

4、初始化karma配置

执行karma init命令生成生成karma.conf.js文件

配置package.json文件,增加必要依赖,如图

 

  • karma-junit-reporter为测试报告插件,主要是生成测试报告
  • karma-phantomjs-launcher为无界面浏览器插件,主要是在服务器运行测试代码需要无界面的浏览器
  • karma-coverage为代码覆盖率插件,主要是统计被测试代码的覆盖率

5、karma.conf.js文件配置

5.1 配置执行用例浏览器

browsers: ['ChromeHeadless']

目前karma支持浏览器列表如下

  • Chrome and Chrome Canary
  • Firefox
  • Safari
  • PhantomJS
  • JSDOM
  • Opera
  • Internet Explorer
  • SauceLabs
  • BrowserStack

5.2 配置测试报告生成

reporters: ['dots', 'junit'],

junitReporter: {

outputFile: 'test-results.xml'

},

5.3 配置karma server端口

port: 9876,

5.4 配置测试用例集

其中spec目录下面存放的是sdk被测试文件,case/const.js是配置全局的登录账号和jasmine超时配置,case/nim/init.js是初始化登录实现。测试文件的引入一定要先引入sdk文件,然后再引入全局配置文件,再初始化登录实现用例,顺序不能乱掉。

6、关键部分实现

6.1 初始化登录

调用SDK的SDK.NIM.getInstance()方法初始化登录,返回nim全局对象,登录成功后调用onconnect()方法,不同的登录状态会调用不同的方法,可根据调用不同方法实现对登录后的操作。it()方法是jasmine语法,在初始化登录后断言登录是否成功。

6.2消息发送

调用初始化登录的nim对象的sendText方法实现消息的发送,发送成功后sdk会调用sendMsgDone()方法返回结果,it()方法中对返回的结果断言,这里使用jasmine异步功能,当spec执行完成之后需要调用done 来告诉Jasmine异步操作已经完成,可以在全部配置文件case/const.js中配置jasmine异步的超时时间,配置项为

jasmine.DEFAULT_TIMEOUT_INTERVAL

四、环境隔离

由于Web SDK有测试、预发、线上多套环境,所以对于环境的测试区分还是非常有必要的,karma的运行需要运行karma.conf.js文件,所有配置多套karma.conf.js文件就可以做到不同环境的使用不同的karma.conf.js文件做到环境隔离,可以使用同一个package.json文件配置执行不同环境的命令,例如测试环境配置测试环境的karma.conf.js,预发和线上同样,这样只需要执行命令npm run test/pre/online从而达到环境隔离。

五、Jenkins集成

由于js的运行是基于node,所以对于持续集成只需要服务器上面装有node.js便可以实现每日构建,而且karma和jasmine对于linux都是支持的,上面介绍的karma-phantomjs-launcher插件可以解决服务器上面没有浏览器的问题,phantomjs是一种无界面化浏览器,这样测试代码的运行就不依赖于浏览器。

运行结果:

六、搭建远程服务

由于开发者实现Web SDK方式是多样的,所以对于测试来讲可以搭建一个远程测试服务,这样不仅可以实现PC端的测试,同时手机端的测试也是可以的。

配置karma.conf.js

singleRun:false

singleRun=false是指用例运行完毕不关闭浏览器,这样就可以在服务器上面启动karma服务,通过访问http://ip+端口方式访问karma获取到测试资源执行测试用例。这样就可以忽略终端的限制,不管是什么终端的浏览器都可以通过这种方式执行测试用例,再生成该终端的浏览器的测试报告。

前面讲到karma server的File System Watcher功能,它可以动态的更新测试资源,所以karma服务启动后,如果SDK有修改只要更换SDK文件即可,浏览器即可获取到最新的SDK测试资源,测试用例文件同样。

七、总结

使用karma+jasmine框架实现Web SDK的测试,可以很好的避免手工测试繁琐和效率低下的问题,每次版本回归不仅节约了时间,也保障了项目的质量。其实很多项目中的JavaScript都可以使用该框架进行测试,不仅仅作为测试的一种工具,也可以作为前端开发者单元测试的一种手段。

发布了90 篇原创文章 · 获赞 18 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/netease_im/article/details/104844965