8
0

renderer.js 7.8 KB

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