Testing jquery click call back

Question

Am a newbie in jasmine, trying to test the jquery click call back function

$('#upload-btn').click(function(){
    $("#myModal").modal('show');
});

My test code is

describe('upload button attaches to modal', function(){
    it('attaches successfully', inject(function($controller, $httpBackend) {
        spyOn($.fn, "click");
        spyOn($.fn, "modal");
        $httpBackend.expectGET('service/search/populate/procedureNumberList');
        var scope = {}, ctrl = $controller('uploadARController', {
            $scope : scope
        });
        $httpBackend.flush();
        expect($('#upload-btn').click).toHaveBeenCalledWith(jasmine.any(Function));
        $('#upload-btn').click();
        expect($.fn.modal).toHaveBeenCalled() <<<---- Failing here;
    }));
})

But am getting the below when I execute the test

PhantomJS 1.9.7 (Windows 7) Upload AR Test upload button attaches to modal attaches successfully FAILED
        Expected spy modal to have been called.
PhantomJS 1.9.7 (Windows 7): Executed 3 of 3 (1 FAILED) (0.165 secs / 0.026 secs)

Sajan Chandran · Accepted Answer · 2014-04-09 10:32:26Z

Finally managed to make it work. First i started to use jasmine-jquery library to load the html using setFixtures because for the jquery click to work it needs to first get an instance of the jquery selector.

Then i spyOn on the modal using

spyOn($.fn, "modal");

The difference being all spying should happen only on beforeEach for some reason, if inside the real test its not working (not sure why).

Then using jquery, click on the button.

$('#upload-btn').click();

Then finally expect on the spied modal.

expect($("#myModal").modal).toHaveBeenCalled();

Finally

beforeEach(inject(function($httpBackend) {
 setFixtures('<button class="btn btn-default" type="button" id="upload-btn" >Upload</button>');
 spyOn($.fn, 'modal');
}));

The Test:

describe('upload button attaches to modal', function(){
  it('attaches successfully', function() {
    inject(function($controller){
     var scope = {}, ctr = $controller('uploadARController', {$scope:scope});
    });
    $('#upload-btn').click();
    expect($("#myModal").modal).toHaveBeenCalled();
  });
})

Collectives™ on Stack Overflow

Testing jquery click call back

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