如何測試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畫布上繪圖

回答

相關問題