Unit testing javascript function with Qunit

Question

It is possible to create a unit test that can test ui aspects? here is an example:

addMessage = function (type, message) {
        //success, error, info, block(alert)           
        $("body").append('<div id="messageCenter" class="alert alert-' + type + '" style="position: fixed; top: 0; width: 100%; text-align:center;">' + message + '</div>');
        setTimeout(function () {
            $("#messageCenter").fadeOut(500, function () {
                $("#messageCenter").remove();
            });
        }, 10000);

    }

This creates a message bar at the top of the page to show the user some information. Can someone help me with an example of the unit test for this function? Thanks in advance.

JJJ · Accepted Answer · 2013-06-15 12:19:14Z

Unit tests can't test visual elements 100% reliably and you should always confirm manually that they work, but there's always something you can do. If for nothing else then for the sake of completeness or code coverage.

First describe what the function is supposed to do and what you want the tests to cover. For example:

A message is added to the page
The message has correct content
The container has a class corresponding to the message type
After 10.5 seconds the message is no longer visible on the page (timeout + fadeout).

It's now easy to write the unit tests for the specific requirements.

asyncTest( "Message bar functionality", function() {
    expect( 4 );

    addMessage( 'info', 'test' );
    equal( $( '#messageCenter' ).length, 1, "Div created" );
    equal( $( '#messageCenter.alert-info' ).length, 1, "Message has correct class" );
    equal( $( '#messageCenter' ).text(), 'test', "Message has correct content" );

    setTimeout( function() {
        equal( $( '#messageCenter' ).length, 0, "Message no longer visible after 11 seconds" );
        start();
    }, 11000 ); // 10500 might be too tight, 10600 would probably be fine too
});

Collectives™ on Stack Overflow

Unit testing javascript function with Qunit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related