Question

我们说我有这个指令：

.directive 'panelcreator', ->
    (scope, element)->
        element.bind 'mouseenter', ->
            element.addClass 'alert alert-danger'

为了保持这个单位规格，我想要删除element.addClass，对吧？那我该怎么做呢？

我的尝试：

describe 'panelcreator', ->

    describe 'something', ->
        beforeEach ->
            spyOn(element, 'addClass')
            element.trigger('mouseenter')

        it 'shoud create a panel', ->
            expect(element.addClass).toHaveBeenCalledWith 'alert alert-danger'

给我：

Error: Expected a spy, but got Function.

我将来如何分析element等变量，以便找出我需要传递SpyOn的方法链？

Answer 1

如果使用jQuery，addClass将在jQuery对象上：

spyOn($.fn, 'addClass');

如果没有，它将在jqLite（angular.element）对象上：

spyOn(angular.element, 'addClass');

Answer 2

您不需要将addClass存根到＆＃34;将其保留为单位规格＆＃34; ，使用真实版本没有任何问题{ {1}}。

当测试使用具有单点访问的某些离散接口时，对方法进行存储是很好的。但是，DOM元素是复杂的数据结构，通常有多种方式来执行某个操作。 如果你要测试你的函数是否为Element添加了一个元素，那么你就不会想要Array ;因为还有很多其他方法可以添加一个物品）。因此，在测试DOM交互时，您只需将DOM元素添加到＆＃34;实用程序＆＃34;的列表中。你被允许使用的东西（而不是存根）。

在测试是否添加了一个类时，只需检查它的存在。

请注意，这会使您的赏金问题无效。要概括地说清楚：

是的，您可以检查.push()的源代码（可能是通过jqLite调试）并发现您需要观察真实addClass }，而不是它的Element包装器。因此，您可以尝试存根Element.classList.add()。

然而，整个前一段是无关紧要的。只有当您需要测试实体的使用而不需要提供实现和/或依赖它时，才能进行存根。 angular.element()及其Element包装器都保证了向前兼容的稳定功能，并且隐式提供了它们的实现，因为您的代码在Web浏览器中运行并使用AngularJS。这使得他们中的任何一个都适得其反。

Answer 3

你试过吗

spyOn(element.prototype, 'addClass')？

然后

expect(element.prototype.addClass).toHaveBeenCalledWith 'alert alert-danger'

我怎么能监视元素？

3 个答案: