TheIntern JS測試框架：我可以在瀏覽器客戶端中定製測試的輸出嗎？

Question

在我的平等測試中，我需要比較兩個具有非常直觀的圖形表示的數據結構，可以在HTML5畫布上輕鬆顯示。

我可以編寫某種插件來改變報告不匹配的方式，即並排顯示兩個畫布和其他UI元素以幫助用戶進行視覺測試嗎？

我開始看着自定義記者，這是我開始想出來的（爲了簡單，沒有畫布）。

define([], function() { 
    var MyReporter = function (config) { 
    this.document = config.document || window.document; 
    this.localStorage = config.localStorage || window.localStorage; 
    }; 

    MyReporter.prototype.testStart = function (test) { 
    test.correctResult = this.localStorage.getItem("uts." + test.parent.name + "." + test.name); 
    }; 

    MyReporter.prototype.testEnd = function (test) { 
    var me = this; 

    var div = this.document.createElement("DIV"); 
    if (test.hasPassed) { 
     div.innerHTML = test.name + ": OK"; 
    } 
    else { 
     if ("actual" in test.error && "expected" in test.error) { 
     div.innerHTML = test.name + ": Fail. Do you want to set '" + test.error.actual + "' as the new expected result?"; 
     var btn = document.createElement("BUTTON"); 
     btn.innerHTML = "Mark as correct"; 
     btn.addEventListener("click", function() { 
      me.localStorage.setItem("uts." + test.parent.name + "." + test.name, test.error.actual); 
     }, false); 
     div.appendChild(btn); 
     } 
     else { 
     div.innerHTML = test.name + ": Fail."; 
     } 
    } 
    this.document.body.appendChild(div); 
    }; 

    return MyReporter; 
}); 

基本上，如果有一個平等的斷言錯誤輸出定製，爲用戶提供了標記的結果是正確的（我需要這個，因爲沒有初始地面真實，什麼是正確的選擇，什麼不是;用戶應該檢查實際和預期的圖形表示並接受一次）。

我的實際問題，在細節：

• 這是一個正確使用自定義功能記者的？
• 特別是，請注意，我在testStart事件中設置了test.correctResult，以便在我的套件中使用它。這個可以嗎？
• 目前我寫的記者輸出一個沉悶的黑色&白頁。我如何保留時尚的HtmlReporter視覺效果並自定義測試結果框的內部？不知何故，我在考慮繼承HtmlReporter，但在冒險進入它之前，我想要一些反饋。
• 是否可以將記者應用於單個測試套件？我有幾個測試，其中大多數是傳統的;我不希望我的習慣記者爲這些踢。但reporters設置是配置對象的全局。有沒有解決的辦法？

Answer 1

這是正確使用自定義記者功能嗎？

是的，記者是提供自定義輸出的預期方式。

特別是，請注意，我在testStart事件中設置了test.correctResult，以便在我的套件中使用它。這個可以嗎？

預計數據不會從記者流回測試過程。不能保證傳遞給記者的「測試」將成爲運行的實際測試對象（它甚至可能不是測試的實例）。預期的數據應該在測試中加載。你可以調用一個效用函數或使用測試函數包裝來避免重複儘可能多的代碼。

function addStorageTest(suite, testName, testFunc) { 
    suite[testName] = function() { 
     var correctResult = this.localStorage.getItem("uts." + 
      suite.name + "." + testName); 
     var actualResult = testFunc(); 
     assert.strictEqual(actualResult, correctResult); 
    } 
} 

var suite = { name: 'a suite' }; 
addStorageTest(suite, 'a test', function() { 
    // do test stuff 
    return result; 
}); 
addStorageTest(suite, 'another test', function() { 
    // do different test stuff 
    return result; 
}); 
registerSuite(suite); 

目前記者，我寫輸出沉悶的黑色&白頁。我如何保留時尚的HtmlReporter視覺效果並自定義測試結果框的內部？不知何故，我正在考慮繼承HtmlReporter，但在冒險進入它之前，我想要一些反饋。

子類化Html記者可能是最簡單的方法來保持相同的外觀。另一個選擇是自定義記者可以存儲生成報告所需的任何數據，然後在測試過程完成時立即在DOM中更新現有的Html報告。

是否可以將記者應用到單個測試套件？我有幾個測試，其中大多數是傳統的;我不希望我的習慣記者爲這些踢。但記者設置是配置對象的全局。有沒有解決的辦法？

目前沒有辦法過濾哪些測試和套件發送給記者，但記者可以過濾它收到的測試和套件。它可以檢查測試和套件ID，並僅處理與某些篩選器匹配的那些ID。過濾器本身可以使用記者配置屬性進行配置。