Qunit unit test error , on jQuery ajax

Question

I have written unit test for ajax suing Qunit, but getting error like

Error: assertion outside test context, was .success@http://test.loc/assets/test/widget-add-or-edit-test.js:227 
b.Callbacks/c@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3 
b.Callbacks/p.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3
k@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:5 .send/r@http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:5
Source:     

http://code.jquery.com/qunit/qunit-1.11.0.js:899

my test code is

test( "Widget.updateAxisTypeAjax x", function() {

        stop();

        Widget.updateAxisTypeAjax( {   
                axis   : 'x' ,

                x_id   : 179,
                y_id   : 175
            }  ,{
            success : function( response ){

                ok( true, "updateAxisTypeAjax Success PASS!");
                equal( typeof response , 
                       "object" , 
                       "updateAxisTypeAjax response is json valid object !"
                );

                equal( typeof response == "object" && 
                       ( "average" in response  ) && 
                       ("is_datetime" in response) , 
                        true , 
                       "updateAxisTypeAjax average check PASS !"
                );

            } ,
            complete : function(){
                ok(true, "updateAxisTypeAjax completed PASS!");
                start();
            }
        });

});

and Widget.updateAxisTypeAjax is

Widget.updateAxisTypeAjax = function( data_obj, callbacks ){

        data_obj = jQuery.extend( data_obj ,{
            action : 'update_axis'
        });

        Widget.ajax( 5 )
              .data( data_obj  )
              .callbacks( callbacks )
              .fire();

}

and Widget.ajax is :

var Widget = Widget || {} ;


function _WidgetAjax( type  ){

        var loader      = $('#series_loader');

        this.ajaxUrl = '/dashboard/charts/ajax/' + ( type || 1 ) ;

        this.ajaxSettings = {

            url: this.ajaxUrl ,
            type:"GET",
            data :{} ,
            complete : function(){ // always
                  loader.hide();
            }
        };

        // show ajax loading
        loader.show();

        this.data = function( data ){

                jQuery.extend( this.ajaxSettings, { data: data }  );
                return this;
        }

        this.callbacks = function( callbacks ){

                jQuery.extend( this.ajaxSettings, callbacks || {}  );

                return this;
        }

        this.success = function( func ){

                if ( jQuery.isFunction( func ) ){
                     jQuery.extend( this.ajaxSettings, { success: func }  );
                }

                return this;
        };

        this.fire = function(){

                return $.ajax( this.ajaxSettings );
        };

};

Widget.ajax = function( type ){ 

        return new _WidgetAjax( type );        
};

Please help me fix this unit test error !

Answer 1

You're testing an asynchronous function, so you need to use the async features in QUnit.

Instead of test you should be using asyncTest

Here is the documentation.

Note that you have to tell QUnit how many assertions to expect when doing async tests.

asyncTest( "Widget.updateAxisTypeAjax x", 4, function() {

        stop();

        Widget.updateAxisTypeAjax( {   
                axis   : 'x' ,

                x_id   : 179,
                y_id   : 175
            }  ,{
            success : function( response ){

                ok( true, "updateAxisTypeAjax Success PASS!");
                equal( typeof response , 
                       "object" , 
                       "updateAxisTypeAjax response is json valid object !"
                );

                equal( typeof response == "object" && 
                       ( "average" in response  ) && 
                       ("is_datetime" in response) , 
                        true , 
                       "updateAxisTypeAjax average check PASS !"
                );

            } ,
            complete : function(){
                ok(true, "updateAxisTypeAjax completed PASS!");
                start();
            }
        });

});

Should probably work. This shouldn't be too hard to fix!