I am interested in testing this specific directive:
.directive('uniqueDirective', function () {
return {
restrict: 'A',
scope: {
uniqueDirective: '@',
tooltip: '@',
placement: '@',
style: '@'
},
template: '<i ng-class="iconClasses" style="{{style}}" mw-tooltip="{{tooltip}}" placement="{{placement}}"></i>',
link: function (scope, el) {
el.addClass('unique-icon');
//set icon classes
scope.$watch('uniqueDirective', function (newVal) {
if (newVal) {
var isFontAwesome = angular.isArray(scope.uniqueDirective.match(/^fa-/)),
isRlnIcon = angular.isArray(scope.uniqueDirective.match(/rln-icon/));
if (isFontAwesome) {
scope.iconClasses = 'fa ' + scope.uniqueDirective;
} else if (isRlnIcon) {
scope.iconClasses = 'rln-icon ' + scope.uniqueDirective;
} else {
scope.iconClasses = 'glyphicon glyphicon-' + scope.uniqueDirective;
}
}
});
}
};
})
My main concern is understanding what happens when the value of scope.uniqueDirective changes. I expect that the class of the <i> element should also change because of the watcher on the scope.uniqueDirective, right? To test this, I have written the following code:
it('should modify the class based on the new icon', function () {
var icon = '<span unique-directive="search"></span>';
var el = $compile(icon)(scope);
scope.$digest();
expect(el.children().hasClass("glyphicon")).toBe(true);
expect(el.children().hasClass("glyphicon-search")).toBe(true);
scope.uniqueDirective = "fa-star";
scope.$digest();
expect(el.children().hasClass("fa")).toBe(true);
expect(el.children().hasClass("fa-star")).toBe(true);
});
Surprisingly, the last two assertions return false, even though I have triggered a change in scope.uniqueDirective with scope.$digest. Any ideas why the <i> element still has classes "glyphicon glyphicon-search" instead of "fa fa-star"?