Question

我最近开始学习如何使用karma / jasmine进行角度测试。

以下是该方案：我有一个监听事件的指令，当被调用它时会调用指令范围上的函数。

这是我的测试。问题是永远不会调用该函数。下面的代码不起作用因为间谍无法找到监听器调用的函数。指令函数更新listItems值。不是很TDD，但目前只能在现实中使用，而不是在测试中：/

指令

(function() {
    angular.module('app').directive('listComponent', function(utilities) {
        return {
            restrict: 'E', //element
            templateUrl: 'views/listComponent.html',
            scope: {
                listItems: '='
            },
            replace: true,
            link: function (scope, element, attributes) {
                scope.title = attributes["title"];
                scope.listItemsGrouped = [];
                var primary = attributes["primaryField"];

                var itemsGrouped = _.groupBy( scope.listItems, function (obj) {
                    return obj[primary];
                });

                scope.listItems = [];
                angular.forEach(itemsGrouped[3016],function(item){
                    scope.listItems.push({dimValueParent: item.dimValueParent,dimValueChild: item.dimValueChild, value: item.value});
                });

                scope.$on('refreshListItems',
                    function(evt,affectedValues) {
                        scope.refreshList(affectedValues);
                    });

            },
            controller: function($scope){
                $scope.refreshList = function(vals) {
                    //handle values affected by the update
                    angular.forEach(vals, function(affectedValue) {
                        var indexParent = utilities.findIndexOf($scope.listItems,"dimValueParent",affectedValue.Dimensions[0].Value);
                        var indexChild = utilities.findIndexOf($scope.listItems,"dimValueChild",affectedValue.Dimensions[1].Value);
                        if (indexParent > -1 && indexChild > -1) {
                            $scope.listItems[indexChild].value = affectedValue.CalculatedValue;
                        }
                    });
                }
            }
        }
    });
}());

测试代码，在每个之前

beforeEach(inject(function ($compile, $rootScope) {
        scope = $rootScope;
        localScope = $rootScope.$new();
        ele = angular.element(
            '<list-component title="Testing generic list" list-items="list" ></list-component>'
        );

        mockupDataFactory = konstruktMockupData.getInstance();

        //these variables are needed.
        scope.data = mockupDataFactory.pivotedData;

        scope.listItems = [
            {dimValueParent: "3016",dimValueChild: "100", value:101},
            {dimValueParent: "3016",dimValueChild: "110", value:102},
            {dimValueParent: "3016",dimValueChild: "120", value:103}];

        scope.affectedValues = [
            {CalculatedValue: 1000,Dimensions:[{ Key: "1", Value: "3016" }, { Key: "4", Value: "100" }]},
            {CalculatedValue: 1100,Dimensions: [{ Key: "1", Value: "3016" }, { Key: "4", Value: "110" }]},
            {CalculatedValue: 1200,Dimensions: [{ Key: "1", Value: "3016" }, { Key: "4", Value: "120" }]}];

        scope.$apply();

    }));

以下是失败的测试

 it('Should handle an update listItems event', inject(function (){
        var affectedAccountsAfterUpdateExpcted = [
            {dimValueParent: "3016",dimValueChild: "100", value:1000},
            {dimValueParent: "3016",dimValueChild: "110", value:1100},
            {dimValueParent: "3016",dimValueChild: "120", value:1200}];


        //spyOn(localScope, "refreshList");
        scope.$broadcast("refreshListItems", scope.affectedValues);

        spyOn(scope, "$on").andCallFake(function (event, affectedValues) {
            expect(affectedValues).toBe(scope.affectedValues);
            expect(event).toEqual("refreshListItems");
        });

        expect(scope.$on).toHaveBeenCalled();

        scope.$apply();
        expect(scope.listItems).toBeDefined();
        //expect(scope.listItems).toEqual(affectedAccountsAfterUpdateExpcted);
    }));

我对下一步该做什么很感兴趣。这是基于lght答案的更新。如何修复以便在测试中捕获事件？似乎间谍不被称为。因为我正在播放这个活动，所以很奇怪！？

Answer 1

我没有尝试检查事件是否被捕获，而是通过模拟$on来检查范围是否正在侦听特定事件

describe("Testing the initialization", function () {
  beforeEach(function () {
    controller = $controller("connectionBannerCtrl", {
      $rootScope: $rootScope,
      $scope: $scope,
      ConnectionBanner: ConnectionBanner
    });
  });
  it("should subscribe to the 'ConnectionBannerChanged' event", function () {
    spyOn($rootScope, "$on").andCallFake(function (event, callback) {
      expect(callback).toBe($scope.setup);
      expect(event).toEqual("ConnectionBannerChanged");
    });
    controller = $controller("connectionBannerCtrl", {
      $rootScope: $rootScope,
      $scope: $scope,
      ConnectionBanner: ConnectionBanner
    });
    expect($rootScope.$on).toHaveBeenCalled();
  })
});

关于spyOn（http://jasmine.github.io/2.0/introduction.html#section-Spies）

的全部内容

Answer 2

不要spyOn，您需要做的只是broadcast事件，其余的应该是自动完成的。

it('should call the event', () => {
  spyOn(scope, 'refreshList');
  scope.$broadcast('refreshListItems');
  expect(scope.refreshList).toHaveBeenCalled();
});

angularjs test验证事件是否被捕获

2 个答案: