将附加 html 添加到特定测试的 QUnit 输出结果答案

【问题标题】：Add append html to QUnit output results for specific tests将附加 html 添加到特定测试的 QUnit 输出结果
【发布时间】：2016-09-01 21:40:38
【问题描述】：

我正在测试一组算法。每个都有相同的目的，但有不同的结果，可以在图表中以图形方式查看。

我对每个算法都有单元测试。我想在适当的 QUnit 测试输出结果中有一个链接，可以打开正在测试的算法的图表。

问题是我找不到这样做的非黑客方式。到目前为止我最好的主意：

首先，编写测试：

module("Test algo 1");

test("test with inputs 1", ...);
test("test with inputs 2", ...);

然后编写单独的代码，记录应该在代码中添加什么链接：

addAlgoLink("Test algo 1", "test with inputs 1", function()
{
    // on click code for the link that displays the
    // input/output data on a graph
})

那么addAlgoLink()的实现会：

在所有测试完成时向 QUnit 添加回调。
测试完成后，查看 QUnit 结果的 DOM 以查找具有匹配模块名称和测试名称的条目，然后附加一个链接，其中包含提供给 addAlgoLink() 的回调。为每个测试使用 QUnit 的哈希 ID 会更容易，因为它在 DOM 中使用，但我找不到从测试定义中访问测试 ID 的方法

问题：

无法处理同名模块中的多个测试（虽然我不知道 QUnit 是否支持这个）
需要复杂的代码来处理不同深度的测试（嵌套模块）
看起来真的很老套。

也许 QUnit 可以以更优雅的方式进行扩展？例如。在测试代码中，可以调用一个方法来指定单击回调，该回调作为链接插入，这样就无需再次指定测试和模块名称。然后扩展 QUnit 结果输出器以显示链接。也许它可以存储在 QUnit 的 Test 对象中，尽管我认为这样做所需的大多数或所有方法等都是私有的，这使得这看起来不可能（并不是说这是一个好主意）。

首先，我正在尝试做的只是一个非常糟糕的主意吗？还是只是解决方案必须混乱？

【问题讨论】：

标签： javascript qunit

【解决方案1】：

诀窍是在测试中使用QUnit.config.current.testId 来记录它的id。

先写一个这样的测试：

QUnit.test("Test 1", function( assert )
{
    addTestAppendage("Test 1", QUnit.config.current.testId);
    assert.ok(true);
});

然后使用此代码在结果中查找添加的测试，并在测试结果行中附加一个按钮，单击该按钮会运行关闭。

var appendages = [];
var addTestAppendage = function(testName, testId){
    appendages [testId] = testName;
};

QUnit.testDone(function(details){
    if (typeof appendages[details.testId] !=== 'undefined')
    {
        var testRowSelector = "#qunit-test-output-" + details.testId;
        var testRow = $(testRowSelector);
        testRow.append("<button class=\"view\">View Graph</button>");
        var viewButtonSelector = testRowSelector + " button.view";
        $(viewButtonSelector).on('click', function(){
            // do stuff given the test name
            console.log(details.name);
        });
    }
});

【讨论】：