測試圖形用戶界面

Question

所以我有一個jQuery中的花哨的GUI，它已變得相對複雜。我想爲它編寫測試，例如使用assert()。然而，編寫這樣的測試似乎很困難，因爲GUI不會操縱數據或進行計算：它們只是表面的界面，以取悅用戶。

那麼，人們如何通常爲GUI編寫測試？

Answer 1

假設你的代碼是相當乾淨（模塊化和鬆散耦合的功能塊，而不是一些超級功能），首先要做的是選擇一個測試框架。我推薦jasmine，因爲它符合我喜歡編寫測試的方式，但是如果您正在尋找更多的xUnit克隆，qunit也是非常好的。

如果你的代碼沒有被拉開（就像野外JavaScript的99.99％），我會先看看如何製作jquery plugins，然後儘可能多地提取它們。測試執行大量事情的超級函數是一個可怕的命題，但是當你談論一個單一事物的模塊時，測試變得更容易。

最後，還有一點關於如何構建複雜的javascript，以及如何測試它的學習曲線。不要放棄！相反，有些人會相信，JavaScript是非常可靠的庫現在非常可測試，有很多人這樣做（我只是花了一整天的時間在複雜的功能上工作，整個時間都在練習TDD，它從來沒有感覺到笨重或非自然）

祝你好運，並隨時要求澄清，如果這裏有任何不明白:)

編輯：

通過「拉開」我的意思是移動到一個更模塊化的方式而不是巨大的功能。在jQuery中，第一步是使用插件，這會讓你走得很遠。如果你正在製作一個JavaScript「應用程序」，其中你的大部分邏輯都在前端，而後端主要是爲了持久化，我會看看像Backbone.js這樣的東西，這將有助於管理非常高的複雜性，但如果你不需要它，那完全是過度的。

回到提取插件，嘗試找到包含的某些功能塊。我今天寫了一個快速插件來記住帶分頁的表格中複選框的狀態，其中表格的內容以編程方式換出，但如果用戶在第一頁上檢查一個框（但不保存），轉到頁面兩個，然後回到第一個頁面，他們仍然應該看到該框被選中。

如果該複選框代碼內嵌在分頁代碼中，則會使分頁代碼更復雜。通過將它拉入插件，它只會使分頁代碼變得複雜一點（在頁面卸載時調用$（table）.saveCheckState（），並在新頁面加載時調用$（table）.loadCheckState（））。測試非常簡單，我只需要一個帶有幾個複選框的div來測試複選框代碼，而不需要在已經非常複雜的分頁測試中添加更多內容。

不知道你的背景或經驗水平我會猶豫地推薦閱讀clean code如果你想了解更多關於這種東西。不幸的是，它是面向Java的，而不是JavaScript，但其中大部分都適用於任何面向對象的語言（其中javascript 可能是），並且可能是此主題的最佳入門級書籍。如果你進行完整的堆棧開發（而不僅僅是前端），至少掌握java的工作知識，是一個初級/中級開發人員想要改進他們的工藝，這是每個人都應該閱讀的書籍之一。如果這些事情不是真的，它可能最終只會讓你感到困惑，或者對你沒有多大用處。所以採取一粒鹽的建議:)

Answer 2

你的答案在GUI本身 - 用戶接口。

圖形用戶界面的最佳測試與人。您應該查看完全致力於用戶體驗的http://ux.stackexchange.com。

我認爲這很重要，因爲我確定您的GUI已經到了堅實的地步，因爲您已經完成了對非圖形元素的單元測試。通過你自己的測試，你已經這樣做了 - 現在，你應該看到其他人如何與它互動，他們如何破壞它，以及他們喜歡或不喜歡它。然後你做出改變並重新做一遍。

（好吧，我知道這是不是單元測試。但嚴重的是，對於jQuery的東西重測試選擇那裏是不是很好玩處理！）