使用bootstrap popover的测试指令 [英] Testing directive that uses bootstrap popover

问题描述

我有使用bootstrap的popover的指令。当设置变量时它变为弹出：

I have directive that uses bootstrap's popover. It becomes popover when variable is set:

if (newValue.show === true) {
     element.popover('show');
}

如何使用业力/茉莉花测试进行间谍测试？

How can I make spy test with karma/jasmine tests?

我试过这个：

    spyOn(element, 'popover');



    it('should call bootstrap method popover', function () {
    $scope.$apply(function() {
        $scope.value.show = true;
    });
    expect(element.popover).toHaveBeenCalled()
});

但我收到错误：

    Expected spy popover to have been called.
    Error: Expected spy popover to have been called.

推荐答案

我不相信这是最好的办法这个，但我能够通过将元素存储在范围内并以此方式监视它来使其工作。

I am not convinced this is the best way to do this, but I was able to get it to work by storing the element on the scope and spying on it that way.

在你的指令中

scope.element = element;
if (newValue.show === true) {
 scope.element.popover('show');
}

在您的规格中

spyOn(scope.element, 'popover')

...

it('should call bootstrap method popover', function () {
  $scope.value.show = true;
  $scope.$digest();//Or use your $scope.$apply 

  expect(scope.element.popover).toHaveBeenCalledWith('show');
});

希望有所帮助。

更新

popover是附加到 $。fn 的jQuery插件所以我们可以监视它。
https://gist.github.com/ danmillar / 1930277＃file-bootstrap-popover-js-L160

popover is a jQuery plugin attached to $.fn so we can spy on it. https://gist.github.com/danmillar/1930277#file-bootstrap-popover-js-L160

it('should call bootstrap method popover', function () {
  spyOn($.fn, 'popover');
  $scope.value.show = true;
  $scope.$digest();//Or use your $scope.$apply
  expect($.fn.popover).toHaveBeenCalledWith('hide');
});

这是一个很好的解释为什么你不能听元素
https://stackoverflow.com/a/6198122/3403178

This is a nice explanation of why you can't listen on element https://stackoverflow.com/a/6198122/3403178

这篇关于使用bootstrap popover的测试指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！