次のディレクティブが与えられた場合、次のテストが失敗する理由を説明できますか?DEMO
指令
angular.module('plunker').directive('maybeLink', function($compile) {
return {
scope: {
maybeLink: '=',
maybeLinkText: '='
},
link: function(scope, element, attrs) {
scope.$watch('maybeLinkText', function(newVal) {
scope.text = newVal.replace(/\n/g, '<br>');
});
scope.$watch('maybeLink',function() {
var newEl;
if (scope.maybeLink) {
newEl = $compile('<a href="#">{{ text }}</a>')(scope);
} else {
newEl = $compile('<span>{{ text }}</span>')(scope);
}
element.replaceWith(newEl);
element = newEl;
});
}
};
});
テスト
describe('Directive: maybeLink', function() {
var scope, $compile;
beforeEach(function() {
module('plunker');
inject(function($rootScope, _$compile_) {
scope = $rootScope;
$compile = _$compile_;
});
});
function compile(html) {
var element = $compile(html)(scope);
scope.$digest();
return element;
}
it('should create a link when link URL exists', function() {
scope.myLinkText = 'Great Video';
scope.myLinkURL = 'http://www.youtube.com/watch?v=rYEDA3JcQqw';
var element = compile('<span maybe-link="myLinkURL" maybe-link-text="myLinkText"></span>');
console.log(element[0].outerHTML); // => <span maybe-link="myLinkURL" maybe-link-text="myLinkText" class="ng-isolate-scope ng-scope"></span>
console.log(element.html()); // => (empty string)
expect(element.text()).toBe('Great Video');
expect(element.find('a').length).toBe(1);
});
});