Javascript Jasmine angular指令正在编译为对象

我正在对Angular指令进行单元测试，而这个测试在Angular 1.4.9中曾经起过作用。我最近升级到1.5.0，所以我认为这个问题/（意外的结果）可能是由于

角度模拟造成的

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'button-toggle.html',
    $scope;

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
    console.log(compiledElement);
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

我不明白为什么会这样。它应该被编译成
按钮toggle.html
内容

编辑：忘记将按钮切换模块插入一个beforeach中。我是否也需要注入主应用程序模块？如果插入它，则会得到一个
未定义的非对象（evaluation compiledElement.html）

模块注入：

beforeEach(module('ocapp.buttonToggle'));
beforeEach(module('ocapp'));

编辑2:我不再认为这是
角度模拟的版本问题。我的指令取决于在单独文件中定义的控制器，并且它没有被解析

按钮切换.directive.js

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle(ButtonToggleController) {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: ButtonToggleController
    };
  }
})();

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    $httpBackend;

  beforeEach(module('ocapp.buttonToggle'));
  //beforeEach(module('ocapp'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope, $injector) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET(btElementPath).respond(200, '');
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle() {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: 'ButtonToggleController'
    };
  }
})();

describe('The buttonToggle directive', function() {

  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    element;

  beforeEach(module('ocapp.buttonToggle'));
  beforeEach(module('templates'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope;
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

button toggle.html
与此处使用的所有其他文件位于同一目录中，也许我不需要
templateUrl
属性中的扩展路径

编辑3:我已经解决了所有其他问题，现在又回到了原点

按钮切换.directive.spec.js

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle(ButtonToggleController) {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: ButtonToggleController
    };
  }
})();

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    $httpBackend;

  beforeEach(module('ocapp.buttonToggle'));
  //beforeEach(module('ocapp'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope, $injector) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET(btElementPath).respond(200, '');
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle() {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: 'ButtonToggleController'
    };
  }
})();

describe('The buttonToggle directive', function() {

  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    element;

  beforeEach(module('ocapp.buttonToggle'));
  beforeEach(module('templates'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope;
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

事实证明，这不是一个角度版本问题，而是缺少依赖关系

使用npm安装
karma-ng-html2js-preprocessor

编辑
karma.conf.js
将指令的
templateUrl
更改为
'button-toggle.html'
测试应该如下所示
karma.conf.js添加

preprocessors: {
   '**/*.html': ['ng-html2js']
},

ngHtml2JsPreprocessor: {
   stripPrefix: 'app/button-toggle/'
   moduleName: 'templates'
},

按钮切换.directive.spec.js

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle(ButtonToggleController) {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: ButtonToggleController
    };
  }
})();

describe('The buttonToggle directive', function() {
  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    $httpBackend;

  beforeEach(module('ocapp.buttonToggle'));
  //beforeEach(module('ocapp'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope, $injector) {
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $httpBackend = $injector.get('$httpBackend');
    $httpBackend.whenGET(btElementPath).respond(200, '');
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    var element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    console.log(compiledElement);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

(function() {
  'use strict';

  angular
    .module('ocapp.buttonToggle')
    .directive('buttonToggle', buttonToggle);

  function buttonToggle() {
    return {
      restrict: 'E',
      templateUrl: 'app/button-toggle/button-toggle.html',
      replace: true,
      scope: {
        on: '='
      },
      controller: 'ButtonToggleController'
    };
  }
})();

describe('The buttonToggle directive', function() {

  var $compile,
    btElement = '<button-toggle></button-toggle>',
    compiledElement,
    btElementPath = 'app/button-toggle/button-toggle.html',
    $scope,
    element;

  beforeEach(module('ocapp.buttonToggle'));
  beforeEach(module('templates'));

  beforeEach(inject(function(_$compile_, $templateCache, $rootScope) {
    $compile = _$compile_;
    $scope = $rootScope;
    var template = $templateCache.get(btElementPath);
    $templateCache.put(btElementPath, template);
    element = angular.element(btElement);
    compiledElement = $compile(element)($scope);
    $scope.$digest();
  }));

  it('should compile', function() {
    expect(compiledElement.html()).toContain('btn');
  });
});

description（'按钮切换指令'，函数（））{
var$compile，
btElement=''，
汇编元素，
btElementPath='app/button toggle/button toggle.html'，
$scope，
元素；
在每个模块之前（模块（'ocapp.buttonToggle'）；
每个之前（模块（“模板”）；
beforeach（注入函数（$compile_$templateCache，$rootScope）{
$compile=\$compile；
$scope=$rootScope；
var template=$templateCache.get（btElementPath）；
$templateCache.put（btElementPath，template）；
元素=角度元素（btElement）；
compiledElement=$compile（元素）（$scope）；
$scope.$digest（）；
}));
它（'should compile'，function（）{
expect（compiledElement.html（））.toContain（'btn'）；
});
});
请确保您也使用了1.5Yessir的角度模拟，我是。忘了注入模块，但现在我得到一个不同的错误。