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。过滤器本身可以使用记者配置属性进行配置。