Как проверить, заполнен ли холст заданным цветом?

Question

У меня есть компонент React, который отображает элемент canvas.Внутри этого компонента у меня есть этот метод:

  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 и я новичок в React.Пожалуйста, кто-то может указать мне, что я делаю не так с этим тестом?

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);