Question

我有这个简单的指令：

    ...
    var readyData = {
        caption: ctrl.caption,
        leftValue: ctrl.leftValue,
        rightValue: ctrl.rightValue,
    };

    $scope.$emit($attrs.id + ".ready", readyData); //$scope is directive's scope and not $rootScope
}

我有以下测试：

describe("Directive: summaryItem", function () {

  // load the directive"s module

      beforeEach(module("summaryItem"));
      it("Should emit the ready event", inject(function ($compile) {
            element = angular.element("<summary-item id=\"summaryItem\"></summary-item>");
            element = $compile(element)(scope);
            scope.$digest();
            var dscope = element.scope();
            spyOn(dscope, "$emit");

            //run code to test
            expect(dscope.$emit).toHaveBeenCalledWith("summaryItem.ready");
      }));

我收到以下错误：

Expected spy $emit to have been called with [ 'summaryItem.ready' ] but it was never called.

我该如何解决这个问题？谢谢！

更新
对于@ themyth92请求，这里是完整的指令代码：

"use strict";
(function (angular) {
    /**
     * @ngdoc directive
     * @name summaryItemApp.directive:summaryItem
     * @description
     * # summaryItem
     */
    angular.module("summaryItem")
        .directive("summaryItem", function () {
            return {
                templateUrl: "views/summary-item.html",
                restrict: "E",
                transclude: true,
                controller: SummaryItemCtrl,
                controllerAs: 'ctrl',
                bindToController: true,
                scope: {
                    options: "=",
                    caption: "="
                }
            };
        });

    function SummaryItemCtrl($scope, $attrs) {
        var ctrl = this;
        ctrl.caption = this.caption;
        if(this.options) {
            ctrl.leftValue = this.options.leftValue;
            ctrl.rightValue = this.options.rightValue;
        }

        var readyData = {
            caption: ctrl.caption,
            leftValue: ctrl.leftValue,
            rightValue: ctrl.rightValue
        };

        $scope.$emit($attrs.id + ".ready", readyData);
    }
}(angular));

Answer 1

您的测试中存在两个问题。首先，该事件将在第一次$scope.$digest()电话时触发。在您的测试中，您在摘要后模拟了$emit函数，因此这不起作用。

此外，因为您的指令使用隔离范围element.scope() does not do what you expect it to do。在这种情况下，element.scope()将返回元素的原始范围; element.isolateScope()将返回指令引入的隔离范围。

然而，还有另一种测试方法。由于$emit - ted事件冒泡到其父作用域，您还可以测试其中一个父作用域收到了正确的事件。

未经测试的代码：

it("Should emit the ready event", inject(function ($compile) { var emitted = false; scope.$on('summaryItem.ready', function() { emitted = true; }); element = angular.element("<summary-item id=\"summaryItem\"></summary-item>"); element = $compile(element)(scope); scope.$digest(); expect(emitted).toBe(true); }));

作为改进，您还可以存储事件而不仅仅是true，这样您就可以对发出的事件执行各种expects。

如何测试指令是否发出事件

1 个答案: