2

我是 Karma 的初学者，如果这是一个愚蠢的问题，请原谅我。

我正在测试我的一个指令，这有两种特殊的方式：

1 - 它根据范围内容有条件地更改模板并重新编译链接器内的指令元素

var linker = function(scope, element, attrs) {
//...

var getTemplate = function(contentType) {
            var template = '';

            switch(contentType) {
            case 'canvas':
                template = '<div> stuff here </div>';
                break;
            case 'div':
                template = '<div> other stuff here </div>';
                break;
                //...
             }

            return template;
        };

var html = getTemplate(scope.content.uiType);
            var ae = angular.element(html);

            element.replaceWith(ae);
            $compile(ae)(scope);

}

2 - 它在链接器中使用 jsplumb 来配置指令元素并设置一些 jsplumb 端点：

// Inside the linker function

var outEndPoint = jsPlumb.addEndpoint (ae, { /* parameters */ }, AudioOutPoint);

调用 jsPlumb.addEndpoint 时会出现问题。调试库，似乎在某个时刻，jsPlumb 使用 jQuery 返回某个元素 - 它创建的那个 - 通过 id，沿着 $("#jsplumb-element");

jQuery 依次执行 tis 行：

elem = document.getElementById( match[2] );

并且 getElementById 返回 null （可能是因为没有真正的 DOM？）。在这一点上，引发了一个异常，一切都崩溃了。

明确一点：如果我为此语句设置断点，并document.getElementsByTagName('div');在控制台中执行，它将返回 null.

我正在使用 Chrome 来测试这个指令，简单的测试代码是这样的：

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

    beforeEach(module('hyacinthHostApp'));

    var element, $compile, scope;

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


  it('should set the right audioDestinations', inject(function () {

      scope.content = {
          name: "testElement",
          id: "testElement000",
          uiType: "canvas",
          audioIn: 0,
          audioOut: 1,
          audioSources: [],
          audioDestinations: []
      };

      var grandparent = angular.element('<div id="pluginArea"></div>');
      var parent =  angular.element('<div class="plugin"></div>');
      var element = angular.element('<div hy-plugin-window content="content"></div>');
      grandparent.append(parent);
      parent.append(element);
      debugger;
      element = $compile(element)(scope);

      expect(scope.audioDestinations.length).toBe(1);

  }));
});

期望部分永远不会得到满足，因为指令一旦被链接就会除外。请注意，在应用程序中，此代码工作正常（因此问题出在测试指令中）。

我错过了什么？

4

1 回答 1

7

将元素附加到 DOM，在您的测试中，执行以下操作：

grandparent.appendTo(document.body);

顺便提一句。您正在使用的插件不应该做document.getElementsByTagName('div')，而是做element.find(...)。然后，您不必将其附加到 DOM，这将使测试运行得更快。

于 2013-06-26T22:29:20.540 回答