Тестирование дочерней трансцендентной директивы взаимодействия с родительской директивой - PullRequest
Новая
       31

Тестирование дочерней трансцендентной директивы взаимодействия с родительской директивой

0 голосов
/ 04 октября 2018

Я хочу проверить взаимодействие между дочерней и родительской директивой: Мой пример: 

app.directive('foo', function() {
  return {
    restrict: 'AE',
    template: '<div><div ng-transclude></div></div>', 
    transclude: true,
    controller: function($scope) {
      this.add = function(x, y) {
        return x + y;
      }
  }
};
});

app.directive('bar', function() {
  return {
    restrict: 'AE',
    require: '^foo',
    template: '<div></div>', 
    replace: true,
    link: function(scope, element, attrs, foo) {

      console.log('link directive bar')
      scope.callFoo = function(x, y) {
        scope.sum = foo.add(x, y);
      }
    }
  };
});

Я хочу проверить взаимодействие между boo и test, я не хочу здесь высмеивать директиву child (boo)мой тест: 

it('ensures callFoo does whatever it is supposed to', function() {
  // Arrange
  var element = $compile('<div foo><bar></bar></div>')($scope);

  var ele = element.find('bar')
  var barScope = element.find('bar').scope();

  console.log('parent element :',element)
  console.log('child element :',ele)


  // Act Undefined :(
  barScope.callFoo(1, 2);

  // Assert
  expect(barScope.sum).toBe(3);
});

полный пример: http://plnkr.co/edit/vYNFwpkbbHi4lsgwJkA9?p=preview

1 Ответ

0 голосов
/ 04 октября 2018

Ваши директивы уже скомпилированы, и, поскольку у вас есть replace: true в директиве bar, вы больше не найдете bar в DOM.Вы можете увидеть это, посмотрев на element.html(), который в вашем случае показал бы что-то вроде этого: 

<div><div ng-transclude=""><div class="ng-scope"></div></div></div>

Если вы удалите replace: true, ваш тест будет работать.

В противном случае, когдаjQuery не загружен, jqLite ограничен, и его метод find может искать только имена тегов.Поэтому я попытался быстро найти вашу область видимости так: 

var barScope = element.find("div").eq(2).scope()

У вас есть загруженный jQuery в вашем приложении?Если это так, вы можете загрузить его в свой тест, а затем добавить дополнительную информацию к элементу bar, например: 

var element = $compile('<div foo><bar id="bar"></bar></div>')($scope);

Затем вы можете найти его как: 

var barScope = element.find('#bar').scope();
...