一、項(xiàng)目介紹

網(wǎng)易云信于2015年成立，為網(wǎng)易集團(tuán)下屬的內(nèi)資公司，總部位于杭州。除資深老杭研外，團(tuán)隊(duì)核心90%來(lái)自硅谷、百度、騰訊、阿里、華為等大型企業(yè)/獨(dú)角獸公司，平均行業(yè)經(jīng)驗(yàn)10年以上，掌握業(yè)內(nèi)領(lǐng)先的IM及實(shí)時(shí)視頻通訊系統(tǒng)研發(fā)技術(shù)。憑借集團(tuán)的強(qiáng)大優(yōu)勢(shì)、團(tuán)隊(duì)的專(zhuān)業(yè)能力及24小時(shí)全天候的運(yùn)維支持服務(wù)，截止當(dāng)前，網(wǎng)易云信產(chǎn)品已覆蓋用戶(hù)7億+，覆蓋196個(gè)國(guó)家，覆蓋地區(qū)567個(gè)。

云信IM即時(shí)通訊為方便開(kāi)發(fā)者接入提供了包含iOS、AOS、PC、Web的SDK開(kāi)發(fā)包，基本涵蓋了能夠用到的接口，開(kāi)發(fā)者直接調(diào)用即可實(shí)現(xiàn)相應(yīng)功能模塊，極大的節(jié)省了開(kāi)發(fā)周期，節(jié)省了開(kāi)發(fā)成本；其中Web端的SDK是由JavaScript實(shí)現(xiàn)，本次就是針對(duì)Web端的JS-SDK接口測(cè)試分享經(jīng)驗(yàn)。

二、karma框架介紹

1. karma介紹

Karma 是一個(gè)基于 Node.js 的 JavaScript 測(cè)試執(zhí)行過(guò)程管理工具（Test Runner）。該工具可用于測(cè)試所有主流 Web 瀏覽器，也可以集成到 CI（Continuous integration）工具，還可以和其他代碼編輯器一起使用。Karma 會(huì)監(jiān)控配置文件中所指定的每一個(gè)文件，每當(dāng)文件發(fā)生改變，它都會(huì)向測(cè)試服務(wù)器發(fā)送信號(hào)，來(lái)通知所有的瀏覽器再次運(yùn)行測(cè)試代碼。此時(shí)，瀏覽器會(huì)重新加載源文件，并執(zhí)行測(cè)試代碼。其結(jié)果會(huì)傳遞回服務(wù)器，并以某種形式顯示給開(kāi)發(fā)者。

1.1 框架結(jié)構(gòu)

karma是一種C/S架構(gòu)的服務(wù)框架，包含 client 和 server，通訊方式基于 Http ，通常情況下，客戶(hù)端和服務(wù)端基本都運(yùn)行在開(kāi)發(fā)者本地機(jī)器上

1.2 Server

• 監(jiān)聽(tīng)文件
• 與 client 進(jìn)行通訊
• 向開(kāi)發(fā)者輸出測(cè)試結(jié)果
• 提供 client 端所需的資源文件

1.2.1 Manager

主要責(zé)任就是跟 client 進(jìn)行通訊，比如廣播信號(hào)通知 client 開(kāi)始測(cè)試以及收集 client 返回的測(cè)試結(jié)果，并且會(huì)與其他server的服務(wù)通信，比如用例執(zhí)行完畢通知reporter服務(wù)生成測(cè)試報(bào)告。

1.2.2 Web Server

主要是提供訪問(wèn)本地靜態(tài)資源用的，這里的資源包含：JS 測(cè)試框架，斷言庫(kù)，測(cè)試用例以及它的依賴(lài)等，client通過(guò)http獲取必要資源執(zhí)行用例。

1.2.3 Reporter

主要是生成測(cè)試結(jié)果，數(shù)據(jù)來(lái)源是Manager統(tǒng)計(jì)的測(cè)試結(jié)果

1.2.4 File System Watcher

主要是監(jiān)聽(tīng)本地文件改變，內(nèi)部維護(hù)了一個(gè)數(shù)據(jù)模型，包含所有測(cè)試相關(guān)的文件，它能保證 Web Server拉取的靜態(tài)資源都是最新的，同時(shí)也能保證文件訪問(wèn)成本以及網(wǎng)絡(luò)成本，永遠(yuǎn)只加載修改的文件。

