Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / test / unit / Ext / Template.js
1 /*!
2  * Ext JS Library 3.2.0
3  * Copyright(c) 2006-2010 Ext JS, Inc.
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7 Ext.test.session.addTest( 'Ext', {
8
9     name: 'Template',
10
11     planned: 22,
12
13     setUp: function() {
14         this.es = [];
15     },
16
17     tearDown: function() {
18         Ext.each( this.es, function( el ) {
19             if ( el instanceof Ext.Element ) {
20                 el.remove();
21             } else {
22                 Ext.removeNode( el );
23             }
24         });
25         this.es.length = 0;
26     }, 
27
28     // 3
29     test_from: function() {
30         var id = Ext.id();
31         var el = Ext.getBody().createChild({
32             tag: 'textarea',
33             cls: 'x-hidden',
34             id: id,
35             html: '{0} {1}'
36         });
37         this.es.push( el );
38         var tpl1 = Ext.Template.from( el, { complied: true } );
39         var tpl2 = Ext.Template.from( el.dom, { complied: true } );
40         var tpl3 = Ext.Template.from( id, { complied: true } );
41         Y.Assert.areEqual( 'Hello World', tpl1.apply( [ 'Hello', 'World' ] ), 'Test template compiled from textarea value (using Ext.element)' );
42         Y.Assert.areEqual( 'Hello World', tpl2.apply( [ 'Hello', 'World' ] ), 'Test template compiled from textarea value (using Html element)' );
43         Y.Assert.areEqual( 'Hello World', tpl3.apply( [ 'Hello', 'World' ] ), 'Test template compiled from textarea value (using element id)' );
44     },
45
46     // 5
47     test_append: function() {
48         var container = Ext.getBody().createChild({
49             tag: 'div',
50             cls: 'x-hidden'
51         });
52         this.es.push( container );
53         var div = container.createChild({
54             tag: 'div',
55             html: 'foobar'
56         });
57         var tpl = new Ext.Template( '<div>{0} {1}</div>', {
58             compiled: true,
59             disableFormats: true
60         });
61
62         var newel = tpl.append( container, [ 'Hello', 'World' ] );
63         Y.Assert.areEqual( 'Hello World', newel.innerHTML, 'Test if the new element\'s innerHTML matches the template' );
64         Y.Assert.areSame( newel, div.dom.nextSibling, 'Test if nextSibling is the created element' );
65         Y.Assert.areSame( newel, container.dom.lastChild, 'Test if container\'s lastChild is the created element' );
66         Y.Assert.areEqual( 'Hello World', div.dom.nextSibling.innerHTML, 'Test if nextSibling\'s innerHTML is from the template' );
67         Y.Assert.areEqual( 'Hello World', container.dom.lastChild.innerHTML, 'Test if the container\'s firstChild innerHTML is from the template' );
68     },
69
70     // 3
71     test_apply: function() {
72         var tpl1 = new Ext.Template( '{0}{hello} {1}{world}. How are you {2}{name}?', {
73             compiled: true,
74             disableFormats: true
75         });
76         var tpl2 = new Ext.Template( '{hello} {world}. How are you {name:ellipsis(8)}?', {
77             compiled: true
78         });
79         Y.Assert.areEqual( 'Hello World. How are you TestyMcTester?', tpl1.apply( [ 'Hello', 'World', 'TestyMcTester' ] ), 'Test apply with an array, no formats' );
80         Y.Assert.areEqual( 'Hello World. How are you TestyMcTester?', tpl1.apply( { hello: 'Hello', world: 'World', name: 'TestyMcTester' } ), 'Test apply with an object, no formats' );
81         Y.Assert.areEqual( 'Hello World. How are you Testy...?', tpl2.apply( { hello: 'Hello', world: 'World', name: 'TestyMcTester' } ), 'Test apply with an object, with formats' );
82     },
83
84     // apply is an alias for applyTemplate
85
86     // 3
87     test_insertAfter: function() {
88         var container = Ext.getBody().createChild({
89             tag: 'div',
90             cls: 'x-hidden'
91         });
92         this.es.push( container );
93         var div = container.createChild({
94             tag: 'div',
95             html: 'foobar'
96         });
97         var tpl = new Ext.Template( '<div>{0} {1}</div>', {
98             compiled: true,
99             disableFormats: true
100         });
101
102         var newel = tpl.insertAfter( div, [ 'Hello', 'World' ] );
103         Y.Assert.areEqual( 'Hello World', newel.innerHTML, 'Test if the new element\'s innerHTML matches the template' );
104         Y.Assert.areSame( newel, div.dom.nextSibling, 'Test if nextSibling is the created element' );
105         Y.Assert.areEqual( 'Hello World', div.dom.nextSibling.innerHTML, 'Test if nextSibling\'s innerHTML is from the template' );
106     },
107     
108     // 3
109     test_insertBefore: function() {
110         var container = Ext.getBody().createChild({
111             tag: 'div',
112             cls: 'x-hidden'
113         });
114         this.es.push( container );
115         var div = container.createChild({
116             tag: 'div',
117             html: 'foobar'
118         });
119         var tpl = new Ext.Template( '<div>{0} {1}</div>', {
120             compiled: true,
121             disableFormats: true
122         });
123
124         var newel = tpl.insertBefore( div, [ 'Hello', 'World' ] );
125         Y.Assert.areEqual( 'Hello World', newel.innerHTML, 'Test if the new element\'s innerHTML matches the template' );
126         Y.Assert.areSame( newel, container.dom.firstChild, 'Test if the container\'s firstChild is the created element' );
127         Y.Assert.areEqual( 'Hello World', container.dom.firstChild.innerHTML, 'Test if the container\s firstChild innerHTML is from the template' );
128     },
129     
130     // 3
131     test_insertFirst: function() {
132         var container = Ext.getBody().createChild({
133             tag: 'div',
134             cls: 'x-hidden'
135         });
136         this.es.push( container );
137         container.createChild({
138             tag: 'div',
139             html: 'foobar'
140         });
141         var tpl = new Ext.Template( '<div>{0} {1}</div>', {
142             compiled: true,
143             disableFormats: true
144         });
145
146         var newel = tpl.insertFirst( container, [ 'Hello', 'World' ] );
147         Y.Assert.areEqual( 'Hello World', newel.innerHTML, 'Test if the new element\'s innerHTML matches the template' );
148         Y.Assert.areSame( newel, container.dom.firstChild, 'Test if the container\'s firstChild is the created element' );
149         Y.Assert.areEqual( 'Hello World', container.dom.firstChild.innerHTML, 'Test if the container\s firstChild innerHTML is from the template' );
150     },
151
152     // 1
153     test_overwrite: function() {
154         var container = Ext.getBody().createChild({
155             tag: 'div',
156             cls: 'x-hidden'
157         });
158         this.es.push( container );
159         container.createChild({
160             tag: 'div',
161             html: 'foobar'
162         });
163         var tpl = new Ext.Template( '{0} {1}', {
164             compiled: true,
165             disableFormats: true
166         });
167
168         var newel = tpl.overwrite( container, [ 'Hello', 'World' ] );
169         Y.Assert.areEqual( 'Hello World', container.dom.innerHTML, 'Test if the container innerHTML matches the template' );
170     },
171
172     // 1
173     test_set: function() {
174         var foo = new Ext.Template( '{1}{0}' );
175         foo.set( '{0}{1}', true );
176         Y.Assert.areEqual( 'foobar', foo.apply( [ 'foo', 'bar' ] ), 'Test recompiled template using set' );
177     }
178
179 });