javascript - 如何用html测试

Question

我想测试一下我的功能，html是这样的。

这是我的功能。关于如何测试此功能的任何好的想法，代码会更有帮助。

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

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

Answer 1

当你想做一个测试用例时，你必须指定的是输入和预期的输出。对于 Jasmine ，它以以下方式表示

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

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

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

对于您的情况，很难说出什么是最好的测试输出，因为我们目前缺乏很多上下文。事实上，您必须测试的输出取决于您期望函数的行为。您只是希望图像 URL 发生变化吗？您是否还希望 HTML 结构保持不变？ “return false”也是一种期望吗？

对于您可以在 HTML/DOM 上进行的测试，通常分 4 步完成。您必须首先设置 HTML，调用您的函数，测试输出，然后清理所有内容。如果您的期望之一是只需要更改图像的 URL，则它看起来像这样:

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);
});