1.3 client

client是測(cè)試文件真正運(yùn)行的地方，比如一個(gè) PC，iphone，tablet 端的瀏覽器，通常情況下跟 server 是同一個(gè)物理機(jī)，當(dāng)然也可以運(yùn)行在不同的機(jī)器，通過(guò) HTTP 來(lái)通訊。一個(gè)server可以支持多個(gè)client執(zhí)行用例。

1.3.1 Manager

這里主要是跟 server 進(jìn)行消息通訊，以及與其它 client 組成部分進(jìn)行交互，比如測(cè)試框架 mocha

1.3.2 Testing Framework

測(cè)試框架不是系統(tǒng)的一部分，karma 靈活支持第三方測(cè)試框架，以插件的形式接入。

1.3.3 Tests and Code under Test

這里包含用戶(hù)所有的測(cè)試相關(guān)文件，它是通過(guò) web-server 模塊來(lái)獲取，測(cè)試文件由 test framework 來(lái)執(zhí)行。

2、jasmine介紹

Jasmine即是上面所說(shuō)的JavaScript測(cè)試框架。它不依賴(lài)于其他任何JavaScript組件，它有干凈的語(yǔ)法，Jasmine斷言庫(kù)可以讓你簡(jiǎn)單的寫(xiě)出測(cè)試代碼，（斷言：表示為一些布爾表達(dá)式，你可以采用假設(shè)的方式，當(dāng)程序輸出的結(jié)果是否與假設(shè)的結(jié)果一致時(shí)，斷言為真，否則，斷言為假）在karma上運(yùn)行Jasmine可以完成JavaScript的自動(dòng)化測(cè)試、生成覆蓋率報(bào)告等，jasmine單元測(cè)試有二個(gè)核心的部分：describe 函數(shù)塊和it函數(shù)塊。具體語(yǔ)法可查詢(xún)網(wǎng)上資料。

三、框架搭建

1、node.js安裝

下載最新版node.js安裝，node.js集成的有npm包管理工具

2、初始化項(xiàng)目

創(chuàng)建一個(gè)文件夾，在該文件夾內(nèi)執(zhí)行npm init命令，初始化項(xiàng)目，生成package.json文件

3、安裝karma

執(zhí)行npm install karma --save-dev命令，安裝karma

4、初始化karma配置

執(zhí)行karma init命令生成生成karma.conf.js文件

配置package.json文件，增加必要依賴(lài)，如圖

?

• karma-junit-reporter為測(cè)試報(bào)告插件，主要是生成測(cè)試報(bào)告
• karma-phantomjs-launcher為無(wú)界面瀏覽器插件，主要是在服務(wù)器運(yùn)行測(cè)試代碼需要無(wú)界面的瀏覽器
• karma-coverage為代碼覆蓋率插件，主要是統(tǒng)計(jì)被測(cè)試代碼的覆蓋率

5、karma.conf.js文件配置

5.1 配置執(zhí)行用例瀏覽器

browsers: ['ChromeHeadless']

目前karma支持瀏覽器列表如下

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

5.2 配置測(cè)試報(bào)告生成

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

junitReporter: {

outputFile: 'test-results.xml'

},

5.3 配置karma server端口

port: 9876,

5.4 配置測(cè)試用例集

其中spec目錄下面存放的是sdk被測(cè)試文件，case/const.js是配置全局的登錄賬號(hào)和jasmine超時(shí)配置，case/nim/init.js是初始化登錄實(shí)現(xiàn)。測(cè)試文件的引入一定要先引入sdk文件，然后再引入全局配置文件，再初始化登錄實(shí)現(xiàn)用例，順序不能亂掉。

6、關(guān)鍵部分實(shí)現(xiàn)

6.1 初始化登錄

調(diào)用SDK的SDK.NIM.getInstance()方法初始化登錄，返回nim全局對(duì)象，登錄成功后調(diào)用onconnect()方法，不同的登錄狀態(tài)會(huì)調(diào)用不同的方法，可根據(jù)調(diào)用不同方法實(shí)現(xiàn)對(duì)登錄后的操作。it()方法是jasmine語(yǔ)法，在初始化登錄后斷言登錄是否成功。

