是否可以測試Angular 2中是否存在自定義指令屬性？

舉例來說，我有一個名爲featureFlag一個自定義的指令，它顯示或隱藏的元素取決於要素的配置：是否可以測試Angular 2中是否存在自定義指令屬性？

<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'"); 
});

來源

2016-10-14 Maloric

你檢查的價值如何，他們[測試'* ngIf'（https://github.com/angular/angular/blob/master/modules/@angular/common/test/directives /ng_if_spec.ts）？也許這將有助於... – Sasxa

* ngIf的測試測試元素的可見性，我特別想在這裏避免。我只是想測試一下功能標誌屬性的添加，而不測試結果行爲（因爲該行爲可能在以後發生變化）。 – Maloric

你不能測試。它是模板的一部分，所以在編譯期間刪除angular2以生成合適的html。你只能測試html結果，而不能直接模板。 –

這是一個醜陋的方式，但它的工作原理。當角創建綁定，它增加了一些評論到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'); 
});

來源

2016-10-14 10:02:13

幾乎正是我所需要的。我沒有在我的問題中指定的事情是，我可能需要檢查一個組件內有幾個元素。我已經更新了答案，僅查找特定元素（和前面的註釋），而不是組件中的第一個匹配註釋。否則是非常好 – Maloric

也重構使用幫助函數來獲取功能標誌指令的值。使測試稍微短一些以啓動。 – Maloric

是否可以測試Angular 2中是否存在自定義指令屬性？

回答

相關問題