如何使用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);
});