From aa2133ad818d2e5c27cbd3933061797096356c8a Mon Sep 17 00:00:00 2001
From: Matias Niemelàˆ
Date: Sat, 6 Jul 2013 00:48:54 -0400
Subject: fix(ngInclude): $animate refactoring + use transclusion
BREAKING CHANGE: previously ngInclude only updated its content, after this change
ngInclude will recreate itself every time a new content is included. This ensures
that a single rootElement for all the included contents always exists, which makes
definition of css styles for animations much easier.
---
test/ng/directive/ngIncludeSpec.js | 81 ++++++++++++++++++++++++++------------
1 file changed, 55 insertions(+), 26 deletions(-)
(limited to 'test/ng/directive')
diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js
index 286ee5af..c55fb0b3 100644
--- a/test/ng/directive/ngIncludeSpec.js
+++ b/test/ng/directive/ngIncludeSpec.js
@@ -17,7 +17,7 @@ describe('ngInclude', function() {
it('should trust and use literal urls', inject(function(
$rootScope, $httpBackend, $compile) {
- element = $compile('')($rootScope);
+ element = $compile('')($rootScope);
$httpBackend.expect('GET', 'url').respond('template text');
$rootScope.$digest();
$httpBackend.flush();
@@ -27,7 +27,7 @@ describe('ngInclude', function() {
it('should trust and use trusted urls', inject(function($rootScope, $httpBackend, $compile, $sce) {
- element = $compile('')($rootScope);
+ element = $compile('')($rootScope);
$httpBackend.expect('GET', 'http://foo.bar/url').respond('template text');
$rootScope.fooUrl = $sce.trustAsResourceUrl('http://foo.bar/url');
$rootScope.$digest();
@@ -39,20 +39,21 @@ describe('ngInclude', function() {
it('should include an external file', inject(putIntoCache('myUrl', '{{name}}'),
function($rootScope, $compile) {
- element = jqLite('');
- jqLite(document.body).append(element);
+ element = jqLite('
');
+ var body = jqLite(document.body);
+ body.append(element);
element = $compile(element)($rootScope);
$rootScope.name = 'misko';
$rootScope.url = 'myUrl';
$rootScope.$digest();
- expect(element.text()).toEqual('misko');
- jqLite(document.body).html('');
+ expect(body.text()).toEqual('misko');
+ body.html('');
}));
it('should support ng-include="src" syntax', inject(putIntoCache('myUrl', '{{name}}'),
function($rootScope, $compile) {
- element = jqLite('');
+ element = jqLite('');
jqLite(document.body).append(element);
element = $compile(element)($rootScope);
$rootScope.name = 'Alibaba';
@@ -89,7 +90,7 @@ describe('ngInclude', function() {
it('should remove previously included text if a falsy value is bound to src', inject(
putIntoCache('myUrl', '{{name}}'),
function($rootScope, $compile) {
- element = jqLite('');
+ element = jqLite('
');
element = $compile(element)($rootScope);
$rootScope.name = 'igor';
$rootScope.url = 'myUrl';
@@ -112,7 +113,7 @@ describe('ngInclude', function() {
$httpBackend.whenGET('url').respond('my partial');
$rootScope.$on('$includeContentRequested', contentRequestedSpy);
- element = $compile('')($rootScope);
+ element = $compile('')($rootScope);
$rootScope.$digest();
expect(contentRequestedSpy).toHaveBeenCalledOnce();
@@ -130,7 +131,7 @@ describe('ngInclude', function() {
$templateCache.put('url', [200, 'partial content', {}]);
$rootScope.$on('$includeContentLoaded', contentLoadedSpy);
- element = $compile('')($rootScope);
+ element = $compile('')($rootScope);
$rootScope.$digest();
expect(contentLoadedSpy).toHaveBeenCalledOnce();
@@ -140,7 +141,7 @@ describe('ngInclude', function() {
it('should evaluate onload expression when a partial is loaded', inject(
putIntoCache('myUrl', 'my partial'),
function($rootScope, $compile) {
- element = jqLite('');
+ element = jqLite('');
element = $compile(element)($rootScope);
expect($rootScope.loaded).not.toBeDefined();
@@ -158,7 +159,7 @@ describe('ngInclude', function() {
$httpBackend.whenGET('url1').respond('partial {{$parent.url}}');
$httpBackend.whenGET('url2').respond(404);
- element = $compile('')($rootScope);
+ element = $compile('
')($rootScope);
expect(element.children().scope()).toBeFalsy();
$rootScope.url = 'url1';
@@ -185,7 +186,7 @@ describe('ngInclude', function() {
it('should do xhr request and cache it',
inject(function($rootScope, $httpBackend, $compile) {
- element = $compile('')($rootScope);
+ element = $compile('
')($rootScope);
$httpBackend.expect('GET', 'myUrl').respond('my partial');
$rootScope.url = 'myUrl';
@@ -206,7 +207,7 @@ describe('ngInclude', function() {
it('should clear content when error during xhr request',
inject(function($httpBackend, $compile, $rootScope) {
- element = $compile('content')($rootScope);
+ element = $compile('content
')($rootScope);
$httpBackend.expect('GET', 'myUrl').respond(404, '');
$rootScope.url = 'myUrl';
@@ -220,7 +221,7 @@ describe('ngInclude', function() {
it('should be async even if served from cache', inject(
putIntoCache('myUrl', 'my partial'),
function($rootScope, $compile) {
- element = $compile('')($rootScope);
+ element = $compile('
')($rootScope);
$rootScope.url = 'myUrl';
@@ -237,7 +238,7 @@ describe('ngInclude', function() {
it('should discard pending xhr callbacks if a new template is requested before the current ' +
'finished loading', inject(function($rootScope, $compile, $httpBackend) {
- element = jqLite("");
+ element = jqLite("
");
var log = {};
$rootScope.templateUrl = 'myUrl1';
@@ -273,6 +274,10 @@ describe('ngInclude', function() {
$rootScope.tpl = 'tpl.html';
});
expect(onload).toHaveBeenCalledOnce();
+
+ $rootScope.tpl = '';
+ $rootScope.$digest();
+ dealoc(element);
}));
@@ -308,14 +313,14 @@ describe('ngInclude', function() {
it('should call $anchorScroll if autoscroll attribute is present', inject(
- compileAndLink(''),
+ compileAndLink('
'),
changeTplAndValueTo('template.html'), function() {
expect(autoScrollSpy).toHaveBeenCalledOnce();
}));
it('should call $anchorScroll if autoscroll evaluates to true', inject(
- compileAndLink(''),
+ compileAndLink('
'),
changeTplAndValueTo('template.html', true),
changeTplAndValueTo('another.html', 'some-string'),
changeTplAndValueTo('template.html', 100), function() {
@@ -325,14 +330,14 @@ describe('ngInclude', function() {
it('should not call $anchorScroll if autoscroll attribute is not present', inject(
- compileAndLink(''),
+ compileAndLink('
'),
changeTplAndValueTo('template.html'), function() {
expect(autoScrollSpy).not.toHaveBeenCalled();
}));
it('should not call $anchorScroll if autoscroll evaluates to false', inject(
- compileAndLink(''),
+ compileAndLink('
'),
changeTplAndValueTo('template.html', false),
changeTplAndValueTo('template.html', undefined),
changeTplAndValueTo('template.html', null), function() {
@@ -377,13 +382,12 @@ describe('ngInclude animations', function() {
$templateCache.put('enter', [200, 'data
', {}]);
$rootScope.tpl = 'enter';
element = $compile(html(
- ''
))($rootScope);
$rootScope.$digest();
- item = $animate.process('leave').element;
item = $animate.process('enter').element;
expect(item.text()).toBe('data');
}));
@@ -394,13 +398,12 @@ describe('ngInclude animations', function() {
$templateCache.put('enter', [200, 'data
', {}]);
$rootScope.tpl = 'enter';
element = $compile(html(
- ''
))($rootScope);
$rootScope.$digest();
- item = $animate.process('leave').element;
item = $animate.process('enter').element;
expect(item.text()).toBe('data');
@@ -411,4 +414,30 @@ describe('ngInclude animations', function() {
expect(item.text()).toBe('data');
}));
+ it('should animate two separate ngInclude elements',
+ inject(function($compile, $rootScope, $templateCache, $animate) {
+ var item;
+ $templateCache.put('one', [200, 'one', {}]);
+ $templateCache.put('two', [200, 'two', {}]);
+ $rootScope.tpl = 'one';
+ element = $compile(html(
+ ''
+ ))($rootScope);
+ $rootScope.$digest();
+
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('one');
+
+ $rootScope.tpl = 'two';
+ $rootScope.$digest();
+
+ var itemA = $animate.process('leave').element;
+ var itemB = $animate.process('enter').element;
+ expect(itemA.attr('ng-include')).toBe('tpl');
+ expect(itemB.attr('ng-include')).toBe('tpl');
+ expect(itemA).not.toEqual(itemB);
+ }));
+
});
--
cgit v1.2.3