如何测试是否帆布充满给定的颜色？

Question

我具有被渲染画布元件的阵营组件。这里面组件的我有这样的方法：

  renderCanvas(canvas) {
    canvas.fillStyle = this.props.given_colour;
    canvas.fillRect(0, 0, 800, 800);
  }

......这是用于创建着色层。

所以，我对于我的组件和道具通话功能测试，他们做工精细，但现在我想有一个场景检查，如果上面的方法是使用合适的颜色。

为了测试我使用与酶和兴农玩笑。我准备了这样的情景：

it("calls to fill canvas with the given colour", () => {
    const canvasSpy = sinon.spy();
    const component = mount(<MyCanvas given_colour="#0000FF" />);

    component.instance().renderCanvas(canvasSpy);
    sinon.assert.calledWith(canvasSpy, "fillStyle");
    sinon.assert.calledWith(canvasSpy, "#0000FF");
    sinon.restore();
  });

但我正在逐渐TypeError: canvas.fillRect is not a function

我不知道为什么发生这种情况，我不知道我的方法来这种情况一般。

我的期望是有一种情况它会告诉我，我的组件，在这个特定的方法，是用给定的颜色。但我不知道如何来实现这一目标。我是一个Rails开发，我是新来的反应。请，可能有人点我什么我做错了这个考验？

Answer 1

renderCanvas预计canvas是有方法的对象，而它的功能。断言是错误的，因为canvasSpy断言与fillStyle直接调用，而事实并非如此。

这可能应该是：

const canvasMock = { fillRect: sinon.spy() };
component.instance().renderCanvas(canvasMock);
expect(canvasMock.fillStyle).to.be("#0000FF");
sinon.assert.calledWith(canvasMock.fillRect, 0, 0, 800, 800);