jquery - 如何测试 javascript 交互，例如在 html5 canvas 中用鼠标绘图

Question

我熟悉测试对象状态，例如 ruby​​ on rails 模型中的 rspec。例如:这个对象应该满足这个给定的先前状态和接收这个调用的期望。

但是，如果我想在 jquery 插件上做一些 TDD 以在 html5 Canvas 中绘制线条怎么办？我该如何测试呢？假设用户在 Canvas 上单击并移动了指针，那么 Canvas 上应该画了一条线。我不能像使用 jasmine 那样模拟用户事件，对吧？这是否超出了 TDD 的范围，只能对其进行手动测试？

Answer 1

很难知道在哪里停止测试、应该测试什么以及如何测试。一般来说，当我不得不处理与我认为是我正在开发的东西外部的东西的接口(interface)时，一个库、一个网络服务、一个 ajax 调用、一个外部服务器，在你的情况下是一个 Canvas ，我会开始考虑如何 mock 它。

我对 Canvas 不是很熟悉。我会通过以下任一方式进行处理:

1) 如果您只想确保您的代码对 Canvas 执行某些操作，那么直接在其上使用 spy 很简单。 spy 是非常强大的工具，了解并使用它们。例如，如果您想确保 Canvas 路径已更新，您可以这样做

var spy = spyOn(canvas, 'moveTo').andCallFake(function (x, y) {
  expect(x).toEqual(10.0);
  expect(y).toEqual(20.0);
});

//Do something through your api that would call canvas.moveTo
...
expect(spy).toHaveBeenCalled();

当然，您可以窥探任何其他 Canvas 方法。

2) 如果您需要进行大量交互的测试和/或您发现自己一次又一次地为不同的测试编写相同的 spy ，那么使用模拟对象可能会更好。注意:不要重写你正在模拟的库!保持简单，只模拟你需要的东西，边走边添加。另外，查看可能对您有帮助或给您想法的可用模拟库。许多 Jasmine 人正在使用 sinon .就个人而言，我坚持使用裸 Jasmine ，并在需要时依赖我自己的模拟。

好吧，让我试着想出一些办法 ;) 对于 Canvas ，我希望模拟对象会说出您需要的基本方法，beginPath、moveTo、stroke 等等...您可以这样做，而不是绘制到 Canvas 上，而是将点附加到代表您的路径的数组中。然后您的测试将成为与您的代码的大量交互，最后您可以从您的模拟中获取路径并提供对它的期望。