当单元测试时，AngularJS指令中的scope方法不是函数

Posted 2021-05-04

我有这个摩卡测试：

'use strict';

///////////////////////////////////

describe('all admin page directives', function () {

  let scope, $compile, element, tmp;
  beforeEach(module('app'));
  beforeEach(module('templates'));

  afterEach(function () {
    scope.$destroy();
  });

  describe('category', function () {

    beforeEach(inject(function ($injector) {
      $compile = $injector.get('$compile');
      var $rootScope = $injector.get('$rootScope');
      scope = $rootScope.$new();
      scope.rightSidebarData = {};
      $compile('<create-category right-sidebar-data="rightSidebarData"></create-category>')(scope);
      return scope.$digest();
    }));

    it('should do something', function () {
       scope.updateModel();           //     <<<<<<  ERROR HERE
    });


  });

});

这是我的指示：

/* globals angular */

angular.module('app').directive('createCategory',

  ['UserService', 'AssignmentService', 'NotificationService', 'USER', 'UserInfoService', 'AlertService', '$window',

    function (UserService, AssignmentService, NotificationService, USER, UserInfoService, AlertService, $window) {

      return {

        scope: {
          rightSidebarData: '=',
        },

        restrict: 'EA',
        templateUrl: "pages/admin/views/templates/category/create-category.html",

        link: function ($scope, el, attrs) {

          $scope.rightSidebarData.setOrReset = function () {
            $scope.setOrReset();
          };

        },

        controller: function ($scope, FUNCTIONAL_TEAM_ENUM, CATEGORY_ENUM, CategoryService) {

          const rsd = $scope.rsd = $scope.rightSidebarData;

          $scope.setOrReset = function () {...};

          $scope.updateModel = function () {...};

          $scope.saveModel = function () {...};

        },
      };
    }
  ]);

我收到此错误：

TypeError：scope.updateModel不是函数

有谁知道我在测试中需要做些什么才能解决这个问题？另外，我如何知道是否需要使用$rootScope.$new()或者是否应该通过父控制器的范围？

答案

我必须在我的karma配置文件中添加另一个预处理器：

preprocessors: {
  './public/pages/**/views/**/*.html':['ng-html2js'], // this
},

然后使用以下，它工作：

'use strict';    
describe('all admin page directives', function () {

  let scope, el, tmp, isoScope;

  beforeEach(module('app'));
  beforeEach(module('ngMockE2E'));
  beforeEach(module('templates'));

  afterEach(function () {
    scope.$destroy();
  });

  describe('category', function () {

    beforeEach(inject(function ($injector) {
      const $compile = $injector.get('$compile');
      const $rootScope = $injector.get('$rootScope');
      const $templateCache = $injector.get('$templateCache');
      console.log('create category template =>', $templateCache.get('pages/admin/views/templates/category/create-category.html'));

      scope = $rootScope.$new();
      scope.rightSidebarData = {};
      scope.rightSidebarData.model = {};
      let element = angular.element(`<create-category right-sidebar-data="rightSidebarData"></create-category>`);
      el = $compile(element)(scope);
      $rootScope.$digest();
      scope.$digest();
      el.isolateScope().setOrReset();
    }));

    it('should do something', function () {
      el.isolateScope().updateModel();
    });

  });

});