本期，我們要討論的話題是 JavaScript 的測(cè)試，以檢查組件的狀態(tài)和工作方式是否符合預(yù)期，還會(huì)介紹一個(gè)可以方便編寫測(cè)試用例的測(cè)試方法。這里說(shuō)的測(cè)試當(dāng)然是使用自動(dòng)化的測(cè)試手段，這是軟件質(zhì)量保證(QA)的重要環(huán)節(jié)。就本系列文章介紹的 Smart Queue 來(lái)說(shuō)，我們的測(cè)試目標(biāo)包括：

• Task 對(duì)象的創(chuàng)建：第二期的代碼提供了多種創(chuàng)建方式，需要測(cè)試對(duì)象創(chuàng)建后的狀態(tài)。
• Queue 內(nèi)的任務(wù)運(yùn)行次序：我們提供了兩種改變運(yùn)行次序的方式：優(yōu)先級(jí)和依賴配置，同樣也要測(cè)試各種配置對(duì)次序的影響。

對(duì)于第一個(gè)目標(biāo)，只需檢查對(duì)象創(chuàng)建后的屬性是否符合預(yù)期即可。我們已經(jīng)多次提到“符合預(yù)期”，斷言(Assert)正是為此而設(shè)計(jì)的。簡(jiǎn)單的說(shuō)，斷言就是確保所測(cè)試的表達(dá)式結(jié)果為“真”，否則，以某種方式通知測(cè)試人員，并幫助其定位斷言失敗的測(cè)試用例。
第二個(gè)目標(biāo)稍稍有點(diǎn)復(fù)雜。由于我們?cè)诮M件編碼實(shí)現(xiàn)的時(shí)候，將排序后的隊(duì)列(_sorted)隱藏在了閉包中，所以外部是無(wú)法訪問(wèn)的。有兩種方法可以考慮：(1)重構(gòu)代碼，增加代碼的可測(cè)試性，又有兩種重構(gòu)方法：(a)設(shè)置 debug 開關(guān)，打開時(shí)將 _sorted 暴露給外部；(b)增加獨(dú)立文件，以構(gòu)建的方式拼接代碼最終生成一個(gè)測(cè)試版本。(2)測(cè)試行為的結(jié)果而不是過(guò)程，前一種方法實(shí)質(zhì)上是深入到組件的運(yùn)行時(shí)狀態(tài)，而這個(gè)方法只是檢查組件的運(yùn)行結(jié)果。本期選用后一種種測(cè)試方式，第一種測(cè)試方式留給有興趣的讀者練習(xí):)

需要說(shuō)明的是，我個(gè)人不贊成第一種的方法a. 為什么呢？我先說(shuō)一下這個(gè)任務(wù)隊(duì)列的設(shè)計(jì)理念：

• 它只是一個(gè)隊(duì)列，只負(fù)責(zé)“按需”調(diào)整任務(wù)的運(yùn)行次序，不關(guān)注任務(wù)的個(gè)體細(xì)節(jié)。換句話說(shuō)，它操作整體的任務(wù)，而不關(guān)心任務(wù)具體的行為和表現(xiàn)。
• 它是個(gè)安全的隊(duì)列，使用者（第一期提到的“客戶”）可以放心把任務(wù)添加進(jìn)去，不用擔(dān)心這個(gè)任務(wù)信息會(huì)被其他客戶看到。需要說(shuō)明的是，第二期實(shí)現(xiàn)代碼中有 SmartQueue.Queue = [[], [], []], 結(jié)果是外部可以訪問(wèn)到隊(duì)列項(xiàng)。代碼僅供介紹之用，你可以安全地刪除 SmartQueue.Queue = 來(lái)達(dá)成安全控制。

