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

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

这是你用来检查日志方法是否被调用的行

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 测试异步代码的信息