test/unit/Ext/Template.js

   1 /*!
   2  * Ext JS Library 3.2.2
   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 });