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);

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

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();
    })
});

我从测试结果中得到的错误信息是："Expected spy slideDown to have been called"。我也试过更改我的测试以引用 jQuery 对象，如下所示，但我得到了同样的错误：

var element = createDirective();

spyOn($.fn, "slideDown");

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

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

Answer 1

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

var element = createDirective();

spyOn($.fn, "slideDown");

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

在此代码中，在创建间谍和检查期望之间无法执行任何操作 - 因此无法调用 slideDown。

slideDown 应该怎么调用？你应该先创建元素，在上面放置 spy，然后触发最终调用 slideDown 的变化——完成所有这些之后，按照这个顺序，你应该能够完成这样一个测试中的期望值。

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

JavaScript unit test: Cannot check if jQuery method was called

javascript

jquery

unit-testing

jasmine

angularjs