前端測試（2）--QUnit

RebeccaZhong 發(fā)布于2019-08-22 16:30 / 1684人閱讀

摘要：全局檢查，如果勾選了這項，在進行測試之前，會檢查測試之前和測試之后對象中的屬性，如果前后不一樣，就會顯示不通過。

1、簡介

QUnit是前端單元測試的框架，與java的JUnit相似，首先安裝QUnit，有三種方式：

官網(wǎng)下載源文件

引用CDN

使用 bower 安裝( bower install --save-dev qunit ) 或使用npm安裝( npm install --save-dev qunitjs )

2、常用代碼簡介

2.1 開始測試

QUnit.test( name, expected, test ) ：一個常規(guī)的測試用例。測試用例名、期待斷言數(shù)、測試內(nèi)容（一般是一個function）。

QUnit.asyncTest( name, expected, test ) ：一個異步測試用例。默認的test都是同步的。內(nèi)容中必須顯示地調(diào)用start()，測試才會開始。

QUnit.module( name, lifecycle ) ：定義一個名為name的模塊。在可選參數(shù)lifecycle中，可以定義模塊開始和結(jié)束的測試內(nèi)容。具體見文檔。

QUnit.init( ) ：啟動QUnit測試。如果測試在進行中，則會重新啟動。基本不用。

2.2 QUnit斷言方法

assert.ok( state, message ) ：真假斷言，state為true則通過。類似于JUnit的assertTrue。

assert.equal( actual, expected, message ) ：相等斷言，actual和expected相等（==）則通過。類似于JUnit的assertEquals。
assert.notEqual( actual, expected, message )不等斷言，actual和expected不相等（!=）則通過。類似于JUnit的assertNotEquals。

assert.deepEqual( actual, expected, message )遞歸相等斷言，actual和expected全相等（包括其子元素都相等，適用于基本類型，數(shù)組和對象）則通過。對于基本類型，相當于strictEqual,可以通過{key : value}是否相等比較兩個對象是否相等。
assert.notDeepEqual( actual, expected, message )遞歸不相等斷言，actual和expected不全相等（包括其子元素都相等，適用于基本類型，數(shù)組和對象）則通過。對于基本類型，相當于notStrictEqual。

assert.strictEqual( actual, expected, message )全相等斷言，actual和expected全相等（===）則通過。
assert.notStrictEqual( actual, expected, message )不全相等斷言，actual和expected不全相等（===）則通過。

assert.propEqual(value, expected[, message]) 比較真實和期待（expected ）的對象的屬性和屬性值是否相同，相同斷言通過，注意這個方法可以比較構(gòu)造函數(shù)和原型不同的兩個對象
assert.notPropEqual(value, expected[, message]) 與propEqual相反。

assert.expect( amount )本測試里期待會執(zhí)行amount個斷言，大于或少于這個數(shù)量，測試都將失敗。

assert.raises( block, expected, message )異常斷言，block中拋出異常則通過，expected為可選參數(shù)，是所期待拋出異常名的正則表達式。

2.3 把QUnit集成到現(xiàn)有工具

QUnit在執(zhí)行的過程中會調(diào)用一系列函數(shù)，告知外界運行狀況，大家可以覆蓋這些函數(shù)，達到集成的目的。

QUnit.begin()當QUnit開始時會調(diào)用此函數(shù)。
QUnit.done()當QUnit結(jié)束后會調(diào)用此函數(shù)。

QUnit.moduleStart({ name })每當一個模塊執(zhí)行開始時會調(diào)用此函數(shù)。
QUnit.moduleDone({ name, failed, passed, total })每當一個模塊執(zhí)行結(jié)束后會調(diào)用此函數(shù)。

QUnit.testStart({ name })：測試執(zhí)行開始時會調(diào)用此函數(shù)。
QUnit.testDone({ name, failed, passed, total })每當一個測試執(zhí)行結(jié)束后會調(diào)用此函數(shù)。

QUnit.log({ result, actual, expected, message })：斷言執(zhí)行結(jié)束后會調(diào)用此函數(shù)。

在后面的實例中，我寫了一些覆蓋，打印了執(zhí)行過程。相信有了這些回調(diào)函數(shù)的幫助，寫一個進度條出來也不是難事。

2.4 QUnit的過濾器

Hide passed tests：隱藏通過的測試，勾選后通過的測試就不顯示。使用了HTML5的sessionStorage技術(shù)，頁面重新載入的時候只測試之前那部分沒有通過的case。

Check for Globals：”全局檢查“，如果勾選了這項，在進行測試之前，QUnit會檢查測試之前和測試之后window對象中的屬性，如果前后不一樣，就會顯示不通過。

No try-catch： QUnit不使用try-catch跑測試，當有異常拋出的時候，測試運行器會停止運行，但會獲得一個內(nèi)部異常，在我們使用老瀏覽器（例如ie6）做測試的時候會有幫助。

Rerun：重新測試該用例

Enable coverage：查看測試代碼的覆蓋率，需要引入文件sap.ui.qunit.qunit-coverage

2.5 QUnit Test對象

QUnit的每個test函數(shù)都會生成Test類相應的實例，每個實例都5個生命周期，每個Test實例的生命周期方法都會順序加入config.queue中順序執(zhí)行，生命周期如下：

init

setup

run函數(shù)負責運行正真的測試代碼

teardown

finish負責將統(tǒng)計好的測試結(jié)果顯示到頁面上

如果run中有異步的代碼，順序執(zhí)行run、teardown和finish之后，異步代碼還沒執(zhí)行，其測試的結(jié)果就無法正確統(tǒng)計。因此應調(diào)用Qunit.start()和Qunit. stop()函數(shù)，分別設置config.blocking true或者false來控制執(zhí)行隊列暫停或執(zhí)行，從而等待異步代碼執(zhí)行，正確統(tǒng)計執(zhí)行結(jié)果。

更多API參考官網(wǎng)文檔：https://qunitjs.com/

云服務器 GPU云服務器 Qunit 前端測試 web前端測試 ajax前端測試工具

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94414.html

關于前端開發(fā)談談單元測試

摘要：很快我發(fā)現(xiàn)有一個誤區(qū)，許多人認為單元測試必須是一個集中運行所有單元的測試，并一目了然。許多人認為單元測試，甚至整個測試都是在編碼結(jié)束后的一道工序，而修復也不過是在做垃圾掩埋一類的工作。單元測試Unit Test 很早就知道單元測試這樣一個概念，但直到幾個月前，我真正開始接觸和使用它。究竟什么是單元測試？我想也許很多使用了很久的人也不一定能描述的十分清楚，所以寫了這篇文章來嘗試描述它...

0x584a 2019-05-29 16:19 評論0 收藏0
譯：你該使用什么單元測試，Qunit、Jasmine還是Mocha？

摘要：不論你是在寫瀏覽器端還是后端的，總存在那么一個問題我該使用什么單元測試庫去確保我的代碼如預期的運行呢總是有那么一些流行的框架可供選擇。在中仍然流行，并且擁有來自許多地方性的支持。如果你的測試使用它，直到調(diào)用了才能通過。不論你是在寫瀏覽器端javascript還是后端的nodejs，總存在那么一個問題：我該使用什么單元測試庫去確保我的代碼如預期的運行呢？總是有那么一些流行的框架可供選擇...

Forelax 2019-08-21 14:14 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現(xiàn)在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網(wǎng)頁分...

FullStackDeveloper 2019-08-22 16:48 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現(xiàn)在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網(wǎng)頁分...

20171112 2019-08-29 15:12 評論0 收藏0