8
0

template.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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 document, HTMLElement */
  7. 'use strict';
  8. var modules = bender.amd.require( 'ckeditor', 'ui/view', 'ui/template' );
  9. describe( 'Template', function() {
  10. var View;
  11. var Template;
  12. beforeEach( 'Create a test view instance', function() {
  13. View = modules[ 'ui/view' ];
  14. Template = modules[ 'ui/template' ];
  15. } );
  16. it( 'accepts the definition', function() {
  17. var def = {
  18. tag: 'p'
  19. };
  20. expect( new Template( def ).def ).to.equal( def );
  21. } );
  22. it( 'renders the element', function() {
  23. var el = new Template( {
  24. tag: 'p',
  25. attributes: {
  26. 'class': [ 'a', 'b' ],
  27. x: 'bar'
  28. },
  29. text: 'foo'
  30. } ).render();
  31. expect( el ).to.be.instanceof( HTMLElement );
  32. expect( el.parentNode ).to.be.null();
  33. expect( getOuterHtml( el ) ).to.be.equal( '<p class="a b" x="bar">foo</p>' );
  34. } );
  35. it( 'renders element\'s children', function() {
  36. var el = new Template( {
  37. tag: 'p',
  38. attributes: {
  39. a: 'A'
  40. },
  41. children: [
  42. {
  43. tag: 'b',
  44. text: 'B'
  45. },
  46. {
  47. tag: 'i',
  48. text: 'C',
  49. children: [
  50. {
  51. tag: 'b',
  52. text: 'D'
  53. }
  54. ]
  55. }
  56. ]
  57. } ).render();
  58. expect( getOuterHtml( el ) ).to.be.equal( '<p a="A"><b>B</b><i>C<b>D</b></i></p>' );
  59. } );
  60. it( 'binds to the model', function() {
  61. var view = new View( {
  62. foo: 'bar'
  63. } );
  64. var el = new Template( {
  65. tag: 'p',
  66. attributes: {
  67. 'class': view.bind( 'foo' )
  68. },
  69. text: view.bind( 'foo' )
  70. } ).render();
  71. expect( getOuterHtml( el ) ).to.be.equal( '<p class="bar">bar</p>' );
  72. view.model.foo = 'baz';
  73. expect( getOuterHtml( el ) ).to.be.equal( '<p class="baz">baz</p>' );
  74. } );
  75. it( 'binds to the model and processes the property', function() {
  76. var view = new View( {
  77. foo: 7
  78. } );
  79. var callback = ( el, value ) => ( value > 0 ? 'positive' : 'negative' );
  80. var el = new Template( {
  81. tag: 'p',
  82. attributes: {
  83. 'class': view.bind( 'foo', callback )
  84. },
  85. text: view.bind( 'foo', callback )
  86. } ).render();
  87. expect( getOuterHtml( el ) ).to.be.equal( '<p class="positive">positive</p>' );
  88. view.model.foo = -7;
  89. expect( getOuterHtml( el ) ).to.be.equal( '<p class="negative">negative</p>' );
  90. } );
  91. it( 'binds to the model and executes custom action', function() {
  92. var view = new View( {
  93. foo: 'moo'
  94. } );
  95. var callback = ( el, value ) => {
  96. el.innerHTML = value;
  97. if ( value == 'changed' ) {
  98. return value;
  99. }
  100. };
  101. var el = new Template( {
  102. tag: 'p',
  103. attributes: {
  104. 'class': view.bind( 'foo', callback )
  105. },
  106. text: 'bar'
  107. } ).render();
  108. expect( getOuterHtml( el ) ).to.be.equal( '<p>moo</p>' );
  109. view.model.foo = 'changed';
  110. expect( getOuterHtml( el ) ).to.be.equal( '<p class="changed">changed</p>' );
  111. } );
  112. it( 'binds to the model and updates element\'s text', function() {
  113. var view = new View( {
  114. foo: 'bar'
  115. } );
  116. var el = new Template( {
  117. tag: 'p',
  118. children: [
  119. {
  120. tag: 'b',
  121. text: 'baz'
  122. }
  123. ],
  124. text: view.bind( 'foo' )
  125. } ).render();
  126. expect( getOuterHtml( el ) ).to.be.equal( '<p>bar<b>baz</b></p>' );
  127. // TODO: A solution to avoid nuking the children?
  128. view.model.foo = 'qux';
  129. expect( getOuterHtml( el ) ).to.be.equal( '<p>qux</p>' );
  130. } );
  131. } );
  132. function getOuterHtml( el ) {
  133. var container = document.createElement( 'div' );
  134. container.appendChild( el.cloneNode( 1 ) );
  135. return container.innerHTML;
  136. }