attribute - javascript教學



測試操縱DOM的Javascript (4)

我一直在研究javascript測試套件,我發現QUnit非常有趣。 我理解如何測試計算代碼,但......

你如何測試主要用於DOM操作的javascript應用程序?

看起來測試DOM元素的位置/顏色/等似乎沒有實際意義,因為你最終會像這樣做一些東西:

$("li.my_element").css("background-color", "#f00");

然後在你的測試中......

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

這只是感覺不對,因為它基本上只是這樣做:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

我瘋了嗎? 應該怎麼做?

編輯 :問題的核心:

我想我得到的是,我需要確保在部署之前代碼沒有被破壞,但絕大多數是UI助手和ajax。 如何測試事物是否正確顯示?

幾個例子:

  • 測試JQuery UI對話框是否出現在所有其他元素之上
  • 測試拖拽是否正常工作
  • 測試droppable的顏色在元素掉落時會發生變化
  • 測試ajax是否都正常工作
  • 測試沒有無關的逗號會破壞IE

https://ffff65535.com


我測試這樣的AJAX:

  1. 進行AJAX調用
  2. 設置JavaScript計時器
  3. 檢查DOM以查看是否發生了預期的更改

現在,可能是在您進行檢查之前沒有返回AJAX調用,但這也是有用的測試信息; 通過AJAX調用,(通常)有一段時間後我們稱之為失敗。 舉個例子,如果我們正在做一個建議彈出窗口,並且需要30秒才能回來,那就是失敗。


我猜測很多人在視覺上進行測試:即他們在他們的顯示器上查看瀏覽器的輸出,看看它是否像預期的那樣被操縱。

如果這需要是一個自動測試用例(例如,用於回歸測試),那麼他們可能會記錄輸出(如屏幕截圖)並執行比較兩個屏幕截圖以查看結果是否相同的操作。

您可以捕獲整個DOM,而不是捕獲屏幕截圖,並對捕獲的DOM樹進行並排比較(比較像素可能不易出錯)。


而不是測試JQuery css函數。 您的測試應該模擬css函數,並確保僅使用正確的顏色調用它。 測試的代碼應該是你的,而不是框架。


除了Jason Harwig所說的,我還會說單元測試是一項測試,以確保代碼按預期運行。 如果你想測試一下,那麼Jason對你應該如何做到這一點是完全正確的。 如果您想運行測試來檢查DOM操作是否正在發生(UI測試)而不是執行DOM操作的實際代碼(單元測試),那麼您可能需要查看SeleniumWatiNWatir





qunit