回到剛才討論的話題，設(shè)置 debug 開關(guān)后，任務(wù)信息就潛在的泄漏可能性。進(jìn)一步地，繼續(xù)改造代碼也可以達(dá)成在使用 debug 開關(guān)時(shí)的安全性，做法是將開關(guān)的控制放在 SmartQueue 的構(gòu)造函數(shù)中，這樣要求 SmartQueue 實(shí)現(xiàn) Singleton 模式（見上一篇文章）；一旦創(chuàng)建對(duì)象后，不允許修改閉包內(nèi)的 debug 標(biāo)記。

在編寫具體測(cè)試代碼前，我們?cè)O(shè)計(jì)了一個(gè)測(cè)試方法，以簡(jiǎn)化測(cè)試代碼（主要是用例）的編寫。簡(jiǎn)單地說(shuō)，就是將測(cè)試用例與測(cè)試本身的代碼分離――前者以語(yǔ)義良好的方式編寫，后者是一次性編寫，用于處理前者設(shè)定的測(cè)試用例。用例編寫者需要寫格式形如這樣的代碼：

  <ul id="J_test_cases">    <li>      <pre>task = new sq.Task({fn: function() { log('unamed') }})</pre>      <ul>        <li>typeof task.fn === 'function'</li>        <li>task.name === 't0'</li>        <li>task.level === 1</li>        <li>task.dependencies.length === 0</li>        <li>task.context == window</li>      </ul>    </li>    <li>      <pre>task = new sq.Task({fn: function() { log('unamed') }, name: 'hello'})</pre>      <ul>        <li>task.name === 'hello'</li>        <li>task.level === 1</li>      </ul>    </li>  </ul>

ul li pre (CSS 選擇器路徑，下同)中寫要測(cè)試的代碼，相當(dāng)于前置操作；ul ul li 中對(duì)這個(gè)代碼進(jìn)行斷言測(cè)試，可以編寫多條斷言。這里建議對(duì)基本數(shù)據(jù)類型使用 === 和 !=== 運(yùn)算符以加強(qiáng)對(duì)數(shù)據(jù)類型的預(yù)期判斷。

接下來(lái)，我們編寫兩個(gè) helper 方法用來(lái)輸出和測(cè)試：

function log(str) {  node.value += str + '/n';}function assert(expression) {  var flag;  eval('flag = ' + expression);  return typeof(flag) === 'boolean' && flag;}

log 用來(lái)向文本框追加信息，assert 用來(lái)測(cè)試傳入表達(dá)式的值。測(cè)試方法如下（這里使用了 jQuery）：

var sq = SmartQueue, task, total = 0, passed = 0, failed = 0;$('#J_test_cases').children().each(function(index) {  eval($('pre', this).text());  task.register();  $('li', this).each(function() {    var item = $(this);    var flag = assert(item.text());    if(flag) passed ++; else failed ++;    item.prepend((flag ? '<font color="green">[PASS]</font>' : '<font color="red">[FAIL]</font>') + ' ');    total++;  }).wrap('<pre></pre>');}).end().before('<p>Total: ' + total + ', passed: '+ passed +', failed: ' + failed + '</p>');sq.fire();

這個(gè)結(jié)構(gòu)還可改進(jìn)一下，比如輸出測(cè)試說(shuō)明而不是具體的代碼，也可以增加后置操作，這里就不再演示了。你還可以查看完整的測(cè)試頁(yè)面，含有 23 個(gè)測(cè)試用例和完整的測(cè)試實(shí)現(xiàn)。

~~~~~~~~~~~~~ 八卦分割線 ~~~~~~~~~~~~~

好吧，我們已經(jīng)體會(huì)到了思考和行動(dòng)的樂(lè)趣，走到了系列文章的尾聲，但這只是開始。我們經(jīng)歷了一個(gè)很小的實(shí)用組件的實(shí)現(xiàn)全過(guò)程，領(lǐng)略到了 JavaScript 世界的精彩，讓我們繼續(xù)前行~

JavaScript技術(shù)：JavaScript 組件之旅（四）：測(cè)試 JavaScript 組件，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。