html - 测试结果在 QUnit 中不可见,尽管它们运行

标签 html css qunit

我有很多这样的 QUnit 测试:

test('some test.', function() {
    equal(1, 1, "dummy");
});

我还有一个包含测试套件的 .html 文件:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-store" />
<title>QUnit Test Suite</title>
<link rel="stylesheet"
    href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css"
    media="screen">
    <script data-main="MainTest" src="lib/require.js"></script>
</head>
<body>  
    <div id="qunit"></div>
    <div id="dialog"></div>     
    <div id="test-content"></div>
</body>
</html>

我的问题是,当我打开这个 .html 文件 (testsuite.qunit.html) 时,我有时看不到任何结果,只是一个空白页面。有时我会看到一些结果。所有测试都已运行,我可以在顶部看到它:

Tests completed in 64 milliseconds. 161 assertions of 161 passed, 0 failed.

我检查了 qunit 生成的 html,似乎 QUnit 未能将 pass css 类添加到某些测试中。这是一个可见的:

<li id="qunit-test-output-ca229798" class="pass">
<strong><span class="test-name">decorated web service call test</span>
<b class="counts">(1)</b></strong>
<a href="test.js">Rerun</a><span class="runtime">5082 ms</span>
<ol class="qunit-assert-list qunit-collapsed"></ol></li>

这是一个不可见的:

<li id="qunit-test-output-ca229798">
<strong><span class="test-name">decorated web service call test</span>
<b class="counts">(1)</b></strong>
<a href="test2.js">Rerun</a><span class="runtime">5082 ms</span>
<ol class="qunit-assert-list qunit-collapsed"></ol></li>

可能是什么问题?

最佳答案

大多数时候我看到它是出于以下两个原因之一:

(1) 源代码中的错误(这似乎不太可能,因为有时测试对你来说很好),或者

(2) 一些源代码是异步的,因此可能会出现竞争条件。

如果您有任何异步代码(ajax 调用、setTimeout、setInterval 等),那么您需要使用 QUnit async control机制:

QUnit.test('a test with async code', function(assert) {
    var done = assert.async();  // tell QUnit you plan to do async stuff

    callSomeAsyncFunction(function() {
        // this is the callback for the async action

        // all of your assertions here

        done(); // tell QUnit you're done with async actions
    });
});

我建议您通过注释掉测试 block 并最终缩小到有时通过有时停止的单个测试来缩小导致问题的测试范围。

关于html - 测试结果在 QUnit 中不可见,尽管它们运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28321905/

相关文章:

javascript - 如何从 div 级别删除动态生成的字段?

javascript - QUnit 中的 'Q' 代表什么?

javascript - 类似于asp.net母版页的客户端解决方案

javascript - 如何使用 "is"扩展原生 DOM 元素?

HTML Bootstrap - 类似时间轴

php - 如何将每个数字在不同字段中的电话号码插入数据库?

jquery - 来自 Fancybox 画廊的图像对齐

css - 具有 100% 高度和边距底部的 Bootstrap 卡片

自定义函数的 JavaScript 单元测试

javascript - 为什么框架内的异常在 qUnit 中得不到通知?