javascript - 测试 jquery 点击回调

Question

我是jasmine的新手，正在尝试测试jquery的click回调函数

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

我的测试代码是

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;
    }));
})

但是当我执行测试时得到以下结果

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)

Answer 1

终于成功了。 首先我开始使用 jasmine-jquery使用 setFixtures 加载 html 的库，因为要使 jquery click 正常工作，它需要首先获取 jquery 选择器.

然后我在 modal 上使用 spyOn

spyOn($.fn, "modal");

由于某些原因，所有spying 的区别应该只发生在beforeEach 上，如果在真实测试中它不起作用(不确定为什么)。

然后使用jquery，点击按钮。

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

最后 expect 在 spied modal 上。

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

最后

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

测试:

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();
  });
})