我們如何執行DOM操作的單元測試？

QUINIT在netTuts.com的介紹產生了一個有趣的交流（從未解決）如何應用單元測試對操作DOM的操作。下面引用（亞歷克斯·約克）獲得的癥結：我們如何執行DOM操作的單元測試？

什麼將是很好的，如果你有這樣的功能：

函數add（A，B）{VAR的結果= A + b; $（「input＃ResultTestBox」）。val（result）;

在上面的測試中，我很想測試兩件事情：又多了一個和 b和結果正確地被投入到DOM元素。我很想通過提供某些模擬HTML來測試第二件事。可能？

但是，就像我說的...沒有解決。可分解？

來源

2010-10-20 justSteve

最新版本的QUnit支持#qunit-fixture元素，它允許您將HTML添加到QUnit網頁。

例如，在你的HTML：

<ol id="qunit-tests"></ol> 
<div id="qunit-fixture">test markup, will be hidden</div>

，並在你的JavaScript：

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture'); 
var result = add(a, b); 

equals(result, $('input#ResultTestBox').val(), "testing result box value");

來源

2010-11-14 15:34:58

單元測試是如何實際基於真實的dom操作？ – Tushar 2014-09-03 10:58:47

@Tushar取決於你正在使用的單元測試的26個定義中的哪一個。只要測試可以獨立運行，它們就是根據一些定義進行的單元測試。（例如Kent Beck在書中的「Test Driven Development By Example」一書中） – herman 2016-05-31 08:38:50

可以在env.js運行它們，如果你不想創建HTML頁面沙箱的麻煩所有的測試。

來源

2010-11-14 15:58:11

當然你實際上關心的是，val方法被調用上的$(「input#ResultTestBox」)返回值 - 你並不需要測試的jQuery的方法本身的功能。爲什麼不注入jQuery對象的模擬實現並對其進行測試？

來源

2010-11-15 10:04:02

如何在不丟失jQuery本身的情況下製作模擬jQuery對象？像這個想法一樣，但是很難想象如何在代碼中嘲笑。 – Sukima 2011-06-15 10:51:33

@Sukima，你會重構你的原始代碼，以便'$'對象作爲參數傳入，默認情況下使該參數值爲jQuery。然後在你的單元測試中傳入你的模擬對象 – 2011-06-15 11:18:17

模擬（至少對於遠程調用，數據庫查詢等）是一種代碼異味。如果您可以測試通話結果而不是通話本身發生的事實，那通常會好很多。 – herman 2016-05-31 08:45:48

我們如何執行DOM操作的單元測試？

回答

相關問題