CODEWITHSUNDEEP
javascriptjasmine
karl li
karl li

Reputation: 479

How to test with html

I want to test my function and the html is like this.

Here is my function. Any good ideas on how to test this function, with code it will be more helpful.

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

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

Upvotes: 3

Views: 120

Answers (1)

HoLyVieR
HoLyVieR

Reputation: 11134

When you want to do a test case, what you have to specify are the inputs and the expected outputs. With jasmine it is represented in the following way

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

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

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

For your case it's hard to tell what would be the best outputs to test, because we currently lack a lot of the context. In fact, the outputs you have to test depends on the behavior you're expecting from the function. Are you just expecting the image URL to change ? Are you also expecting the HTML structure to stay the same ? Is the "return false" an expectation too ?

For the test you can do on the HTML / DOM, it's usually done in 4 steps. You have to first do a setup of the HTML, you call your function, you test the outputs and after that you cleanup everything. If one of your expectation was that just the URL of the image needs to change it would look like this :

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

Upvotes: 1

Related Questions