問題描述

下面的代碼執(zhí)行但抱怨 element.popover 沒有被調用.我似乎無法弄清楚問題是什么.

Code below executes but complains about element.popover not being invoked. I can't seem to figure out what the issue is.

提前感謝您的幫助.

指令:

angular.module('directives', []).

directive('popOver', function ($http) {

    return {
        restrict:'C',

        link: function (scope, element, attr) {
            element.bind('mouseover', function (e) {
                $http.get("someurl" + attr.chatid + ".json").success(function (data) {
                    element.popover({content: data.firstName + " " + data.lastName });
                });
            });
        }
    }
})

茉莉花測試:

'user strict'

describe('directives', function() {
    beforeEach(module('directives'));
    describe('popOver', function() {
    var $scope, compile, location,  $httpBackend, elm;

    beforeEach(inject(function($rootScope, $compile, _$httpBackend_) {
        $scope = $rootScope.$new();
        compile = $compile;
        $httpBackend = _$httpBackend_;
        elm = angular.element('<i class="pop-over" data-placement="top" data-chatid="testChatId" > </i>');
        compile(elm)($scope);

    }));

    it('should call element.popover()', function() {
        $httpBackend.expectGET('someurl/testChatId.json').
            respond([ {firstName: 'test', lastName: 'user'}]);

        spyOn(elm, 'popover').andCallThrough();

        elm.trigger('mouseover');
        $httpBackend.flush();

        expect(elm.popover).toHaveBeenCalled();
    });
  });
});

輸出:

Chrome 26.0 (Mac) directives popOver should call element.popover() FAILED
Expected spy popover to have been called.
Error: Expected spy popover to have been called.

推薦答案

更新:

我無法解決您的具體問題.主要是因為我無法獲得角種子/它需要永遠，但我認為我會讓我的答案更完整.

Update:

I wasn't able to solve your specific problem. Mostly because I couldn't get angular-seed going/it was taking forever, but I thought I'd make my answer more complete.

一般有兩種方法可以解決這個問題:

There are 2 ways to solve this problem in general:

1. 監(jiān)視由某些人觸發(fā)的功能以外的功能事件/中介
2. 在創(chuàng)建對象之前窺探函數的原型.換句話說:spyOn(MyObjectNamespace.Class.prototype, 'functionToSpyOn')

之后只需恢復即可.

我對 angular 只是隱約熟悉，但也遇到過類似的問題.

I am only vaguely familiar with angular, but have experienced similar problems.

您可以只分離函數而不是匿名指定它.這有助于專門測試您的功能并避免所有有角度的東西.

You can just separate out the function rather than specifying it anonymously. This helps test your functionality specifically and avoid all the angular stuff.

有時使用框架是不可能的.這里的主要問題是您的 spy 附加自身太晚，并且引用丟失或被覆蓋.

Sometimes with frameworks this isn't possible. The main problem here is that your spy is attaching itself too late and the reference is lost or gets overridden.

測試:

describe('directives', function() {
    beforeEach(module('directives'));
    describe('popOver', function() {
    var $scope, compile, location,  $httpBackend, elm;

    beforeEach(inject(function($rootScope, $compile, _$httpBackend_) {
        $scope = $rootScope.$new();
        compile = $compile;
        $httpBackend = _$httpBackend_;
        elm = angular.element('<i class="pop-over" data-placement="top" data-chatid="testChatId" > </i>');
        compile(elm)($scope);

    }));

    it('should call element.popover()', function() {
        var popoverFunction = $.fn.popover;
        $httpBackend.expectGET('someurl/testChatId.json').
            respond([ {firstName: 'test', lastName: 'user'}]);

        spyOn($.fn, 'popover').andCallThrough();

        elm.trigger('mouseover');
        $httpBackend.flush();

        expect($.fn.popover).toHaveBeenCalled();
        //restore popover, use sinon's restore fn instead here
        $.fn.popover = popoverFunction
    });
  });
});

您可以將詩乃與茉莉花一起使用.Sinon 有一個 spy.restore 功能，可以為您擺脫第一行和最后一行.在我自己的測試中，我將第一行和間諜創(chuàng)建放在 beforeEach 中，將還原放在 afterEach 中.

You can use Sinon with Jasmine. Sinon has a spy.restore function that gets rid of the first and last line for you. In my own tests I've placed the first line and the spy creation in a beforeEach and the restore in an afterEach.

這篇關于如何測試 angularjs 指令以監(jiān)視函數調用?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！