Test Jquery Hide() and Show() functions

[Prashant Choudhari]

###########CoffeeScript Source

  makeThumbnailNonInteractive :->
    $("#interactive-structure").hide() 
    $("#interactive1").show() 


##########CoffeeScript Test

  it 'should not display 3D interactive structure for mobile', ->
    mockHtml= """<div id="interactive-structure" style="display:block"></div>
                 <div id="interactive1" style="display:none"></div>"""
    setFixtures(mockHtml)
    makeThumbnailNonInteractive()
    expect($("#interactive-structure").css("display")).toBe("none")
    expect($("#interactive1").css("display")).toBe("block")



Expectation: This test should pass, meaning div with id 'interactive-structure' should be hidden and div with id 'interactive1' should be visible.

Problem/Actual behavior: Both the div tags are getting visibe. But this code used with some jsp/jade works smoothly from UI perspective.

Observation: Whatever last line in the source I am writing, I am getting that behaviour default to all of the preceding elements. In this case '$("#interactive1").show()' is the last line in script which makes 'interactive-structure' also visible.