Javascript單元測試DOM元素

我剛開始爲我的JavaScript構建單元測試（使用QUnit），我有一個函數需要一個div並操作它的子元素。Javascript單元測試DOM元素

如何爲此創建測試？

我正在考慮在每種情況下用期望的DOM樹創建一個文檔片段並對其進行測試。但由於父母等不同，會不會遞歸檢查失敗？我該怎麼做這個測試？

有一個DOM重置功能，您可以在每次測試後調用以恢復到中性狀態。

運行你的操作DOM的函數。

然後手動檢查DOM是否處於正確的狀態，通過檢查它，只是聲明一切都應該在哪裏。

遞歸而是用DOMFragment循環比較它通過DOM，並檢查您的功能創造了新的元素，改變課程，改變了文本，改變屬性等

你已經寫了幾個測試後，在函數中包裝一些東西並幹掉你的代碼。

這樣寫代碼意味着你可能會在你的單元測試中複製很多代碼，在那裏你檢查DOM中非常相似的東西。爲了更好地重用這些代碼，需要使用普通的代碼並將它們放入函數中。

2011-08-23 15:45:02 Raynos

清理DOM不是一個問題，因爲修改是本地化的（可追蹤）。「手動檢查DOM」？你能解釋一下嗎？我如何斷言一切是否應該在哪裏？你能否解釋一下「幹掉你的代碼」？ –

@ Diff.Thinkr希望澄清它 – Raynos

實際上，DOM操作和其他更改（例如className等的更改）是由相關函數調用的單獨函數完成的。即使我驗證了單獨的函數完美工作，我將如何斷言邏輯和生成的修改後的DOM如期望的那樣編程？例如，如果我期待3個節點被追加到Span，但由於邏輯錯誤只追加了2個，驗證基本追加功能不會顯示此故障。 –

我找到了一個節點。 isEqualNode（）函數，似乎做所需的工作。它似乎沒有比較屬性。我想要classNames，ids和data- *屬性也要進行比較。

2011-08-27 02:48:25

回答