javascript - 如何在 Jasmine 中测试 JavaScript 图像 onerror 回调？

Question

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

简化的 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 测试异步代码的更多信息。