Тестирование директивы angularjs, которая управляет DOM

Я совсем новичок в Карме, так что простите меня за глупый вопрос.

Я тестирую свою директиву, которая отличается двумя способами:

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, в свою очередь, выполняет эту строку:

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

  }));
});

Ожидаемая часть никогда не выполняется, потому что директива исключается, как только она связана. Обратите внимание, что в приложении этот код работает нормально (поэтому проблема заключается в тестовой директиве).

Что мне не хватает?