如何用html測試

我想測試我的功能，html是這樣的。如何用html測試

這是我的功能。關於如何測試這個函數的好主意，用代碼將會更有幫助。

<div id="showImgContainer"><img src="test.j" id="showImg" /></div> 

    function showIMG(){ 
     $('#showImg').remove(); 
     $('#showImgContainer').append('<img src="anothertest.jpg" />'); 
     return false; 
    }

來源

2012-12-25 karl li

您想要測試什麼？你可以說得更詳細點嗎？ –

當你想做一個測試用例時，你必須指定的是輸入和預期輸出。茉莉花是通過以下方式

it("name of your test case", function() { 

    // Your call with the inputs // 
    var result = showIMG(); 

    // The expected outputs // 
    expect(result).toBe(false); 
});

對於您的情況下，很難說什麼是測試的最佳輸出爲代表，因爲我們目前缺乏大量的上下文。實際上，您必須測試的輸出取決於您對函數期望的行爲。你只是期待圖像的URL改變？你是否也期待HTML結構保持不變？「回報虛假」也是一種期待嗎？

爲了測試你可以在HTML/DOM上做什麼，它通常分4步完成。你必須首先完成HTML的設置，調用你的函數，測試輸出，然後清理所有內容。如果您的期望之一是圖片的網址需要更改，則看起來像這樣：

it("URL of the image needs to change", function() { 
    // Step 1 - Setup the initial state of the HTML // 
    var baseHTML = '<div id="showImgContainer"><img src="test.j" id="showImg" /></div>'; 
    var div = document.createElement("div"); 
    div.innerHTML = baseHTML; 
    document.body.appendChild(div); 

    // Step 2 - Call // 
     showIMG(); 

    // Step 3 - We check the state of the HTML with our expectation // 
    expect($("#showImgContainer img").attr("src")).toEqual("anothertest.jpg"); 

    // Step 4 - Cleanup the setup // 
    document.body.removeChild(div); 
});

來源

2012-12-25 05:31:53 HoLyVieR

非常感謝！我會用渺小的方式來設置它 –

如何用html測試

回答

相關問題