TheIntern JS 测试框架：我可以在浏览器客户端中自定义测试输出吗？

Question

在我的等式测试中，我需要比较两个数据结构，它们具有非常直观的图形表示，可以在 HTML5 canvas.

上轻松显示

我能否编写某种插件来改变报告不匹配的方式，即并排显示两个 canvases 和额外的 UI 元素来帮助用户在进行视觉测试？

我开始研究自定义记者，这就是我开始想出的（为简单起见，没有 canvases）。

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

Is this a proper use of the custom reporters feature?

是的，记者是提供自定义输出的预期方式。

In particular, note that I set test.correctResult in the testStart event, to use it in my suite. Is this ok?

预计数据不会从报告器流回测试过程。不能保证传递给报告者的 "test" 将是运行的实际测试对象（它甚至可能不是 Test 的实例）。预期数据应加载到测试本身中。您可以调用实用函数或使用测试函数包装器来避免重复代码。

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);

Currently the reporter I wrote outputs a dull black & white page. How can I retain the stylish HtmlReporter visuals and customize the inside of the test result box? I was thinking of subclassing HtmlReporter, somehow, but before venturing into it I would like some feedback.

继承 Html 记者可能是保持相同外观的最简单方法。另一种选择是自定义报告程序存储生成报告所需的任何数据，然后在测试过程完成后立即在 DOM 中更新现有的 Html 报告。

Is it possible to apply the reporter to a single test suite? I have several tests, most of them traditional; I don't want my custom reporter to kick in for those. But the reporters setting is a global of the config object. Is there a way around this?

目前无法过滤发送给报告者的测试和套件，但报告者可以过滤它收到的测试和套件。它可以检查测试和套件 ID，并且只处理那些与某些过滤器匹配的 ID。过滤器本身可以使用 reporter config 属性.

进行配置

TheIntern JS 测试框架：我可以在浏览器客户端中自定义测试输出吗？

TheIntern JS testing framework: can I customize the output of a test in the browser client?

intern