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 構造が同じままであることを期待していますか? 「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);
});
于 2012-12-25T05:31:53.497 に答える