成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Mocha瀏覽器測(cè)試入門教程

Aldous / 2522人閱讀

摘要：在中，需要添加源代碼以及斷言庫(kù)運(yùn)行測(cè)試使用瀏覽器打開，就會(huì)運(yùn)行測(cè)試，并且看到運(yùn)行結(jié)果可知，測(cè)試通過(guò)使用命令行測(cè)試對(duì)于習(xí)慣在終端敲命令行的程序員來(lái)說(shuō)，用瀏覽器打開去進(jìn)行測(cè)試顯得非常不合時(shí)宜。

摘要： 如何使用Mocha在瀏覽器中測(cè)試JavaScript代碼？

本文所有代碼都在Fundebug/mocha-browser-test倉(cāng)庫(kù)中。

在玩轉(zhuǎn)Node.js單元測(cè)試博客中，我介紹了測(cè)試框架Mocha，對(duì)后端Node.js代碼進(jìn)行測(cè)試。在這篇博客，我將介紹如何使用Mocha在瀏覽器中測(cè)試JavaScript代碼。

mocha init：初始化測(cè)試代碼

安裝mocha(在國(guó)內(nèi)使用cnpm比npm更快):

sudo cnpm install -g mocha

執(zhí)行mocha init命令，可以自動(dòng)生成瀏覽器端的測(cè)試文件：

mocha init test

mocha會(huì)自動(dòng)創(chuàng)建一個(gè)test目錄，其中有4個(gè)文件，分別是：

mocha.js：Mocha源碼

mocha.css：Mocha源碼

tests.js：測(cè)試代碼

index.html：瀏覽器測(cè)試入口頁(yè)面

mocha.js與mocha.css是Mocha模塊自身的源代碼，因?yàn)樾枰跒g覽器中展示測(cè)試結(jié)果，因此需要Mocha的CSS文件；tests.js為測(cè)試代碼，為空文件，需要我們編寫；index.html為運(yùn)行測(cè)試的入門頁(yè)面，使用瀏覽器大概它就會(huì)運(yùn)行測(cè)試，并且展示測(cè)試結(jié)果。

index.html是理解Mocha瀏覽器測(cè)試的關(guān)鍵：



  
    Mocha

可知：

index.html中導(dǎo)入了mocha.js, mocha.css和tests.js文件；

id為mocha的div是空的，測(cè)試結(jié)果的元素會(huì)插入到這個(gè)div；

mocha.setup("bdd")指定使用Mocha的BDD接口，mocha.run()表示運(yùn)行測(cè)試，測(cè)試代碼tests.js必須放在兩者之間，否則不會(huì)運(yùn)行測(cè)試；

運(yùn)行測(cè)試案例 add.js

使用mocha init生成的測(cè)試代碼中沒(méi)有實(shí)際的測(cè)試案例，不妨添加一個(gè)簡(jiǎn)單的add.js：

function add(a, b)
{
    return a + b;
}

可知，add是一個(gè)非常簡(jiǎn)單的加法函數(shù)。

tests.js

在tests.js添加針對(duì)add函數(shù)的測(cè)試代碼：

var should = chai.should();

describe("測(cè)試add函數(shù)", function()
{
    it("1加1等于2", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });

    it("1加2等于3", function()
    {
        var sum = add(1, 2);
        should.equal(sum, 3);
    });
});

在測(cè)試代碼中，我使用了斷言庫(kù)Chai。

index.html

在index.html中，需要添加源代碼add.js以及斷言庫(kù)chai.js：



  
    Mocha
運(yùn)行測(cè)試

使用瀏覽器打開index.html，就會(huì)運(yùn)行測(cè)試，并且看到運(yùn)行結(jié)果：

可知，測(cè)試通過(guò):)

mocha-phantomjs：使用命令行測(cè)試

對(duì)于習(xí)慣在終端敲命令行的程序員來(lái)說(shuō)，用瀏覽器打開index.html去進(jìn)行測(cè)試顯得非常不合時(shí)宜。

還好，有所謂的headless的瀏覽器PhantomJS，它沒(méi)有圖形界面，卻可以運(yùn)行前端代碼，方便用來(lái)測(cè)試。

mocha-phantomjs命令

安裝phantomjs和mocha-phantomjs(phantomjs模塊更名為phantomjs-prebuilt)：

sudo cnpm install -g phantomjs-prebuilt mocha-phantomjs

將Mocha和PhontomJS結(jié)合起來(lái)的是mocha-phantomjs，在終端執(zhí)行mocha-phantomjs命令，它會(huì)在PhantomJS中執(zhí)行Mocha測(cè)試代碼，并將結(jié)果展示在終端，非常方便：

mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html


  測(cè)試add函數(shù)
    ? 1加1等于2
    ? 1加2等于3


  2 passing (7ms)

--path選項(xiàng)指定了phantomjs的安裝路徑。這個(gè)必須指定，否則會(huì)報(bào)錯(cuò)"phantomjs terminated with signal SIGSEGV"。

另外，測(cè)試代碼tests.js中必須有describe語(yǔ)句，否則使用mocha-phantomjs執(zhí)行時(shí)會(huì)報(bào)錯(cuò)"mocha.run() was called with no tests"。

npm test命令

