How to write a Jasmine test for a webpage that has HTML and JavaScript or jQuery?

Question

Of the material I read on Jasmine, they test only a .js file. But what if the test is on a webpage, say, with the code:

try.html:

<input id="the-input"></input>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

    $("#the-input").focus(function() {
        $(this).css("background", "#ff9");
    });

    $("#the-input").blur(function() {
        $(this).css("background", "#cff");
    });  

</script>

which is just to say, if the user clicks on (or tab to) the input box, make the box's background yellow, and when focus out, then make it light blue. In such case, how do we test the above behavior in the .html file? (where should this html file be -- can it be any where outside of the Jasmine lib file and SpecRunner.html, and how does the SpecRunner.html include it somehow to test the page?

A jsfiddle is in: http://jsfiddle.net/MspUF/

Update: it is fine to separate the HTML content and the JavaScript code, but still, what ARE THE SPECIFICS as to be able to test it.

Answer 1

After some research, I found a simple way to test JavaScript together with HTML, CSS, and JSON data. It is Jasmine-jQuery and those are called HTML fixtures, etc. So not a full, self-contained page, but possibly enough to tell your widgets works fine if the mouse is over it, or what should happen if a user clicks on something. (by using jQuery .mouseover() or .click(), etc.)

Answer 2

It is generally, best practice to move scripts to external js files in web browsers as well.

You can move your code to a .js file and then include it in your HTML by doing:

<script src='myfile.js'>

Which will include it, this will allow you to easily use Jasmine to test the file. You can mock your DOM for unit testing outside the DOM.

If you need general testing instead of unit testing, I suggest something like PhantomJS that would actually simulate a browser and enable you to test the complete user experience. (Other good alternatives include Selenium which I had success with)

Also, here is a nice article about testing jQuery with QUnit.