Intern JSテストフレームワーク：ブラウザクライアントでテストの出力をカスタマイズできますか？

Question

私の平等テストでは、HTML5キャンバス上に簡単に表示可能な、本当に直感的なグラフィック表現を持つ2つのデータ構造を比較する必要があります。

ミスマッチがどのように報告されるかを変更するプラグインを作成することができます。つまり、2つのキャンバスを並べて表示し、ユーザーが視覚的なテストを行うのを助ける追加の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の設定はconfigオブジェクトのグローバルです。これを回避する方法はありますか？

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レポートを一度に更新することです。

レポーターを1つのテストスイートに適用することは可能ですか？私にはいくつかのテストがあり、そのほとんどは伝統的です。私は自分のカスタムレポーターがそれらのために蹴り込むことを望んでいません。しかし、記者の設定はconfigオブジェクトのグローバルです。これを回避する方法はありますか？

現在、テストとスイートをレポーターに送信するものをフィルターに掛ける方法はありませんが、レポーターは受け取ったテストとスイートをフィルターに掛けることができます。テストIDとスイートIDを検査し、いくつかのフィルタに一致するものだけを処理できます。フィルタ自体は、レポータ設定プロパティを使用して設定できます。