3

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

这是我的功能。关于如何测试此功能的任何好主意，使用代码将更有帮助。

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

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

1 回答 1

1

当您想做一个测试用例时，您必须指定输入和预期输出。对于茉莉花，它以下列方式表示

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，调用函数，测试输出，然后清理所有内容。如果您的期望之一是只需要更改图像的 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);
});
于 2012-12-25T05:31:53.497 回答