如何测试 angularjs 指令以监视函数调用?

问题描述

下面的代码执行但抱怨 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. 监视由某些人触发的功能以外的功能事件/中介
2. 在创建对象之前窥探函数的原型.换句话说: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 功能，可以为您摆脱第一行和最后一行.在我自己的测试中，我将第一行和间谍创建放在 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 指令以监视函数调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！