Question

指令中的postLink方法的单元测试失败。这是指令的代码

myApp.directive("hasPermission", function() {
return {
  restrict: 'A',
  scope: {
    'entry': '='
  },
  link: function postLink(scope, element) {
    if (scope.entry === 'removal') {
      element.remove();
    }
  }
};

}）;

这是我写的单元测试

it('has-permission test', function() {
var element = angular.element('<div has-permission entry="not-removal">customer</div>');
  var element = compile(element)(scope);
  scope.$digest();
  expect(element.html()).toBe('customer');

  var element2 = angular.element('<div has-permission entry="removal">customer</div>');
  element2 = compile(element2)(scope);
  scope.$digest();
  expect(element2.html()).toBe('');
});

第二个测试（element2），其中链接方法应该删除元素失败说 - 期望＆＃39;客户＆＃39;要成为＆＃39;

Answer 1

您的代码似乎有点问题，您要求删除条目

element.remove();

但是期望这个元素是空白的

我已经重写了你的代码以通过它，但我建议你仔细看看你的

我的工作是为了这个

https://plnkr.co/edit/YhIefYrIx4U0wrZZhyxl

BTW只是范围

 scope: { 
    entry:"@"
  },

来自

 scope: { 
    entry:"="
  },

将解决必须打破你的测试以使其通过。我已将插件更新为相同的

Answer 2

我发现我的代码存在问题。事实证明存在范围问题。当我在HTML中将“删除”作为字符串传递时，它没有将它绑定到scope.entry字段。所以我所做的是将值赋给scope.entry并将变量传递给模板，然后$ compile完成其余的工作。

it('has-permission test', function() {
scope.entry = 'not-removal';
var element = compile('<div has-permission="entry">customer</div>')(scope);
scope.$digest();
expect(element.html()).toBe('customer');

scope.entry = 'removal';
var element2 = compile('<div has-permission="entry">customer</div>')(scope);
scope.$digest();
expect(element2.OuterHtml).toBe(undefined);

}）;

以下是这方面的问题 - https://next.plnkr.co/edit/HhzHENxohgwRNWCf?preview

茉莉花单元测试在postLink中的element.remove失败 - angularjs指令

2 个答案: