Question

我想测试子指令和父指令之间的交互：我的示例：

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之间的交互，我不想模拟子指令（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

Answer 1

您的指令已被编译，并且由于replace: true指令上有bar，因此您在DOM中将不再找到bar。您可以通过查看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();

测试子代指令与父代指令的交互作用

1 个答案: