renderer.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* bender-tags: treeview */
  6. 'use strict';
  7. import Renderer from '/ckeditor5/engine/treeview/renderer.js';
  8. import ViewElement from '/ckeditor5/engine/treeview/element.js';
  9. import ViewText from '/ckeditor5/engine/treeview/text.js';
  10. import DomConverter from '/ckeditor5/engine/treeview/domconverter.js';
  11. import CKEditorError from '/ckeditor5/utils/ckeditorerror.js';
  12. describe( 'Renderer', () => {
  13. let domConverter, renderer;
  14. before( () => {
  15. domConverter = new DomConverter();
  16. renderer = new Renderer( domConverter );
  17. } );
  18. describe( 'markToSync', () => {
  19. let viewNode;
  20. beforeEach( () => {
  21. viewNode = new ViewElement( 'p' );
  22. const domNode = document.createElement( 'p' );
  23. domConverter.bindElements( domNode, viewNode );
  24. viewNode.appendChildren( new ViewText( 'foo' ) );
  25. renderer.markedTexts.clear();
  26. renderer.markedAttributes.clear();
  27. renderer.markedChildren.clear();
  28. } );
  29. it( 'should mark attributes which need update', () => {
  30. viewNode.setAttribute( 'class', 'foo' );
  31. renderer.markToSync( 'ATTRIBUTES', viewNode );
  32. expect( renderer.markedAttributes.has( viewNode ) ).to.be.true;
  33. } );
  34. it( 'should mark children which need update', () => {
  35. viewNode.appendChildren( new ViewText( 'foo' ) );
  36. renderer.markToSync( 'CHILDREN', viewNode );
  37. expect( renderer.markedChildren.has( viewNode ) ).to.be.true;
  38. } );
  39. it( 'should not mark children if element has no corresponding node', () => {
  40. // Overwrite viewNode with node without coresponding DOM node.
  41. viewNode = new ViewElement( 'p' );
  42. viewNode.appendChildren( new ViewText( 'foo' ) );
  43. renderer.markToSync( 'CHILDREN', viewNode );
  44. expect( renderer.markedTexts.has( viewNode ) ).to.be.false;
  45. } );
  46. it( 'should mark text which need update', () => {
  47. const viewText = new ViewText( 'foo' );
  48. viewNode.appendChildren( viewText );
  49. viewText.data = 'bar';
  50. renderer.markToSync( 'TEXT', viewText );
  51. expect( renderer.markedTexts.has( viewText ) ).to.be.true;
  52. } );
  53. it( 'should not mark text if parent has no corresponding node', () => {
  54. const viewText = new ViewText( 'foo' );
  55. // Overwrite viewNode with node without coresponding DOM node.
  56. viewNode = new ViewElement( 'p' );
  57. viewNode.appendChildren( viewText );
  58. viewText.data = 'bar';
  59. renderer.markToSync( 'TEXT', viewText );
  60. expect( renderer.markedTexts.has( viewText ) ).to.be.false;
  61. } );
  62. it( 'should throw if the type is unknown', () => {
  63. expect( () => {
  64. renderer.markToSync( 'UNKNOWN', viewNode );
  65. } ).to.throw( CKEditorError, /^renderer-unknown-type/ );
  66. } );
  67. } );
  68. describe( 'render', () => {
  69. let viewNode, domNode;
  70. beforeEach( () => {
  71. viewNode = new ViewElement( 'p' );
  72. domNode = document.createElement( 'p' );
  73. domConverter.bindElements( domNode, viewNode );
  74. renderer.markedTexts.clear();
  75. renderer.markedAttributes.clear();
  76. renderer.markedChildren.clear();
  77. } );
  78. it( 'should update attributes', () => {
  79. viewNode.setAttribute( 'class', 'foo' );
  80. renderer.markToSync( 'ATTRIBUTES', viewNode );
  81. renderer.render();
  82. expect( domNode.getAttribute( 'class' ) ).to.equal( 'foo' );
  83. expect( renderer.markedAttributes.size ).to.equal( 0 );
  84. } );
  85. it( 'should remove attributes', () => {
  86. viewNode.setAttribute( 'class', 'foo' );
  87. domNode.setAttribute( 'id', 'bar' );
  88. domNode.setAttribute( 'class', 'bar' );
  89. renderer.markToSync( 'ATTRIBUTES', viewNode );
  90. renderer.render();
  91. expect( domNode.getAttribute( 'class' ) ).to.equal( 'foo' );
  92. expect( domNode.getAttribute( 'id' ) ).to.be.not.ok;
  93. expect( renderer.markedAttributes.size ).to.equal( 0 );
  94. } );
  95. it( 'should add children', () => {
  96. viewNode.appendChildren( new ViewText( 'foo' ) );
  97. renderer.markToSync( 'CHILDREN', viewNode );
  98. renderer.render();
  99. expect( domNode.childNodes.length ).to.equal( 1 );
  100. expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
  101. expect( renderer.markedChildren.size ).to.equal( 0 );
  102. } );
  103. it( 'should remove children', () => {
  104. viewNode.appendChildren( new ViewText( 'foo' ) );
  105. renderer.markToSync( 'CHILDREN', viewNode );
  106. renderer.render();
  107. expect( domNode.childNodes.length ).to.equal( 1 );
  108. expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
  109. viewNode.removeChildren( 0, 1 );
  110. renderer.markToSync( 'CHILDREN', viewNode );
  111. renderer.render();
  112. expect( domNode.childNodes.length ).to.equal( 0 );
  113. expect( renderer.markedChildren.size ).to.equal( 0 );
  114. } );
  115. it( 'should update text', () => {
  116. const viewText = new ViewText( 'foo' );
  117. viewNode.appendChildren( viewText );
  118. renderer.markToSync( 'CHILDREN', viewNode );
  119. renderer.render();
  120. expect( domNode.childNodes.length ).to.equal( 1 );
  121. expect( domNode.childNodes[ 0 ].data ).to.equal( 'foo' );
  122. viewText.data = 'bar';
  123. renderer.markToSync( 'TEXT', viewText );
  124. renderer.render();
  125. expect( domNode.childNodes.length ).to.equal( 1 );
  126. expect( domNode.childNodes[ 0 ].data ).to.equal( 'bar' );
  127. expect( renderer.markedTexts.size ).to.equal( 0 );
  128. } );
  129. it( 'should not update text parent child list changed', () => {
  130. const viewImg = new ViewElement( 'img' );
  131. const viewText = new ViewText( 'foo' );
  132. viewNode.appendChildren( [ viewImg, viewText ] );
  133. renderer.markToSync( 'CHILDREN', viewNode );
  134. renderer.markToSync( 'TEXT', viewText );
  135. renderer.render();
  136. expect( domNode.childNodes.length ).to.equal( 2 );
  137. expect( domNode.childNodes[ 0 ].tagName ).to.equal( 'IMG' );
  138. expect( domNode.childNodes[ 1 ].data ).to.equal( 'foo' );
  139. } );
  140. it( 'should not change text if it is the same during text rendering', () => {
  141. const viewText = new ViewText( 'foo' );
  142. viewNode.appendChildren( viewText );
  143. renderer.markToSync( 'CHILDREN', viewNode );
  144. renderer.render();
  145. // This should not be changed during the render.
  146. const domText = domNode.childNodes[ 0 ];
  147. renderer.markToSync( 'TEXT', viewText );
  148. renderer.render();
  149. expect( domNode.childNodes.length ).to.equal( 1 );
  150. expect( domNode.childNodes[ 0 ] ).to.equal( domText );
  151. } );
  152. it( 'should not change text if it is the same during children rendering', () => {
  153. const viewText = new ViewText( 'foo' );
  154. viewNode.appendChildren( viewText );
  155. renderer.markToSync( 'CHILDREN', viewNode );
  156. renderer.render();
  157. // This should not be changed during the render.
  158. const domText = domNode.childNodes[ 0 ];
  159. renderer.markToSync( 'CHILDREN', viewNode );
  160. renderer.render();
  161. expect( domNode.childNodes.length ).to.equal( 1 );
  162. expect( domNode.childNodes[ 0 ] ).to.equal( domText );
  163. } );
  164. it( 'should not change element if it is the same', () => {
  165. const viewImg = new ViewElement( 'img' );
  166. viewNode.appendChildren( viewImg );
  167. // This should not be changed during the render.
  168. const domImg = document.createElement( 'img' );
  169. domNode.appendChild( domImg );
  170. domConverter.bindElements( domImg, viewImg );
  171. renderer.markToSync( 'CHILDREN', viewNode );
  172. renderer.render();
  173. expect( domNode.childNodes.length ).to.equal( 1 );
  174. expect( domNode.childNodes[ 0 ] ).to.equal( domImg );
  175. } );
  176. it( 'should change element if it is different', () => {
  177. const viewImg = new ViewElement( 'img' );
  178. viewNode.appendChildren( viewImg );
  179. renderer.markToSync( 'CHILDREN', viewNode );
  180. renderer.render();
  181. const viewP = new ViewElement( 'p' );
  182. viewNode.removeChildren( 0, 1 );
  183. viewNode.appendChildren( viewP );
  184. renderer.markToSync( 'CHILDREN', viewNode );
  185. renderer.render();
  186. expect( domNode.childNodes.length ).to.equal( 1 );
  187. expect( domNode.childNodes[ 0 ].tagName ).to.equal( 'P' );
  188. } );
  189. } );
  190. } );