template.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: core, ui */
  6. /* global HTMLElement */
  7. 'use strict';
  8. var modules = bender.amd.require( 'ckeditor', 'ui/view', 'ui/template' );
  9. var Template;
  10. bender.tools.createSinonSandbox();
  11. beforeEach( createClassReferences );
  12. describe( 'constructor', function() {
  13. it( 'accepts the definition', function() {
  14. var def = {
  15. tag: 'p'
  16. };
  17. expect( new Template( def ).def ).to.equal( def );
  18. } );
  19. } );
  20. describe( 'render', function() {
  21. it( 'creates an element', function() {
  22. var el = new Template( {
  23. tag: 'p',
  24. attributes: {
  25. 'class': [ 'a', 'b' ],
  26. x: 'bar'
  27. },
  28. text: 'foo'
  29. } ).render();
  30. expect( el ).to.be.instanceof( HTMLElement );
  31. expect( el.parentNode ).to.be.null();
  32. expect( el.outerHTML ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  33. } );
  34. it( 'creates element\'s children', function() {
  35. var el = new Template( {
  36. tag: 'p',
  37. attributes: {
  38. a: 'A'
  39. },
  40. children: [
  41. {
  42. tag: 'b',
  43. text: 'B'
  44. },
  45. {
  46. tag: 'i',
  47. text: 'C',
  48. children: [
  49. {
  50. tag: 'b',
  51. text: 'D'
  52. }
  53. ]
  54. }
  55. ]
  56. } ).render();
  57. expect( el.outerHTML ).to.be.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  58. } );
  59. } );
  60. describe( 'callback value', function() {
  61. it( 'works for attributes', function() {
  62. var spy1 = bender.sinon.spy();
  63. var spy2 = bender.sinon.spy();
  64. var el = new Template( {
  65. tag: 'p',
  66. attributes: {
  67. 'class': spy1
  68. },
  69. children: [
  70. {
  71. tag: 'span',
  72. attributes: {
  73. id: spy2
  74. }
  75. }
  76. ]
  77. } ).render();
  78. sinon.assert.calledWithExactly( spy1, el, sinon.match.func );
  79. sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func );
  80. spy1.firstCall.args[ 1 ]( el, 'foo' );
  81. spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' );
  82. expect( el.outerHTML ).to.be.equal( '<p class="foo"><span id="bar"></span></p>' );
  83. } );
  84. it( 'works for "text" property', function() {
  85. var spy1 = bender.sinon.spy();
  86. var spy2 = bender.sinon.spy();
  87. var el = new Template( {
  88. tag: 'p',
  89. text: spy1,
  90. children: [
  91. {
  92. tag: 'span',
  93. text: spy2
  94. }
  95. ]
  96. } ).render();
  97. sinon.assert.calledWithExactly( spy1, el, sinon.match.func );
  98. sinon.assert.calledWithExactly( spy2, el.firstChild, sinon.match.func );
  99. spy2.firstCall.args[ 1 ]( el.firstChild, 'bar' );
  100. expect( el.outerHTML ).to.be.equal( '<p><span>bar</span></p>' );
  101. spy1.firstCall.args[ 1 ]( el, 'foo' );
  102. expect( el.outerHTML ).to.be.equal( '<p>foo</p>' );
  103. } );
  104. it( 'works for "on" property', function() {
  105. var spy1 = bender.sinon.spy();
  106. var spy2 = bender.sinon.spy();
  107. var spy3 = bender.sinon.spy();
  108. var spy4 = bender.sinon.spy();
  109. var el = new Template( {
  110. tag: 'p',
  111. children: [
  112. {
  113. tag: 'span',
  114. on: {
  115. bar: spy2
  116. }
  117. }
  118. ],
  119. on: {
  120. foo: spy1,
  121. baz: [ spy3, spy4 ]
  122. }
  123. } ).render();
  124. sinon.assert.calledWithExactly( spy1, el, 'foo', null );
  125. sinon.assert.calledWithExactly( spy2, el.firstChild, 'bar', null );
  126. sinon.assert.calledWithExactly( spy3, el, 'baz', null );
  127. sinon.assert.calledWithExactly( spy4, el, 'baz', null );
  128. } );
  129. it( 'works for "on" property with selectors', function() {
  130. var spy1 = bender.sinon.spy();
  131. var spy2 = bender.sinon.spy();
  132. var spy3 = bender.sinon.spy();
  133. var spy4 = bender.sinon.spy();
  134. var el = new Template( {
  135. tag: 'p',
  136. children: [
  137. {
  138. tag: 'span',
  139. attributes: {
  140. 'id': 'x'
  141. }
  142. },
  143. {
  144. tag: 'span',
  145. attributes: {
  146. 'class': 'y'
  147. },
  148. on: {
  149. 'bar@p': spy2
  150. }
  151. },
  152. ],
  153. on: {
  154. 'foo@span': spy1,
  155. 'baz@.y': [ spy3, spy4 ]
  156. }
  157. } ).render();
  158. sinon.assert.calledWithExactly( spy1, el, 'foo', 'span' );
  159. sinon.assert.calledWithExactly( spy2, el.lastChild, 'bar', 'p' );
  160. sinon.assert.calledWithExactly( spy3, el, 'baz', '.y' );
  161. sinon.assert.calledWithExactly( spy4, el, 'baz', '.y' );
  162. } );
  163. } );
  164. function createClassReferences() {
  165. Template = modules[ 'ui/template' ];
  166. }