6.2消息發(fā)送

調(diào)用初始化登錄的nim對(duì)象的sendText方法實(shí)現(xiàn)消息的發(fā)送，發(fā)送成功后sdk會(huì)調(diào)用sendMsgDone()方法返回結(jié)果，it()方法中對(duì)返回的結(jié)果斷言，這里使用jasmine異步功能，當(dāng)spec執(zhí)行完成之后需要調(diào)用done 來(lái)告訴Jasmine異步操作已經(jīng)完成，可以在全部配置文件case/const.js中配置jasmine異步的超時(shí)時(shí)間，配置項(xiàng)為

jasmine.DEFAULT_TIMEOUT_INTERVAL。

四、環(huán)境隔離

由于Web SDK有測(cè)試、預(yù)發(fā)、線上多套環(huán)境，所以對(duì)于環(huán)境的測(cè)試區(qū)分還是非常有必要的，karma的運(yùn)行需要運(yùn)行karma.conf.js文件，所有配置多套karma.conf.js文件就可以做到不同環(huán)境的使用不同的karma.conf.js文件做到環(huán)境隔離，可以使用同一個(gè)package.json文件配置執(zhí)行不同環(huán)境的命令，例如測(cè)試環(huán)境配置測(cè)試環(huán)境的karma.conf.js，預(yù)發(fā)和線上同樣，這樣只需要執(zhí)行命令npm run test/pre/online從而達(dá)到環(huán)境隔離。

五、Jenkins集成

由于js的運(yùn)行是基于node，所以對(duì)于持續(xù)集成只需要服務(wù)器上面裝有node.js便可以實(shí)現(xiàn)每日構(gòu)建，而且karma和jasmine對(duì)于linux都是支持的，上面介紹的karma-phantomjs-launcher插件可以解決服務(wù)器上面沒(méi)有瀏覽器的問(wèn)題，phantomjs是一種無(wú)界面化瀏覽器，這樣測(cè)試代碼的運(yùn)行就不依賴(lài)于瀏覽器。

運(yùn)行結(jié)果：

六、搭建遠(yuǎn)程服務(wù)

由于開(kāi)發(fā)者實(shí)現(xiàn)Web SDK方式是多樣的，所以對(duì)于測(cè)試來(lái)講可以搭建一個(gè)遠(yuǎn)程測(cè)試服務(wù)，這樣不僅可以實(shí)現(xiàn)PC端的測(cè)試，同時(shí)手機(jī)端的測(cè)試也是可以的。

配置karma.conf.js

singleRun：false

singleRun=false是指用例運(yùn)行完畢不關(guān)閉瀏覽器，這樣就可以在服務(wù)器上面啟動(dòng)karma服務(wù)，通過(guò)訪問(wèn)http://ip+端口方式訪問(wèn)karma獲取到測(cè)試資源執(zhí)行測(cè)試用例。這樣就可以忽略終端的限制，不管是什么終端的瀏覽器都可以通過(guò)這種方式執(zhí)行測(cè)試用例，再生成該終端的瀏覽器的測(cè)試報(bào)告。

前面講到karma server的File System Watcher功能，它可以動(dòng)態(tài)的更新測(cè)試資源，所以karma服務(wù)啟動(dòng)后，如果SDK有修改只要更換SDK文件即可，瀏覽器即可獲取到最新的SDK測(cè)試資源，測(cè)試用例文件同樣。

七、總結(jié)

使用karma+jasmine框架實(shí)現(xiàn)Web SDK的測(cè)試，可以很好的避免手工測(cè)試繁瑣和效率低下的問(wèn)題，每次版本回歸不僅節(jié)約了時(shí)間，也保障了項(xiàng)目的質(zhì)量。其實(shí)很多項(xiàng)目中的JavaScript都可以使用該框架進(jìn)行測(cè)試，不僅僅作為測(cè)試的一種工具，也可以作為前端開(kāi)發(fā)者單元測(cè)試的一種手段。

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的网易技术干货 | 云信Web SDK测试实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。