是否可以测试 Angular 2 中是否存在自定义指令属性？

Question

例如，我有一个名为 featureFlag 的自定义指令，它根据该功能的配置显示或隐藏元素：

<div *myFeatureFlag="'myFeatureName'">
    This should be hidden if the myFeatureName feature is turned off.
</div>

然而，当谈到测试这个时，我不知所措。我已经知道如何测试指令本身，但我想测试 *myFeatureFlag 是否添加到元素，而不测试 myFeatureFlag 指令内部的逻辑。

有没有办法在我的单元测试中检查这个指令是否存在？像这样：

it('should be wrapped in a feature flag', () => {
    expect(element.querySelector('div').myFeatureFlag).toEqual("'myFeatureName'");
});

Answer 1

这是一个丑陋的方法，但它有效。当 Angular 创建绑定时，它会向 HTML

添加一些注释

<!--template bindings={
  "ng-reflect-my-feature-flag": "myFeatureName"
}-->

你可以做的是用一些正则表达式解析它并获取 JSON。然后只需检查值

function getFeatureFlagBinding(el: any) {
  return JSON
    .parse((/template bindings=(\{[\s\S]*?\})/g)
      .exec(el.nativeElement.previousSibling.textContent)[1])['ng-reflect-my-feature-flag'];
}

it('should be wrapped in a feature flag', () => {
  let fixture = TestBed.createComponent(TestComponent);
  fixture.detectChanges();
  let el = fixture.debugElement.nativeElement;

  let div = fixture.debugElement.queryAll(n => n.name === 'div')[0];
  expect(getFeatureFlagBinding(div)).toBe('myFeatureName');
});

是否可以测试 Angular 2 中是否存在自定义指令属性？

Is it possible to test for the presence of a custom directive attribute in Angular 2?

jasmine

angular2-directives

angular