angularjs ディレクティブのテンプレート関数の属性をどのようにテストしますか?属性には、リンク関数で定義された関数と角度バインディング値の両方がありますか? これがディレクティブです。
var app = angular.module('mmApp', []);
app.directive('mmField', function(){
return {
'restrict': 'E',
'priority': 5,
'replace': true,
'scope': {
'path': '@',
'label': '@',
'type': '@',
'editable': '@'
},
//this is the template function and this is where labelText() does not evaluate at least not where I test it.
'template': '<div class="mm-field">' +
'<label for="{{inputId()}}" ng-show="labelText()">{{labelText()}}</label> ' +
'</div>',
'link': function (scope, element, attrs) {
var query = null;
//this is where the labelText() function is defined
scope.labelText = function () {
var labelAttrValue = (scope.label || attrs['withLabel'] || '');
// cater for custom labels specified via the label or with-label attribute
if (labelAttrValue && labelAttrValue.toLowerCase() !== 'true' && labelAttrValue.toLowerCase() !== 'false') {
return (labelAttrValue || '') + ':';
} else if (labelAttrValue.toLowerCase() !== 'false' && scope.field) {
return (scope.field['name'] || 'FIELD_NAME_NOT_DEFINED') + ':';
} else if (labelAttrValue.toLowerCase() == 'false') {
return '';
} else {
return 'Loading...';
}
};
}
])
これは、ディレクティブが html ページにある場所です。
<mm-field with-label editable="false" path="{{rootPath}}.name"></mm-field>
モカとチャイのテスト スイートを使用しています。これは私がそれをテストしたい方法です。
describe('InputId', function () {
it.only('should generate an ID', function () {
var element = $($compile('<mm-field with-label="MONKEY" editable="false" path="something.name"></mm-field>' +
'</div>')($scope));
$scope.$digest();
expect(element.find('label').attr('ng-show')).to.equal('an evaluated value of labelText()');
});
});