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

Question

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

Я тестирует ДИРЕКТИВОЙ шахты, которая свойственна два способа:

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 в линкере agument элемент директивы и установить некоторые 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 возвращает нуль (может быть, потому что нет никакого реального 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); 

    })); 
}); 

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

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

Answer 1

Append элемент в DOM, в тесте, сделать что-то вроде:

grandparent.appendTo(document.body); 

КСТАТИ. плагин, который вы используете, не должен делать document.getElementsByTagName('div') и скорее делать element.find(...). Затем вам не нужно добавлять его в DOM, что ускорит выполнение теста.