使用 Mocha/Chai/Sinon 测试异步 onload 处理程序

Question

我正在尝试为应该在 image.onload 之后调用的函数添加测试。
我在 RenderObject 构造函数中附加了处理程序，该构造函数在加载时设置具有该图像源的对象的所有尺寸。
代码在我运行时按预期工作，但我未能创建成功证明这一点的测试。

import { assert, expect } from "chai";
import "mocha";
import * as Sinon from "sinon";
import { IRenderObect } from "../interfaces/IRenderObject";
import { Point } from "./Point";
import { RenderObject } from "./RenderObject";

const imageSrc = "../../images/test80x100.png";
const initialPosition = new Point(10, 20);
const objectList = RenderObject.getObjectList();

afterEach(done => {
  objectList.forEach(o => o.destroy());
  done();
});

describe("RenderObject", () => {
  it("When a new image is loaded setDimensionsForImage is called", () => {
    const spy = Sinon.spy(RenderObject.setDimensionsForImage);
    const renderObject = { imageSrc: "xxx", initialPosition };
    const object = new RenderObject(renderObject);

    assert.ok(spy.calledOnce); // Fails as it should be async
  });

  it("Object has correct dimensions for image", done => {
    const spy = Sinon.spy(RenderObject.setDimensionsForImage);
    const renderObject = { imageSrc, initialPosition };
    const object = new RenderObject(renderObject);

    window.setTimeout(() => {
      try {
        expect(object.width).to.equal(80); // Also fails...
        expect(object.height).to.equal(100);
      } finally {
        done();
      }
    }, 1000);
  });

  it("Add new objects to the object list", () => {
    const renderObject = { imageSrc, initialPosition };
    const object = new RenderObject(renderObject);

    expect(objectList.length).to.equal(1);
  });

  it("Remove objects from the object list once destroyed", () => {
    const renderObject = { imageSrc, initialPosition };
    const object = new RenderObject(renderObject);
    object.destroy();

    expect(objectList.length).to.equal(0);
  });
});

如何在图片加载后测试尺寸是否正确应用？

编辑：
我认为我的测试设置无法加载图像。我想我需要设置使用 Chrome 无头...

Answer 1

当然，setTimeout 不是窗口对象的成员，在箭头函数内部，传递给描述回调的对象是this。你没有收到错误吗？ 你可以试试这样，

it("Object has correct dimensions for image", done => {

}).timeout(()=>{

}, 1000)