3

这是我对 AngularJS 指令的第一次测试，我可能遗漏了一些非常基本的东西。

运行我的测试套件时，在调用 $compile 函数后出现错误：当它试图评估urlIsSameOrigin是否：

TypeError：'undefined' 不是对象（评估 'parsed.protocol'）

tableDirective.js 指令

https://gist.github.com/jdreimann/a5076363f1d8f3a605a0

tableDirective.js 测试

'use strict';

describe('Directive: TableDirective', function() {

  var $rootScope,
  $compile,
  elmBody;

  beforeEach(module('wdUiCoreApp'));

  beforeEach(inject(function (_$compile_ , _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    elmBody = angular.element(
      '<div ui-core-table><div class="panel__header"></div></div>'
    );

    $compile(elmBody)($rootScope);
    scope.$digest();
  }));    

  describe('elmBody', function () {
    it('should be an object', function() {
      expect(elmBody).toEqual(jasmine.any(Object));
    });
  });

堆栈跟踪

TypeError: Cannot read property 'protocol' of undefined
    at urlIsSameOrigin (http://localhost:8082/base/app/bower_components/angular/angular.js:13820:17)
    at $http (http://localhost:8082/base/app/bower_components/angular/angular.js:7629:23)
    at Function.$http.(anonymous function) (http://localhost:8082/base/app/bower_components/angular/angular.js:7847:18)
    at compileTemplateUrl (http://localhost:8082/base/app/bower_components/angular/angular.js:6463:13)
    at applyDirectivesToNode (http://localhost:8082/base/app/bower_components/angular/angular.js:6066:24)
    at compileNodes (http://localhost:8082/base/app/bower_components/angular/angular.js:5669:15)
    at compile (http://localhost:8082/base/app/bower_components/angular/angular.js:5602:15)
    at null.<anonymous> (http://localhost:8082/base/test/spec/directives/tableDirective.js:18:5)
    at Object.invoke (http://localhost:8082/base/app/bower_components/angular/angular.js:3762:17)
    at workFn (http://localhost:8082/base/app/bower_components/angular-mocks/angular-mocks.js:2144:20)
Error: Declaration Location
    at window.inject.angular.mock.inject (http://localhost:8082/base/app/bower_components/angular-mocks/angular-mocks.js:2129:25)
    at null.<anonymous> (http://localhost:8082/base/test/spec/directives/tableDirective.js:11:14)
    at jasmine.Env.describe_ (http://localhost:8082/base/node_modules/karma-jasmine/lib/jasmine.js:884:21)
    at jasmine.Env.describe (http://localhost:8082/base/node_modules/karma-jasmine/lib/jasmine.js:869:15)
    at describe (http://localhost:8082/base/node_modules/karma-jasmine/lib/jasmine.js:629:27)
    at http://localhost:8082/base/test/spec/directives/tableDirective.js:3:1
4

1 回答 1

6

问题是该指令通过返回元素属性uiCoreTable值的函数定义了它的模板 URL 。template

由于您的测试代码没有指定template属性，因此模板 URL 未定义，并且在 Angular 尝试从服务器请求模板 URL 时会引发错误。
更具体地说，$http服务的一项安全检查引发异常：检查protocolURL 的测试尝试访问parsed.protocol，但parsed未定义（因为templateUrl未定义）。

如果现在还不明显，为了使错误消失，您需要在template属性中指定模板 URL。例如：

elmBody = angular.element('<div ui-core-table template="/path/to/template.html">...</div>');

如果您不想向服务器发出实际请求，您可以$templateCache使用一些 HTML（在 key 下）预先填充，或者在请求目标时使用自定义响应/path/to/template.html训练模拟对象。 $httpBackend/path/to/template.html

于 2014-07-01T12:30:38.803 回答