isolateScope() 给出未定义的 - 使用 Karma 的单元测试指令

Question

如问题标题所述，我在调用 isolateScope() 时变得不确定。我尝试根据 Unit Testing AngularJS Directives With External Templates.

上给出的说明对我的 Angular 指令进行单元测试

这是我的代码：

directive.js

angular.module("myTestApp")
  .directive("testDirective", function(){
    return{
      restrict: "E",
      require: "ngModel",
      scope:{
        ngModel: "=",
        label: "@?"
      },
      templateUrl: "/mypath/templates/testDirective.html",
      link: function($scope, element, attributes, ngModelCtrl){
        $scope.functions = {},
        $scope.settings = {
          label: $scope.label ? $scope.label : ""
        }
      }
    };
  });

我已将 karma-ng-html2js-preprocessor 用于 templateUrl。

karma.conf.js（代码只包含与ng-html2js相关的部分）

files:[
  //All Js files concerning directives are also included here...
  '/mypath/templates/*.html'
],

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

ngHtml2JsPreprocessor: {
  moduleName: 'template'
},

plugins: ['karma-*'],

directiveSpec.js

describe("testDirective Test", function(){
var scope, $compile,$httpBackend, template;

beforeEach(module('myTestApp'));
beforeEach(module('template'));

beforeEach(inject(function($rootScope, _$compile_, _$httpBackend_){
    scope = $rootScope.$new();
    $compile = _$compile_;
    $httpBackend = _$httpBackend_;
}));

it("should check if the value of label attribute id set to dummyLabel", function(){
    $httpBackend.expect('GET','/mypath/templates/testDirective.html').respond();
    scope.label = 'dummyLabel';
    var element = angular.element('<test-directive label= "label" ></test-directive>');

    element = $compile(element)(scope);
    console.log(element);
    scope.$digest();
    console.log('Isolate scope: '+ element.isolateScope());
    expect(element.isolateScope().label).toEqual('dummyLabel');
});

});

此处 console.log(element); 打印 {0: <test-directive label="label" class="ng-scope"></test-directive>, length: 1}

问题： console.log('Isolate scope: '+ element.isolateScope()); 给出 undefined.

我在 Whosebug 中的许多问题上查看了这个问题，但未能找到正确的解决方案。

此外，我必须使用 $httpBackend 来获取 html 文件，否则它会抛出 Unexpected Request 错误。

我将非常感谢任何帮助，因为我在过去一个星期以来一直坚持这个错误！

Answer 1

乍一看只是猜测，但是...

您的 .respond() 需要 return 一些东西。现在您正在拦截对您的模板的请求并且不响应任何内容，因此导致空数据和 isolateScope() 未定义。

Answer 2

对于可能有同样问题的人：

当使用 $httpBackend 模拟 HTML 文件时，指令测试没有按预期工作。应该是，并且可以通过简单地使用 ng-html2js 插件来包含 HTML 文件。所以我删除了 $httpBackend 调用并使用 stripPrefix 将我的 HTML 文件正确包含为模块。成功了！

希望对其他人有所帮助！

isolateScope() 给出未定义的 - 使用 Karma 的单元测试指令

isolateScope() gives undefined - Unit Testing directives with Karma

javascript

unit-testing

angularjs

ng-html2js

karma-jasmine