JavaScript 单元测试：无法检查是否调用了 jQuery 方法

Question

我有一个 Angular 应用程序，其中包含一个非常简单的指令，现在称为 animate。我正在尝试使用 Jasmine 检查是否调用了方法 slideDown。目前我的指令如下所示：

animateDirective

var animate = function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.animate, function () {
            element.slideDown(200);
        })
    }
}

应用

var app = angular.module("app", []);

app.controller("homeController", homeController);
app.directive("animate", animate);

在我的单元测试文件中，我检查了我的所有引用是否正确，并且我已经在浏览器中进行了测试，并且该指令正在被命中。到目前为止，这是我的单元测试类：

animateDirectiveUnitTests

describe("animateDirective", function () {
    var $compile;
    var $scope;
    var template = "<p animate></p>";
    var isolateScope;

    function createDirective() {
        var directiveElement = angular.element(template);
        $compile(directiveElement)($scope);
        $scope.$digest();

        return directiveElement;
    }

    beforeEach(function () {
        module("app");
        inject(function (_$compile_, _$rootScope_) {
            $compile = _$compile_;
            $scope = _$rootScope_.$new();
        });
    });

    it("should call slideDown", function () {
        var element = createDirective();

        spyOn(element, "slideDown");

        expect(element.slideDown).toHaveBeenCalled();
    })
});

我从测试结果中得到的错误信息是：“预期的间谍 slideDown 已被调用”。我也尝试更改我的测试以引用下面的 jQuery 对象，但我得到了同样的错误：

var element = createDirective();

spyOn($.fn, "slideDown");

expect($.fn.slideDown).toHaveBeenCalled();

我不确定为什么这不会注册为调用。是否有可能做到这一点？如果是这样，我将不胜感激有关使其正常工作的一些指导。谢谢

Answer 1

您的测试用例流程似乎有误。

var element = createDirective();

spyOn($.fn, "slideDown");

expect($.fn.slideDown).toHaveBeenCalled();

在这段代码中，在创建 spy 和检查期望之间什么都不能执行 - 所以没有什么可以调用 slideDown。

什么应该调用slideDown？您应该首先创建元素，将 spy 放置在其上，然后触发最终调用 slideDown 的更改 - 在所有这些完成之后，按照这个顺序，您应该能够在您的测试。