Javascript 如何使用html进行测试

我想测试我的函数，html是这样的

这是我的功能。任何关于如何测试这个函数的好主意，使用代码都会更有帮助

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

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

函数showIMG（）{
$（'#showImg'）。删除（）；
$（'#showImgContainer'）。追加（''）；
返回false；
}

当你想做一个测试用例时，你必须指定的是输入和预期的输出。茉莉花的表现形式如下

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

it（“图像的URL需要更改”，函数（）{
//步骤1-设置HTML的初始状态//
var baseHTML=''；
var div=document.createElement（“div”）；
div.innerHTML=baseHTML；
文件.正文.附件（div）；
//第2步-呼叫//
showIMG（）；
//第3步-我们按照预期检查HTML的状态//
expect（$（“#showImgContainer img”）.attr（“src”）.toEqual（“anothertest.jpg”）；
//步骤4-清理设置//
文件.正文.删除文件（div）；
});

您想测试什么？你能说得更具体点吗？非常感谢！我将设置它与测试