'use strict';

describe('$compile', function() {

function isUnknownElement(el) {

return !!el.toString().match(/Unknown/);

}

function isSVGElement(el) {

return !!el.toString().match(/SVG/);

}

function isHTMLElement(el) {

return !!el.toString().match(/HTML/);

}

function supportsMathML() {

var d = document.createElement('div');

d.innerHTML = '<math></math>';

return !isUnknownElement(d.firstChild);

}

// IE9-11 do not support foreignObject in svg...

function supportsForeignObject() {

var d = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');

return !!d.toString().match(/SVGForeignObject/);

}

function getChildScopes(scope) {

var children = [];

if (!scope.$$childHead) { return children; }

var childScope = scope.$$childHead;

do {

children.push(childScope);

children = children.concat(getChildScopes(childScope));

} while ((childScope = childScope.$$nextSibling));

return children;

}

var element, directive, $compile, $rootScope;

beforeEach(module(provideLog, function($provide, $compileProvider) {

element = null;

directive = $compileProvider.directive;

directive('log', function(log) {

return {

restrict: 'CAM',

priority:0,

compile: valueFn(function(scope, element, attrs) {

log(attrs.log || 'LOG');

})

};

});

directive('highLog', function(log) {

return { restrict: 'CAM', priority:3, compile: valueFn(function(scope, element, attrs) {

log(attrs.highLog || 'HIGH');

})};

});

directive('mediumLog', function(log) {

return { restrict: 'CAM', priority:2, compile: valueFn(function(scope, element, attrs) {

log(attrs.mediumLog || 'MEDIUM');

})};

});

directive('greet', function() {

return { restrict: 'CAM', priority:10, compile: valueFn(function(scope, element, attrs) {

element.text("Hello " + attrs.greet);

})};

});

directive('set', function() {

return function(scope, element, attrs) {

element.text(attrs.set);

};

});

directive('mediumStop', valueFn({

priority: 2,

terminal: true

}));

directive('stop', valueFn({

terminal: true

}));

directive('negativeStop', valueFn({

priority: -100, // even with negative priority we still should be able to stop descend

terminal: true

}));

directive('svgContainer', function() {

return {

template: '<svg width="400" height="400" ng-transclude></svg>',

replace: true,

transclude: true

};

});

directive('svgCustomTranscludeContainer', function() {

return {

template: '<svg width="400" height="400"></svg>',

transclude: true,

link: function(scope, element, attr, ctrls, $transclude) {

var futureParent = element.children().eq(0);

$transclude(function(clone) {

futureParent.append(clone);

}, futureParent);

}

};

});

directive('svgCircle', function() {

return {

template: '<circle cx="2" cy="2" r="1"></circle>',

templateNamespace: 'svg',

replace: true

};

});

directive('myForeignObject', function() {

return {

template: '<foreignObject width="100" height="100" ng-transclude></foreignObject>',

templateNamespace: 'svg',

replace: true,

transclude: true

};

});

return function(_$compile_, _$rootScope_) {

$rootScope = _$rootScope_;

$compile = _$compile_;

};

}));

function compile(html) {

element = angular.element(html);

$compile(element)($rootScope);

}

afterEach(function() {

dealoc(element);

});

describe('configuration', function() {

it('should register a directive', function() {

module(function() {

directive('div', function(log) {

return {

restrict: 'ECA',

link: function(scope, element) {

log('OK');

element.text('SUCCESS');

}

};

});

});

inject(function($compile, $rootScope, log) {

element = $compile('<div></div>')($rootScope);

expect(element.text()).toEqual('SUCCESS');

expect(log).toEqual('OK');

});

});

it('should allow registration of multiple directives with same name', function() {

module(function() {

directive('div', function(log) {

return {

restrict: 'ECA',

link: {

pre: log.fn('pre1'),

post: log.fn('post1')

}

};

});

directive('div', function(log) {

return {

restrict: 'ECA',

link: {

pre: log.fn('pre2'),

post: log.fn('post2')

}

};

});

});

inject(function($compile, $rootScope, log) {

element = $compile('<div></div>')($rootScope);

expect(log).toEqual('pre1; pre2; post2; post1');

});

});

it('should throw an exception if a directive is called "hasOwnProperty"', function() {

module(function() {

expect(function() {

directive('hasOwnProperty', function() { });

}).toThrowMinErr('ng','badname', "hasOwnProperty is not a valid directive name");

});

inject(function($compile) {});

});

it('should throw an exception if a directive name starts with a non-lowercase letter', function() {

module(function() {

expect(function() {

directive('BadDirectiveName', function() { });

}).toThrowMinErr('$compile','baddir', "Directive name 'BadDirectiveName' is invalid. The first character must be a lowercase letter");

});

inject(function($compile) {});

});

it('should throw an exception if a directive name has leading or trailing whitespace', function() {

module(function() {

function assertLeadingOrTrailingWhitespaceInDirectiveName(name) {

expect(function() {

directive(name, function() { });

}).toThrowMinErr(

'$compile','baddir', 'Directive name \'' + name + '\' is invalid. ' +

"The name should not contain leading or trailing whitespaces");

}

assertLeadingOrTrailingWhitespaceInDirectiveName(' leadingWhitespaceDirectiveName');

assertLeadingOrTrailingWhitespaceInDirectiveName('trailingWhitespaceDirectiveName ');

assertLeadingOrTrailingWhitespaceInDirectiveName(' leadingAndTrailingWhitespaceDirectiveName ');

});

inject(function($compile) {});

});

});

describe('svg namespace transcludes', function() {

// this method assumes some sort of sized SVG element is being inspected.

function assertIsValidSvgCircle(elem) {

expect(isUnknownElement(elem)).toBe(false);

expect(isSVGElement(elem)).toBe(true);

var box = elem.getBoundingClientRect();

expect(box.width === 0 && box.height === 0).toBe(false);

}

it('should handle transcluded svg elements', inject(function($compile) {

element = jqLite('<div><svg-container>' +

'<circle cx="4" cy="4" r="2"></circle>' +

'</svg-container></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var circle = element.find('circle');

assertIsValidSvgCircle(circle[0]);

}));

it('should handle custom svg elements inside svg tag', inject(function() {

element = jqLite('<div><svg width="300" height="300">' +

'<svg-circle></svg-circle>' +

'</svg></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var circle = element.find('circle');

assertIsValidSvgCircle(circle[0]);

}));

it('should handle transcluded custom svg elements', inject(function() {

element = jqLite('<div><svg-container>' +

'<svg-circle></svg-circle>' +

'</svg-container></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var circle = element.find('circle');

assertIsValidSvgCircle(circle[0]);

}));

if (supportsForeignObject()) {

it('should handle foreignObject', inject(function() {

element = jqLite('<div><svg-container>' +

'<foreignObject width="100" height="100"><div class="test" style="position:absolute;width:20px;height:20px">test</div></foreignObject>' +

'</svg-container></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var testElem = element.find('div');

expect(isHTMLElement(testElem[0])).toBe(true);

var bounds = testElem[0].getBoundingClientRect();

expect(bounds.width === 20 && bounds.height === 20).toBe(true);

}));

it('should handle custom svg containers that transclude to foreignObject that transclude html', inject(function() {

element = jqLite('<div><svg-container>' +

'<my-foreign-object><div class="test" style="width:20px;height:20px">test</div></my-foreign-object>' +

'</svg-container></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var testElem = element.find('div');

expect(isHTMLElement(testElem[0])).toBe(true);

var bounds = testElem[0].getBoundingClientRect();

expect(bounds.width === 20 && bounds.height === 20).toBe(true);

}));

// NOTE: This test may be redundant.

it('should handle custom svg containers that transclude to foreignObject' +

' that transclude to custom svg containers that transclude to custom elements', inject(function() {

element = jqLite('<div><svg-container>' +

'<my-foreign-object><svg-container><svg-circle></svg-circle></svg-container></my-foreign-object>' +

'</svg-container></div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var circle = element.find('circle');

assertIsValidSvgCircle(circle[0]);

}));

}

it('should handle directives with templates that manually add the transclude further down', inject(function() {

element = jqLite('<div><svg-custom-transclude-container>' +

'<circle cx="2" cy="2" r="1"></circle></svg-custom-transclude-container>' +

'</div>');

$compile(element.contents())($rootScope);

document.body.appendChild(element[0]);

var circle = element.find('circle');

assertIsValidSvgCircle(circle[0]);

}));

it('should support directives with SVG templates and a slow url ' +

'that are stamped out later by a transcluding directive', function() {

module(function() {

directive('svgCircleUrl', valueFn({

replace: true,

templateUrl: 'template.html',

templateNamespace: 'SVG'

}));

});

inject(function($compile, $rootScope, $httpBackend) {

$httpBackend.expect('GET', 'template.html').respond('<circle></circle>');

element = $compile('<svg><g ng-repeat="l in list"><svg-circle-url></svg-circle-url></g></svg>')($rootScope);

// initially the template is not yet loaded

$rootScope.$apply(function() {

$rootScope.list = [1];

});

expect(element.find('svg-circle-url').length).toBe(1);

expect(element.find('circle').length).toBe(0);

// template is loaded and replaces the existing nodes

$httpBackend.flush();

expect(element.find('svg-circle-url').length).toBe(0);

expect(element.find('circle').length).toBe(1);

// new entry should immediately use the loaded template

$rootScope.$apply(function() {

$rootScope.list.push(2);

});

expect(element.find('svg-circle-url').length).toBe(0);

expect(element.find('circle').length).toBe(2);

});

});

});

describe('compile phase', function() {

it('should attach scope to the document node when it is compiled explicitly', inject(function($document) {

$compile($document)($rootScope);

expect($document.scope()).toBe($rootScope);

}));

it('should wrap root text nodes in spans', inject(function($compile, $rootScope) {

element = jqLite('<div>A&lt;a&gt;B&lt;/a&gt;C</div>');

var text = element.contents();

expect(text[0].nodeName).toEqual('#text');

text = $compile(text)($rootScope);

expect(text[0].nodeName).toEqual('SPAN');

expect(element.find('span').text()).toEqual('A<a>B</a>C');

}));

it('should not wrap root whitespace text nodes in spans', function() {

element = jqLite(

'<div> <div>A</div>\n ' + // The spaces and newlines here should not get wrapped

'<div>B</div>C\t\n ' + // The "C", tabs and spaces here will be wrapped

'</div>');

$compile(element.contents())($rootScope);

var spans = element.find('span');

expect(spans.length).toEqual(1);

expect(spans.text().indexOf('C')).toEqual(0);

});

it('should not leak memory when there are top level empty text nodes', function() {

// We compile the contents of element (i.e. not element itself)

// Then delete these contents and check the cache has been reset to zero

// First with only elements at the top level

element = jqLite('<div><div></div></div>');

$compile(element.contents())($rootScope);

element.empty();

expect(jqLiteCacheSize()).toEqual(0);

// Next with non-empty text nodes at the top level

// (in this case the compiler will wrap them in a <span>)

element = jqLite('<div>xxx</div>');

$compile(element.contents())($rootScope);

element.empty();

expect(jqLiteCacheSize()).toEqual(0);

// Next with comment nodes at the top level

element = jqLite('<div><!-- comment --></div>');

$compile(element.contents())($rootScope);

element.empty();

expect(jqLiteCacheSize()).toEqual(0);

// Finally with empty text nodes at the top level

element = jqLite('<div> \n<div></div> </div>');

$compile(element.contents())($rootScope);

element.empty();

expect(jqLiteCacheSize()).toEqual(0);

});

it('should not blow up when elements with no childNodes property are compiled', inject(

function($compile, $rootScope) {

// it turns out that when a browser plugin is bound to an DOM element (typically <object>),

// the plugin's context rather than the usual DOM apis are exposed on this element, so

// childNodes might not exist.

element = jqLite('<div>{{1+2}}</div>');

try {

element[0].childNodes[1] = {nodeType: 3, nodeName: 'OBJECT', textContent: 'fake node'};

} catch (e) {

} finally {

if (!element[0].childNodes[1]) return; //browser doesn't support this kind of mocking

}

expect(element[0].childNodes[1].textContent).toBe('fake node');

$compile(element)($rootScope);

$rootScope.$apply();

// object's children can't be compiled in this case, so we expect them to be raw

expect(element.html()).toBe("3");

}));

it('should detect anchor elements with the string "SVG" in the `href` attribute as an anchor', inject(function($compile, $rootScope) {

element = jqLite('<div><a href="/ID_SVG_ID">' +

'<span ng-if="true">Should render</span>' +

'</a></div>');

$compile(element.contents())($rootScope);

$rootScope.$digest();

document.body.appendChild(element[0]);

expect(element.find('span').text()).toContain('Should render');

}));

describe('multiple directives per element', function() {

it('should allow multiple directives per element', inject(function($compile, $rootScope, log) {

element = $compile(

'<span greet="angular" log="L" x-high-log="H" data-medium-log="M"></span>')($rootScope);

expect(element.text()).toEqual('Hello angular');

expect(log).toEqual('L; M; H');

}));

it('should recurse to children', inject(function($compile, $rootScope) {

element = $compile('<div>0<a set="hello">1</a>2<b set="angular">3</b>4</div>')($rootScope);

expect(element.text()).toEqual('0hello2angular4');

}));

it('should allow directives in classes', inject(function($compile, $rootScope, log) {

element = $compile('<div class="greet: angular; log:123;"></div>')($rootScope);

expect(element.html()).toEqual('Hello angular');

expect(log).toEqual('123');

}));

it('should allow directives in SVG element classes', inject(function($compile, $rootScope, log) {

if (!window.SVGElement) return;

element = $compile('<svg><text class="greet: angular; log:123;"></text></svg>')($rootScope);

var text = element.children().eq(0);

// In old Safari, SVG elements don't have innerHTML, so element.html() won't work

// (https://bugs.webkit.org/show_bug.cgi?id=136903)

expect(text.text()).toEqual('Hello angular');

expect(log).toEqual('123');

}));

it('should ignore not set CSS classes on SVG elements', inject(function($compile, $rootScope, log) {

if (!window.SVGElement) return;

// According to spec SVG element className property is readonly, but only FF

// implements it this way which causes compile exceptions.

element = $compile('<svg><text>{{1}}</text></svg>')($rootScope);

$rootScope.$digest();

expect(element.text()).toEqual('1');

}));

it('should receive scope, element, and attributes', function() {

var injector;

module(function() {

directive('log', function($injector, $rootScope) {

injector = $injector;

return {

restrict: 'CA',

compile: function(element, templateAttr) {

expect(typeof templateAttr.$normalize).toBe('function');

expect(typeof templateAttr.$set).toBe('function');

expect(isElement(templateAttr.$$element)).toBeTruthy();

expect(element.text()).toEqual('unlinked');

expect(templateAttr.exp).toEqual('abc');

expect(templateAttr.aa).toEqual('A');

expect(templateAttr.bb).toEqual('B');

expect(templateAttr.cc).toEqual('C');

return function(scope, element, attr) {

expect(element.text()).toEqual('unlinked');

expect(attr).toBe(templateAttr);

expect(scope).toEqual($rootScope);

element.text('worked');

};

}

};

});

});

inject(function($rootScope, $compile, $injector) {

element = $compile(

'<div class="log" exp="abc" aa="A" x-Bb="B" daTa-cC="C">unlinked</div>')($rootScope);

expect(element.text()).toEqual('worked');

expect(injector).toBe($injector); // verify that directive is injectable

});

});

});

describe('error handling', function() {

it('should handle exceptions', function() {

module(function($exceptionHandlerProvider) {

$exceptionHandlerProvider.mode('log');

directive('factoryError', function() { throw 'FactoryError'; });

directive('templateError',

valueFn({ compile: function() { throw 'TemplateError'; } }));

directive('linkingError',

valueFn(function() { throw 'LinkingError'; }));

});

inject(function($rootScope, $compile, $exceptionHandler) {

element = $compile('<div factory-error template-error linking-error></div>')($rootScope);

expect($exceptionHandler.errors[0]).toEqual('FactoryError');

expect($exceptionHandler.errors[1][0]).toEqual('TemplateError');

expect(ie($exceptionHandler.errors[1][1])).

toEqual('<div factory-error linking-error template-error>');

expect($exceptionHandler.errors[2][0]).toEqual('LinkingError');

expect(ie($exceptionHandler.errors[2][1])).

toEqual('<div class="ng-scope" factory-error linking-error template-error>');

// crazy stuff to make IE happy

function ie(text) {

var list = [],

parts, elementName;

parts = lowercase(text).

replace('<', '').

replace('>', '').

split(' ');

elementName = parts.shift();

parts.sort();

parts.unshift(elementName);

forEach(parts, function(value) {

if (value.substring(0,2) !== 'ng') {

value = value.replace('=""', '');

var match = value.match(/=(.*)/);

if (match && match[1].charAt(0) != '"') {

value = value.replace(/=(.*)/, '="$1"');

}

list.push(value);

}

});

return '<' + list.join(' ') + '>';

}

});

});

it('should allow changing the template structure after the current node', function() {

module(function() {

directive('after', valueFn({

compile: function(element) {

element.after('<span log>B</span>');

}

}));

});

inject(function($compile, $rootScope, log) {

element = jqLite("<div><div after>A</div></div>");

$compile(element)($rootScope);

expect(element.text()).toBe('AB');

expect(log).toEqual('LOG');

});

});

it('should allow changing the template structure after the current node inside ngRepeat', function() {

module(function() {

directive('after', valueFn({

compile: function(element) {

element.after('<span log>B</span>');

}

}));

});

inject(function($compile, $rootScope, log) {

element = jqLite('<div><div ng-repeat="i in [1,2]"><div after>A</div></div></div>');

$compile(element)($rootScope);

$rootScope.$digest();

expect(element.text()).toBe('ABAB');

expect(log).toEqual('LOG; LOG');

});

});

it('should allow modifying the DOM structure in post link fn', function() {

module(function() {

directive('removeNode', valueFn({

link: function($scope, $element) {

$element.remove();

}

}));

});

inject(function($compile, $rootScope) {

element = jqLite('<div><div remove-node></div><div>{{test}}</div></div>');

$rootScope.test = 'Hello';

$compile(element)($rootScope);

$rootScope.$digest();

expect(element.children().length).toBe(1);

expect(element.text()).toBe('Hello');

});

});

});

describe('compiler control', function() {

describe('priority', function() {

it('should honor priority', inject(function($compile, $rootScope, log) {

element = $compile(

'<span log="L" x-high-log="H" data-medium-log="M"></span>')($rootScope);

expect(log).toEqual('L; M; H');

}));

});

describe('terminal', function() {

it('should prevent further directives from running', inject(function($rootScope, $compile) {

element = $compile('<div negative-stop><a set="FAIL">OK</a></div>')($rootScope);

expect(element.text()).toEqual('OK');

}

));

it('should prevent further directives from running, but finish current priority level',

inject(function($rootScope, $compile, log) {

// class is processed after attrs, so putting log in class will put it after

// the stop in the current level. This proves that the log runs after stop

element = $compile(

'<div high-log medium-stop log class="medium-log"><a set="FAIL">OK</a></div>')($rootScope);

expect(element.text()).toEqual('OK');

expect(log.toArray().sort()).toEqual(['HIGH', 'MEDIUM']);

})

);

});

describe('restrict', function() {

it('should allow restriction of availability', function() {

module(function() {

forEach({div: 'E', attr: 'A', clazz: 'C', comment: 'M', all: 'EACM'},

function(restrict, name) {

directive(name, function(log) {

return {

restrict: restrict,

compile: valueFn(function(scope, element, attr) {

log(name);

})

};

});

});

});

inject(function($rootScope, $compile, log) {

dealoc($compile('<span div class="div"></span>')($rootScope));

expect(log).toEqual('');

log.reset();

dealoc($compile('<div></div>')($rootScope));

expect(log).toEqual('div');

log.reset();

dealoc($compile('<attr class="attr"></attr>')($rootScope));

expect(log).toEqual('');

log.reset();

dealoc($compile('<span attr></span>')($rootScope));

expect(log).toEqual('attr');

log.reset();

dealoc($compile('<clazz clazz></clazz>')($rootScope));

expect(log).toEqual('');

log.reset();

dealoc($compile('<span class="clazz"></span>')($rootScope));

expect(log).toEqual('clazz');

log.reset();

dealoc($compile('<!-- directive: comment -->')($rootScope));

expect(log).toEqual('comment');

log.reset();

dealoc($compile('<all class="all" all><!-- directive: all --></all>')($rootScope));

expect(log).toEqual('all; all; all; all');

});

});

it('should use EA rule as the default', function() {

module(function() {

directive('defaultDir', function(log) {

return {

compile: function() {

log('defaultDir');

}

};

});

});

inject(function($rootScope, $compile, log) {

dealoc($compile('<span default-dir ></span>')($rootScope));

expect(log).toEqual('defaultDir');

log.reset();

dealoc($compile('<default-dir></default-dir>')($rootScope));

expect(log).toEqual('defaultDir');

log.reset();

dealoc($compile('<span class="default-dir"></span>')($rootScope));

expect(log).toEqual('');

log.reset();

});

});

});

describe('template', function() {

beforeEach(module(function() {

directive('replace', valueFn({

restrict: 'CAM',

replace: true,

template: '<div class="log" style="width: 10px" high-log>Replace!</div>',

compile: function(element, attr) {

attr.$set('compiled', 'COMPILED');

expect(element).toBe(attr.$$element);

}

}));

directive('nomerge', valueFn({

restrict: 'CAM',

replace: true,

template: '<div class="log" id="myid" high-log>No Merge!</div>',

compile: function(element, attr) {

attr.$set('compiled', 'COMPILED');

expect(element).toBe(attr.$$element);

}

}));

directive('append', valueFn({

restrict: 'CAM',

template: '<div class="log" style="width: 10px" high-log>Append!</div>',

compile: function(element, attr) {

attr.$set('compiled', 'COMPILED');

expect(element).toBe(attr.$$element);

}

}));

directive('replaceWithInterpolatedClass', valueFn({

replace: true,

template: '<div class="class_{{1+1}}">Replace with interpolated class!</div>',

compile: function(element, attr) {

attr.$set('compiled', 'COMPILED');

expect(element).toBe(attr.$$element);

}

}));

directive('replaceWithInterpolatedStyle', valueFn({

replace: true,

template: '<div style="width:{{1+1}}px">Replace with interpolated style!</div>',

compile: function(element, attr) {

attr.$set('compiled', 'COMPILED');

expect(element).toBe(attr.$$element);

}

}));

directive('replaceWithTr', valueFn({

replace: true,

template: '<tr><td>TR</td></tr>'

}));

directive('replaceWithTd', valueFn({

replace: true,

template: '<td>TD</td>'

}));

directive('replaceWithTh', valueFn({

replace: true,

template: '<th>TH</th>'

}));

directive('replaceWithThead', valueFn({

replace: true,

template: '<thead><tr><td>TD</td></tr></thead>'

}));

directive('replaceWithTbody', valueFn({

replace: true,

template: '<tbody><tr><td>TD</td></tr></tbody>'

}));

directive('replaceWithTfoot', valueFn({

replace: true,

template: '<tfoot><tr><td>TD</td></tr></tfoot>'

}));

directive('replaceWithOption', valueFn({

replace: true,

template: '<option>OPTION</option>'

}));

directive('replaceWithOptgroup', valueFn({

replace: true,

template: '<optgroup>OPTGROUP</optgroup>'

}));

}));

it('should replace element with template', inject(function($compile, $rootScope) {

element = $compile('<div><div replace>ignore</div><div>')($rootScope);

expect(element.text()).toEqual('Replace!');

expect(element.find('div').attr('compiled')).toEqual('COMPILED');

}));

it('should append element with template', inject(function($compile, $rootScope) {

element = $compile('<div><div append>ignore</div><div>')($rootScope);

expect(element.text()).toEqual('Append!');

expect(element.find('div').attr('compiled')).toEqual('COMPILED');

}));

it('should compile template when replacing', inject(function($compile, $rootScope, log) {

element = $compile('<div><div replace medium-log>ignore</div><div>')($rootScope);

$rootScope.$digest();

expect(element.text()).toEqual('Replace!');

expect(log).toEqual('LOG; HIGH; MEDIUM');

}));

it('should compile template when appending', inject(function($compile, $rootScope, log) {

element = $compile('<div><div append medium-log>ignore</div><div>')($rootScope);

$rootScope.$digest();

expect(element.text()).toEqual('Append!');

expect(log).toEqual('LOG; HIGH; MEDIUM');

}));

it('should merge attributes including style attr', inject(function($compile, $rootScope) {

element = $compile(

'<div><div replace class="medium-log" style="height: 20px" ></div><div>')($rootScope);

var div = element.find('div');

expect(div.hasClass('medium-log')).toBe(true);

expect(div.hasClass('log')).toBe(true);

expect(div.css('width')).toBe('10px');

expect(div.css('height')).toBe('20px');

expect(div.attr('replace')).toEqual('');

expect(div.attr('high-log')).toEqual('');

}));

it('should not merge attributes if they are the same', inject(function($compile, $rootScope) {

element = $compile(

'<div><div nomerge class="medium-log" id="myid"></div><div>')($rootScope);

var div = element.find('div');

expect(div.hasClass('medium-log')).toBe(true);

expect(div.hasClass('log')).toBe(true);

expect(div.attr('id')).toEqual('myid');

}));

it('should correctly merge attributes that contain special characters', inject(function($compile, $rootScope) {

element = $compile(

'<div><div replace (click)="doSomething()" [value]="someExpression" ω="omega"></div><div>')($rootScope);

var div = element.find('div');

expect(div.attr('(click)')).toEqual('doSomething()');

expect(div.attr('[value]')).toEqual('someExpression');

expect(div.attr('ω')).toEqual('omega');

}));

it('should prevent multiple templates per element', inject(function($compile) {

try {

$compile('<div><span replace class="replace"></span></div>');

this.fail(new Error('should have thrown Multiple directives error'));

} catch (e) {

expect(e.message).toMatch(/Multiple directives .* asking for template/);

}

}));

it('should play nice with repeater when replacing', inject(function($compile, $rootScope) {

element = $compile(

'<div>' +

'<div ng-repeat="i in [1,2]" replace></div>' +

'</div>')($rootScope);

$rootScope.$digest();

expect(element.text()).toEqual('Replace!Replace!');

}));

it('should play nice with repeater when appending', inject(function($compile, $rootScope) {

element = $compile(

'<div>' +

'<div ng-repeat="i in [1,2]" append></div>' +

'</div>')($rootScope);

$rootScope.$digest();

expect(element.text()).toEqual('Append!Append!');

}));

it('should handle interpolated css class from replacing directive', inject(

function($compile, $rootScope) {

element = $compile('<div replace-with-interpolated-class></div>')($rootScope);

$rootScope.$digest();

expect(element).toHaveClass('class_2');

}));

if (!msie || msie > 11) {

// style interpolation not working on IE (including IE11).

it('should handle interpolated css style from replacing directive', inject(

function($compile, $rootScope) {

element = $compile('<div replace-with-interpolated-style></div>')($rootScope);

$rootScope.$digest();

expect(element.css('width')).toBe('2px');

}

));

}

it('should merge interpolated css class', inject(function($compile, $rootScope) {

element = $compile('<div class="one {{cls}} three" replace></div>')($rootScope);

$rootScope.$apply(function() {

$rootScope.cls = 'two';

});

expect(element).toHaveClass('one');

expect(element).toHaveClass('two'); // interpolated

expect(element).toHaveClass('three');

expect(element).toHaveClass('log'); // merged from replace directive template

}));

it('should merge interpolated css class with ngRepeat',

inject(function($compile, $rootScope) {

element = $compile(

'<div>' +

'<div ng-repeat="i in [1]" class="one {{cls}} three" replace></div>' +

'</div>')($rootScope);

$rootScope.$apply(function() {

$rootScope.cls = 'two';

});

var child = element.find('div').eq(0);

expect(child).toHaveClass('one');

expect(child).toHaveClass('two'); // interpolated

expect(child).toHaveClass('three');

expect(child).toHaveClass('log'); // merged from replace directive template

}));

it('should interpolate the values once per digest',

inject(function($compile, $rootScope, log) {

element = $compile('<div>{{log("A")}} foo {{::log("B")}}</div>')($rootScope);

$rootScope.log = log;

$rootScope.$digest();

expect(log).toEqual('A; B; A; B');

}));

it('should update references to replaced jQuery context', function() {

module(function($compileProvider) {

$compileProvider.directive('foo', function() {

return {

replace: true,

template: '<div></div>'

};

});

});

inject(function($compile, $rootScope) {

element = jqLite(document.createElement('span')).attr('foo', '');

expect(nodeName_(element)).toBe('span');

var preCompiledNode = element[0];

var linked = $compile(element)($rootScope);

expect(linked).toBe(element);

expect(nodeName_(element)).toBe('div');

if (element.context) {

expect(element.context).toBe(element[0]);

}

});

});