8
0

view.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. 'use strict';
  6. import { getData } from '/tests/engine/_utils/view.js';
  7. import DocumentFragment from '/ckeditor5/engine/treeview/documentfragment.js';
  8. import Element from '/ckeditor5/engine/treeview/element.js';
  9. import AttributeElement from '/ckeditor5/engine/treeview/attributeelement.js';
  10. import ContainerElement from '/ckeditor5/engine/treeview/containerelement.js';
  11. import Text from '/ckeditor5/engine/treeview/text.js';
  12. import Selection from '/ckeditor5/engine/treeview/selection.js';
  13. import Range from '/ckeditor5/engine/treeview/range.js';
  14. describe( 'view test utils', () => {
  15. describe( 'getData', () => {
  16. it( 'should write elements and texts', () => {
  17. const text = new Text( 'foobar' );
  18. const b = new Element( 'b', null, text );
  19. const p = new Element( 'p', null, b );
  20. expect( getData( p ) ).to.equal( '<p><b>foobar</b></p>' );
  21. } );
  22. it( 'should write elements with attributes', () => {
  23. const text = new Text( 'foobar' );
  24. const b = new Element( 'b', {
  25. foo: 'bar'
  26. }, text );
  27. const p = new Element( 'p', {
  28. baz: 'qux',
  29. bar: 'taz',
  30. class: 'short wide'
  31. }, b );
  32. expect( getData( p ) ).to.equal( '<p class="short wide" baz="qux" bar="taz"><b foo="bar">foobar</b></p>' );
  33. } );
  34. it( 'should write selection ranges inside elements', () => {
  35. const text1 = new Text( 'foobar' );
  36. const text2 = new Text( 'bazqux' );
  37. const b1 = new Element( 'b', null, text1 );
  38. const b2 = new Element( 'b', null, text2 );
  39. const p = new Element( 'p', null, [ b1, b2 ] );
  40. const range = Range.createFromParentsAndOffsets( p, 1, p, 2 );
  41. const selection = new Selection();
  42. selection.addRange( range );
  43. expect( getData( p, selection ) ).to.equal( '<p><b>foobar</b>[<b>bazqux</b>]</p>' );
  44. } );
  45. it( 'should write collapsed selection ranges inside elements', () => {
  46. const text = new Text( 'foobar' );
  47. const p = new Element( 'p', null, text );
  48. const range = Range.createFromParentsAndOffsets( p, 0, p, 0 );
  49. const selection = new Selection();
  50. selection.addRange( range );
  51. expect( getData( p, selection ) ).to.equal( '<p>[]foobar</p>' );
  52. } );
  53. it( 'should write selection ranges inside text', () => {
  54. const text1 = new Text( 'foobar' );
  55. const text2 = new Text( 'bazqux' );
  56. const b1 = new Element( 'b', null, text1 );
  57. const b2 = new Element( 'b', null, text2 );
  58. const p = new Element( 'p', null, [ b1, b2 ] );
  59. const range = Range.createFromParentsAndOffsets( text1, 1, text1, 5 );
  60. const selection = new Selection();
  61. selection.addRange( range );
  62. expect( getData( p, selection ) ).to.equal( '<p><b>f{ooba}r</b><b>bazqux</b></p>' );
  63. } );
  64. it( 'should write collapsed selection ranges inside texts', () => {
  65. const text = new Text( 'foobar' );
  66. const p = new Element( 'p', null, text );
  67. const range = Range.createFromParentsAndOffsets( text, 0, text, 0 );
  68. const selection = new Selection();
  69. selection.addRange( range );
  70. expect( getData( p, selection ) ).to.equal( '<p>{}foobar</p>' );
  71. } );
  72. it( 'should write ranges that start inside text end ends between elements', () => {
  73. const text1 = new Text( 'foobar' );
  74. const text2 = new Text( 'bazqux' );
  75. const b1 = new Element( 'b', null, text1 );
  76. const b2 = new Element( 'b', null, text2 );
  77. const p = new Element( 'p', null, [ b1, b2 ] );
  78. const range = Range.createFromParentsAndOffsets( p, 0, text2, 5 );
  79. const selection = new Selection();
  80. selection.addRange( range );
  81. expect( getData( p, selection ) ).to.equal( '<p>[<b>foobar</b><b>bazqu}x</b></p>' );
  82. } );
  83. it( 'should write elements types as namespaces when needed', () => {
  84. const text = new Text( 'foobar' );
  85. const b = new AttributeElement( 'b', null, text );
  86. const p = new ContainerElement( 'p', null, b );
  87. expect( getData( p, null, { showType: true } ) )
  88. .to.equal( '<container:p><attribute:b>foobar</attribute:b></container:p>' );
  89. } );
  90. it( 'should write elements priorities when needed', () => {
  91. const text = new Text( 'foobar' );
  92. const b = new AttributeElement( 'b', null, text );
  93. const p = new ContainerElement( 'p', null, b );
  94. expect( getData( p, null, { showPriority: true } ) )
  95. .to.equal( '<p><b:10>foobar</b:10></p>' );
  96. } );
  97. it( 'should parse DocumentFragment as root', () => {
  98. const text1 = new Text( 'foobar' );
  99. const text2 = new Text( 'bazqux' );
  100. const b1 = new Element( 'b', null, text1 );
  101. const b2 = new Element( 'b', null, text2 );
  102. const fragment = new DocumentFragment( [ b1, b2 ] );
  103. expect( getData( fragment, null ) ).to.equal( '<b>foobar</b><b>bazqux</b>' );
  104. } );
  105. it( 'should not write ranges outside elements', () => {
  106. const text = new Text( 'foobar' );
  107. const b = new Element( 'b', null, text );
  108. const p = new Element( 'p', null, b );
  109. const range1 = Range.createFromParentsAndOffsets( p, 0, p, 5 );
  110. const range2 = Range.createFromParentsAndOffsets( p, -1, p, 1 );
  111. const range3 = Range.createFromParentsAndOffsets( text, 0, text, 7 );
  112. const range4 = Range.createFromParentsAndOffsets( text, -1, text, 2 );
  113. const range5 = Range.createFromParentsAndOffsets( text, 6, text, 8 );
  114. const selection = new Selection();
  115. selection.addRange( range1 );
  116. expect( getData( p, selection ) ).to.equal( '<p>[<b>foobar</b></p>' );
  117. selection.setRanges( [ range2 ] );
  118. expect( getData( p, selection ) ).to.equal( '<p><b>foobar</b>]</p>' );
  119. selection.setRanges( [ range3 ] );
  120. expect( getData( p, selection ) ).to.equal( '<p><b>{foobar</b></p>' );
  121. selection.setRanges( [ range4 ] );
  122. expect( getData( p, selection ) ).to.equal( '<p><b>fo}obar</b></p>' );
  123. selection.setRanges( [ range5 ] );
  124. expect( getData( p, selection ) ).to.equal( '<p><b>foobar{</b></p>' );
  125. } );
  126. it( 'should write multiple ranges from selection #1', () => {
  127. const text1 = new Text( 'foobar' );
  128. const text2 = new Text( 'bazqux' );
  129. const b1 = new Element( 'b', null, text1 );
  130. const b2 = new Element( 'b', null, text2 );
  131. const p = new Element( 'p', null, [ b1, b2 ] );
  132. const range1 = Range.createFromParentsAndOffsets( p, 0, p, 1 );
  133. const range2 = Range.createFromParentsAndOffsets( p, 1, p, 1 );
  134. const selection = new Selection();
  135. selection.setRanges( [ range2, range1 ] );
  136. expect( getData( p, selection ) ).to.equal( '<p>[<b>foobar</b>][]<b>bazqux</b></p>' );
  137. } );
  138. it( 'should write multiple ranges from selection #2', () => {
  139. const text1 = new Text( 'foobar' );
  140. const text2 = new Text( 'bazqux' );
  141. const b = new Element( 'b', null, text1 );
  142. const p = new Element( 'p', null, [ b, text2 ] );
  143. const range1 = Range.createFromParentsAndOffsets( p, 0, p, 1 );
  144. const range2 = Range.createFromParentsAndOffsets( text2, 0, text2, 3 );
  145. const range3 = Range.createFromParentsAndOffsets( text2, 3, text2, 4 );
  146. const range4 = Range.createFromParentsAndOffsets( p, 1, p, 1 );
  147. const selection = new Selection();
  148. selection.setRanges( [ range1, range2, range3, range4 ] );
  149. expect( getData( p, selection ) ).to.equal( '<p>[<b>foobar</b>][]{baz}{q}ux</p>' );
  150. } );
  151. } );
  152. } );