Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 768a191

Browse files
petebacondarwinpetebacondarwin
committed
test(compile): check transclusion/scopes work with multi-element directives
1 parent 462dbb2 commit 768a191

File tree

1 file changed

+180
-8
lines changed

1 file changed

+180
-8
lines changed

‎test/ng/compileSpec.js

Lines changed: 180 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
'use strict';
22

3+
4+
function calcCacheSize() {
5+
var size = 0;
6+
for(var key in jqLite.cache) { size++; }
7+
return size;
8+
}
9+
10+
311
describe('$compile', function() {
412
var element, directive, $compile, $rootScope;
513

@@ -158,12 +166,6 @@ describe('$compile', function() {
158166
});
159167

160168
it('should not leak memory when there are top level empty text nodes', function() {
161-
var calcCacheSize = function() {
162-
var size = 0;
163-
forEach(jqLite.cache, function(item, key) { size++; });
164-
return size;
165-
};
166-
167169
// We compile the contents of element (i.e. not element itself)
168170
// Then delete these contents and check the cache has been reset to zero
169171

@@ -5469,7 +5471,7 @@ describe('$compile', function() {
54695471
}));
54705472

54715473

5472-
it('should group on nested groups of same directive', inject(function($compile, $rootScope) {
5474+
it('should group on nested groups', inject(function($compile, $rootScope) {
54735475
$rootScope.show = false;
54745476
element = $compile(
54755477
'<div></div>' +
@@ -5484,7 +5486,7 @@ describe('$compile', function() {
54845486
}));
54855487

54865488

5487-
it('should group on nested groups', inject(function($compile, $rootScope) {
5489+
it('should group on nested groups of same directive', inject(function($compile, $rootScope) {
54885490
$rootScope.show = false;
54895491
element = $compile(
54905492
'<div></div>' +
@@ -5499,6 +5501,176 @@ describe('$compile', function() {
54995501
}));
55005502

55015503

5504+
it('should set up and destroy the transclusion scopes correctly',
5505+
inject(function($compile, $rootScope) {
5506+
element = $compile(
5507+
'<div>' +
5508+
'<div ng-if-start="val0"><span ng-if="val1"></span></div>' +
5509+
'<div ng-if-end><span ng-if="val2"></span></div>' +
5510+
'</div>'
5511+
)($rootScope);
5512+
$rootScope.$apply('val0 = true; val1 = true; val2 = true');
5513+
5514+
// At this point we should have something like:
5515+
//
5516+
// <div class="ng-scope">
5517+
//
5518+
// <!-- ngIf: val0 -->
5519+
//
5520+
// <div ng-if-start="val0" class="ng-scope">
5521+
// <!-- ngIf: val1 -->
5522+
// <span ng-if="val1" class="ng-scope"></span>
5523+
// <!-- end ngIf: val1 -->
5524+
// </div>
5525+
//
5526+
// <div ng-if-end="" class="ng-scope">
5527+
// <!-- ngIf: val2 -->
5528+
// <span ng-if="val2" class="ng-scope"></span>
5529+
// <!-- end ngIf: val2 -->
5530+
// </div>
5531+
//
5532+
// <!-- end ngIf: val0 -->
5533+
// </div>
5534+
var ngIfStartScope = element.find('div').eq(0).scope();
5535+
var ngIfEndScope = element.find('div').eq(1).scope();
5536+
5537+
expect(ngIfStartScope.$id).toEqual(ngIfEndScope.$id);
5538+
5539+
var ngIf1Scope = element.find('span').eq(0).scope();
5540+
var ngIf2Scope = element.find('span').eq(1).scope();
5541+
5542+
expect(ngIf1Scope.$id).not.toEqual(ngIf2Scope.$id);
5543+
expect(ngIf1Scope.$parent.$id).toEqual(ngIf2Scope.$parent.$id);
5544+
5545+
$rootScope.$apply('val1 = false');
5546+
5547+
// Now we should have something like:
5548+
//
5549+
// <div class="ng-scope">
5550+
// <!-- ngIf: val0 -->
5551+
// <div ng-if-start="val0" class="ng-scope">
5552+
// <!-- ngIf: val1 -->
5553+
// </div>
5554+
// <div ng-if-end="" class="ng-scope">
5555+
// <!-- ngIf: val2 -->
5556+
// <span ng-if="val2" class="ng-scope"></span>
5557+
// <!-- end ngIf: val2 -->
5558+
// </div>
5559+
// <!-- end ngIf: val0 -->
5560+
// </div>
5561+
5562+
expect(ngIfStartScope.$$destroyed).not.toEqual(true);
5563+
expect(ngIf1Scope.$$destroyed).toEqual(true);
5564+
expect(ngIf2Scope.$$destroyed).not.toEqual(true);
5565+
5566+
$rootScope.$apply('val0 = false');
5567+
5568+
// Now we should have something like:
5569+
//
5570+
// <div class="ng-scope">
5571+
// <!-- ngIf: val0 -->
5572+
// </div>
5573+
5574+
expect(ngIfStartScope.$$destroyed).toEqual(true);
5575+
expect(ngIf1Scope.$$destroyed).toEqual(true);
5576+
expect(ngIf2Scope.$$destroyed).toEqual(true);
5577+
}));
5578+
5579+
5580+
it('should set up and destroy the transclusion scopes correctly',
5581+
inject(function($compile, $rootScope) {
5582+
element = $compile(
5583+
'<div>' +
5584+
'<div ng-repeat-start="val in val0" ng-if="val1"></div>' +
5585+
'<div ng-repeat-end ng-if="val2"></div>' +
5586+
'</div>'
5587+
)($rootScope);
5588+
5589+
// To begin with there is (almost) nothing:
5590+
// <div class="ng-scope">
5591+
// <!-- ngRepeat: val in val0 -->
5592+
// </div>
5593+
5594+
expect(element.scope().$id).toEqual($rootScope.$id);
5595+
5596+
// Now we create all the elements
5597+
$rootScope.$apply('val0 = [1]; val1 = true; val2 = true');
5598+
5599+
// At this point we have:
5600+
//
5601+
// <div class="ng-scope">
5602+
//
5603+
// <!-- ngRepeat: val in val0 -->
5604+
// <!-- ngIf: val1 -->
5605+
// <div ng-repeat-start="val in val0" class="ng-scope">
5606+
// </div>
5607+
// <!-- end ngIf: val1 -->
5608+
//
5609+
// <!-- ngIf: val2 -->
5610+
// <div ng-repeat-end="" class="ng-scope">
5611+
// </div>
5612+
// <!-- end ngIf: val2 -->
5613+
// <!-- end ngRepeat: val in val0 -->
5614+
// </div>
5615+
var ngIf1Scope = element.find('div').eq(0).scope();
5616+
var ngIf2Scope = element.find('div').eq(1).scope();
5617+
var ngRepeatScope = ngIf1Scope.$parent;
5618+
5619+
expect(ngIf1Scope.$id).not.toEqual(ngIf2Scope.$id);
5620+
expect(ngIf1Scope.$parent.$id).toEqual(ngRepeatScope.$id);
5621+
expect(ngIf2Scope.$parent.$id).toEqual(ngRepeatScope.$id);
5622+
5623+
// What is happening here??
5624+
// We seem to have a repeater scope which doesn't actually match to any element
5625+
expect(ngRepeatScope.$parent.$id).toEqual($rootScope.$id);
5626+
5627+
5628+
// Now remove the first ngIf element from the first item in the repeater
5629+
$rootScope.$apply('val1 = false');
5630+
5631+
// At this point we should have:
5632+
//
5633+
// <div class="ng-scope">
5634+
// <!-- ngRepeat: val in val0 -->
5635+
//
5636+
// <!-- ngIf: val1 -->
5637+
//
5638+
// <!-- ngIf: val2 -->
5639+
// <div ng-repeat-end="" ng-if="val2" class="ng-scope"></div>
5640+
// <!-- end ngIf: val2 -->
5641+
//
5642+
// <!-- end ngRepeat: val in val0 -->
5643+
// </div>
5644+
//
5645+
expect(ngRepeatScope.$$destroyed).toEqual(false);
5646+
expect(ngIf1Scope.$$destroyed).toEqual(true);
5647+
expect(ngIf2Scope.$$destroyed).toEqual(false);
5648+
5649+
// Now remove the second ngIf element from the first item in the repeater
5650+
$rootScope.$apply('val2 = false');
5651+
5652+
// We are mostly back to where we started
5653+
//
5654+
// <div class="ng-scope">
5655+
// <!-- ngRepeat: val in val0 -->
5656+
// <!-- ngIf: val1 -->
5657+
// <!-- ngIf: val2 -->
5658+
// <!-- end ngRepeat: val in val0 -->
5659+
// </div>
5660+
5661+
expect(ngRepeatScope.$$destroyed).toEqual(false);
5662+
expect(ngIf1Scope.$$destroyed).toEqual(true);
5663+
expect(ngIf2Scope.$$destroyed).toEqual(true);
5664+
5665+
// Finally remove the repeat items
5666+
$rootScope.$apply('val0 = []');
5667+
5668+
// Somehow this ngRepeat scope knows how to destroy itself...
5669+
expect(ngRepeatScope.$$destroyed).toEqual(true);
5670+
expect(ngIf1Scope.$$destroyed).toEqual(true);
5671+
expect(ngIf2Scope.$$destroyed).toEqual(true);
5672+
}));
5673+
55025674
it('should throw error if unterminated', function () {
55035675
module(function($compileProvider) {
55045676
$compileProvider.directive('foo', function() {

0 commit comments

Comments
 (0)