mocha-phantomjs的測(cè)試命令比較長(zhǎng)，可以在package.json中配置npm的test腳本：

 "scripts": {
    "test": "mocha-phantomjs --path /usr/local/bin/phantomjs ./test/index.html"
  },

這樣，執(zhí)行npm test命令就可以運(yùn)行測(cè)試。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95218.html

相關(guān)文章

  • Mocha 和 Chai 入門初探

    摘要：轉(zhuǎn)載自樓主個(gè)人博客和入門初探在和作比較的時(shí)候兩者主要的不同就是的集成度比較高內(nèi)置斷言庫(kù)而需要搭配額外的斷言庫(kù)在此選擇了比較流行的作為斷言庫(kù)風(fēng)格的選擇其中又有好幾種斷言風(fēng)格我們經(jīng)常見到的其實(shí)就是風(fēng)格的其中我較喜歡因?yàn)樗梢灾苯右詫傩缘姆绞角度? 轉(zhuǎn)載自樓主個(gè)人博客 Mocha 和 Chai 入門初探 Chai 在和 jest 作比較的時(shí)候, 兩者主要的不同就是 jest 的集成度比較高內(nèi)置...

    caoym 評(píng)論0 收藏0

  • 前端單元測(cè)試 實(shí)現(xiàn)教程 mocha + mochawesome + istanbul + sinon

    摘要：為什么要寫單元測(cè)試減少提高代碼質(zhì)量，保證你的代碼是可測(cè)試的放心重構(gòu)當(dāng)你每個(gè)方法都寫了單元測(cè)試的時(shí)候，你每一個(gè)改動(dòng)都會(huì)影響相應(yīng)的單元測(cè)試，這樣你不用費(fèi)盡心思的考慮哪里會(huì)有影響，特別是復(fù)雜項(xiàng)目或非核心功能不易被測(cè)試到，從而導(dǎo)致的產(chǎn)生。 為什么要寫單元測(cè)試 減少bug 提高代碼質(zhì)量，保證你的代碼是可測(cè)試的 放心重構(gòu) 當(dāng)你每個(gè)方法都寫了單元測(cè)試的時(shí)候，你每一個(gè)改動(dòng)都會(huì)影響相應(yīng)的單元測(cè)試，這...

    AaronYuan 評(píng)論0 收藏0

  • Vue單元測(cè)試實(shí)戰(zhàn)教程(Mocha/Karma + Vue-Test-Utils + Chai)

    摘要：在前端進(jìn)階之路前端架構(gòu)設(shè)計(jì)測(cè)試核心這邊文章中通過(guò)分析了傳統(tǒng)手工測(cè)試的局限性去引出了測(cè)試驅(qū)動(dòng)開發(fā)的理念并介紹了一些測(cè)試工具這篇文章我將通過(guò)一個(gè)的項(xiàng)目去講解如何使用且結(jié)合官方推薦的去進(jìn)行單元測(cè)試的實(shí)戰(zhàn)一安裝我為本教程寫一個(gè)示例庫(kù)您可以直接 在《前端進(jìn)階之路: 前端架構(gòu)設(shè)計(jì)(3) - 測(cè)試核心》這邊文章中, 通過(guò)分析了傳統(tǒng)手工測(cè)試的局限性 去引出了測(cè)試驅(qū)動(dòng)開發(fā)的理念, 并介紹了一些測(cè)試工具....

    RebeccaZhong 評(píng)論0 收藏0

  • 使用karma+mocha+chai+sinon+@vue/test-utils為你的組件庫(kù)增加單元

    摘要：但是，項(xiàng)目中的一些公共封裝，比如公共的組件公用的功能模塊等是可以使用單元測(cè)試的。因此特為組件庫(kù)引入單元測(cè)試，目的在于能減少組件的，避免重復(fù)的發(fā)布不必要的包。 項(xiàng)目github地址：https://github.com/yuanalina/installAsRequired這里必須要提前說(shuō)明，前端項(xiàng)目的單元測(cè)試不是必須的，特別是業(yè)務(wù)型項(xiàng)目，增加單元測(cè)試反而會(huì)成為累贅，增加開發(fā)成本且無(wú)意義...

    happen 評(píng)論0 收藏0

  • Ajax單元測(cè)試傻瓜教程

    摘要：原文出處單元測(cè)試傻瓜教程請(qǐng)求經(jīng)常容易發(fā)生錯(cuò)誤，客戶端發(fā)送的數(shù)據(jù)出問(wèn)題，服務(wù)器端返回的數(shù)據(jù)有誤都會(huì)導(dǎo)致請(qǐng)求錯(cuò)誤。設(shè)置在我們開始單元測(cè)試之前，我們需要安裝幾個(gè)必須的工具。我們將用它來(lái)向你們展示如何對(duì)進(jìn)行單元測(cè)試。 原文出處 ：AJAX單元測(cè)試傻瓜教程 Ajax 請(qǐng)求經(jīng)常容易發(fā)生錯(cuò)誤，客戶端發(fā)送的數(shù)據(jù)出問(wèn)題，服務(wù)器端返回的數(shù)據(jù)有誤都會(huì)導(dǎo)致 Ajax 請(qǐng)求錯(cuò)誤。你不能保證與服務(wù)器的連接總是工作...

    30e8336b8229 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<