单元测试时，AngularJS 指令中的作用域方法不是函数

Question

我有这个摩卡测试：

'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 is not a function

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

Answer 1

我不得不在我的业力配置文件中添加另一个预处理器：

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

  });

});

单元测试时，AngularJS 指令中的作用域方法不是函数

scope method in AngularJS directive is not a function, when unit testing

javascript

angularjs

angularjs-directive

karma-runner