如何测试JavaScript交互，如使用鼠标在html5画布上绘图

我熟悉测试对象状态，例如在rails模型上的ruby中使用rspec。例如：这个对象应该满足这个先前状态并接收这个呼叫的期望。如何测试JavaScript交互，如使用鼠标在html5画布上绘图

但是如果我想在jQuery插件上做一些TDD以在HTML5画布中绘制线条呢？我如何测试这个？假设用户点击了画布并移动了指针，那么应该在画布上绘制一条线。这不像我可以用茉莉花模拟用户活动吗？这是否超出了TDD的范围，只能进行手动测试？

2012-03-20 Homan

您可以也应该通过调用每次调用鼠标或触摸事件时调用的某些函数或状态来模拟用户活动。这种输入的标准化可以让你很容易地模拟输入。

例如，您可以编写一个画布应用程序，该应用程序可以绘制从鼠标向下到鼠标移动的一条线。我们可以这样写：

var can = document.getElementById（'canvas1'）; var ctx = can.getContext（'2d'）;

can.addEventListener('mousedown', function(e) { 
    var mouse = getMouse(e, can); 
    doMouseDown(ctx, mouse.x, mouse.y); 
}, false); 

can.addEventListener('mouseup', function(e) { 
    var mouse = getMouse(e, can); 
    doMouseUp(ctx, mouse.x, mouse.y); 
}, false); 


function doMouseDown(ctx, x, y) { 
    ctx.beginPath(); 
    ctx.moveTo(x, y); 
} 

function doMouseUp(ctx, x, y) { 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
}

现在，如果你想模拟用户把他们的鼠标点下的地方，并在其它地方你必须写的是：

// simulate the mouse doing these actions! 
doMouseDown(ctx, 50, 50); 
doMouseUp(ctx, 200, 120);

很容易的！

这不是最好的方式去这种事情，但它给你的想法。我会为每个画布创建一个状态对象/类，但那只是组织的问题。

测试变得很容易，因为用户可以用代码进行测试的鼠标或触摸板。事实上，您的鼠标下载代码和触摸启动代码现在可以被认为与您的应用程序相同，因为它们都会简单地调用doMouseDown/Up。作为一个原则问题，它总是把原逻辑与原始输入分开。

下面是完整的工作示例为您提供：http://jsfiddle.net/CU72J/

来源

2012-03-20 21:52:28

嗯，我可以直接触发实际事件处理程序触发的方法，但如果出现渲染错误（例如笔触颜色是白色，背景也是白色，或者不透明度是透明的），则代码中没有逻辑错误，但我的期望“我应该看到一条线”只能用我自己的眼睛观察对吗？我无法对代码中的正确答案作出断言，我可以吗？ – Homan 2012-03-21 04:46:12

如果您想逐字检查某个颜色的位置，则可以使用画布“getImageData”并通过像素查看给定位置处的白色（或非常接近白色）像素。 – 2012-03-21 13:33:34

这是很难知道在哪里停止与测试，你应该测试，以及如何。一般来说，当我必须处理与我正在开发的内容相关的某些东西时，我会开始考虑如何模拟模拟库，网络服务，ajax调用，外部服务器，外部服务器吧。

我对画布不是很熟悉。我会用以下任何一种方式去解决它：

1）如果你只想确保你的代码在画布上做了些什么，那么在它上面直接使用间谍很简单。间谍是非常强大的工具，了解它们并使用它们。举例来说，如果你想确保画布路径更新，你可以做

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

当然，你可能会刺探任何其他画布方法。 2）如果你需要进行大量交互的测试，并且/或者你发现自己一次又一次地为不同的测试编写相同的间谍，那么可能会出现这样的情况，那就是使用模拟对象会更好。小心：不要重写你正在嘲笑的图书馆！保持简单，只嘲笑你需要的东西，随时添加。另外，看看可用的模拟库，可能会帮助你，或给你的想法。许多茉莉花人正在使用sinon。我个人坚持用茉莉花，当我需要时，依靠自己的嘲笑。

对，所以让我尝试拿出东西;）对于画布我预计嘲弄的对象有说你需要的基本方法，beginPath，moveTo，stroke，无论...你可以使它所以不是绘制到画布上，而是将点附加到代表路径的数组上。然后，您的测试将与您的代码进行多次交互，最后您可以从模拟中获得路径并提供预期。

来源

2012-03-21 20:34:21 ggozad

如何测试JavaScript交互，如使用鼠标在html5画布上绘图

回答

相关问题