Qunit错误：测试上下文之外的断言。

Question

我搜遍了所有地方，发现这个错误是由于没有正确使用asyncTest引起的。然而，根据文档，我似乎已经做得很对了。我猜可能是我在某个小细节上遗漏了什么，需要额外的眼睛来看一看...

我正在尝试测试一些代码，它会进行一个ajax请求以获取页面，然后将其加载到一个lightbox中。直到ajax调用完成并可以显示后，lightbox-content才会出现在DOM中。因此，我只能在我的onComplete回调函数中检查它，这里有我的测试以判断它是否正确加载。

这是我的代码：

asyncTest('mytest', 1, function() {
    utils.lightbox.show('/login', {
        onComplete: function() {
            ok($('#lighbox-content').is(':visible'), 'Lightbox loaded the /login page.');
            start();
        }
    });
});

我遇到了以下错误：

Uncaught Error: assertion outside test context, was at HTMLDivElement.window.utils

有人能看出我哪里错了吗？

- intargc

---

在您发布问题时，lighbox-content 中缺少的 t 是一个打字错误吗？ - David Harkness

我有相同的错误信息，错误出现在on('load'回调中而不是onComplete，但我认为在底层上都是一样的。你尝试过降级到不同的QUnit版本吗？ - Dan

Answer 1

据我所知，就我所能判断的来说，您的代码与文档相符。

更新

尽管文档中没有显示，但我想你可能必须在某个时候告诉 QUnit 停止，这样它就知道在测试函数返回后等待。我认为 QUnit 会假定这一点，因为这是一个异步测试，但这值得一试。

asyncTest('mytest', 1, function() {
    stop();
    ...
});

我一直在使用Sinon.JS来避免首先进行AJAX调用。这有三个立即的好处：

1. 我不依赖于服务器响应请求。
2. 我可以为每个测试指定不同的结果。
3. 测试运行速度更快。

模拟可以在XMLHttpRequest级别或jQuery方法上完成，而且非常容易。以下是我的一个测试示例：

module("geo", {
    setup: function () {
        this.server = sinon.fakeServer.create();
    },

    teardown: function () {
        this.server.restore();
    }
}

test("returns detected ZIP code", function () {
    this.server.respondWith("/geo/detect-zip-from-ip",
                            [ 200, { "Content-Type": "text/html" }, '90210' ]);
    geo.detectZip(function (zip) {
        assertThat(zip, is('90210'));
    });
    this.server.respond();
});

- David Harkness

---

谢谢David。我会试着玩一下这个并尝试一下。我还对Qunit问题很感兴趣。 - intargc

对我来说，这是"stop();"的问题。谢谢你提醒我。 :) - joaorodr84

@intargc 有没有解决这个问题的好运？ - David Harkness

Answer 2

我已经找到了我的问题的解决方案，希望你的问题也有相同的来源。

用语言解释：

• 我有一个复杂的异步测试
• 我有延迟事件，并且里面有ok和equal断言
• 当然，所有这些都包装在asyncTest中
• 但是，当测试“完成”并调用start()时，事件处理程序仍然存在
• 在调用start()之后，在该asyncTest内部进行的所有进一步的ok调用都变得非法
• 并抛出异常
• 我想知道如果expect（在您的示例中是第二个参数）中的数字超过了会发生什么。是否会出现相同的异常？

用代码解释：

    asyncTest('mytest', /*1,*/ function() {

          function imgLoadedOrFailed (result) {
              clearTimeout(imageTimeToLive);
              img.off();
              ok(result, 'Image in carousel pane has been loaded');
          }

          var imageTimeToLive = setTimeout(
                  imgLoadedOrFailed.bind(this, false), 
                  5000),
              img = panes[index].find('img:first');

          if (img) {
              img.on('load', imgLoadedOrFailed.bind(this, true));
              img.on('error', imgLoadedOrFailed.bind(this, false));
          }
      });


      // at some point I call: start();

在这个例子中，当我调用start()来“完成”测试时，onload和onerror事件仍然可以发生。

- Dan