1 | /*! |
---|
2 | * Ext JS Library 3.4.0 |
---|
3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
4 | * licensing@sencha.com |
---|
5 | * http://www.sencha.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 | }); |
---|