Question

我有一个可以在URL中传递的url加载器，它将使用动态创建的JavaScript new Image()及其src属性来加载url。如果发生错误，我将其记录到控制台。

简化的JavaScript代码是：

var UrlLoader = function(url) {
  this.url = url;
  this.image = new Image();

  this.image.onerror = function() {
    console.log("image error");
  };

  this.load = function() {
    this.image.src = this.url;
  };
}

我现在的问题是，当我运行

时，我如何测试console.log("image error")的执行情况

var urlLoader = new UrlLoader();
urlLoader.load("any.png");

我创建了一个JSFiddle with the test suite set up，但规范失败，并希望找到一种方法来测试UrlLoader。

Answer 1

这是用于检查是否已调用log方法的行

expect(console.log).toHaveBeenCalledWith("image error");

这是正确的但是onerror处理程序此时尚未调用的问题，因为错误事件不是立即触发/处理，而是后来异步触发

您应该将测试用例更改为

describe("A suite", function() {

  beforeEach(function(done){
    spyOn(console, "log");

    var imageLoader = new ImageLoader("any.png");
    imageLoader.image.addEventListener("error", function() {
        done();
    });
    imageLoader.load(); 
  });

  it("contains spec with an expectation", function() {
    expect(console.log).toHaveBeenCalledWith("image error");
  });
});

您可以在this article

中找到有关使用Jasmine测试异步代码的更多信息

如何在Jasmine中测试JavaScript Image onerror回调？

1 个答案: