8
0

selectionobserver.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals setTimeout, Range, document */
  6. /* bender-tags: view, browser-only */
  7. import ViewRange from 'ckeditor5/engine/view/range.js';
  8. import testUtils from 'tests/core/_utils/utils.js';
  9. import ViewSelection from 'ckeditor5/engine/view/selection.js';
  10. import ViewDocument from 'ckeditor5/engine/view/document.js';
  11. import SelectionObserver from 'ckeditor5/engine/view/observer/selectionobserver.js';
  12. import MutationObserver from 'ckeditor5/engine/view/observer/mutationobserver.js';
  13. import log from 'ckeditor5/utils/log.js';
  14. import { parse } from 'ckeditor5/engine/dev-utils/view.js';
  15. testUtils.createSinonSandbox();
  16. describe( 'SelectionObserver', () => {
  17. let viewDocument, viewRoot, mutationObserver, selectionObserver, domRoot;
  18. beforeEach( ( done ) => {
  19. domRoot = document.createElement( 'div' );
  20. domRoot.innerHTML = `<div contenteditable="true" id="main"></div><div contenteditable="true" id="additional"></div>`;
  21. document.body.appendChild( domRoot );
  22. viewDocument = new ViewDocument();
  23. viewDocument.createRoot( document.getElementById( 'main' ) );
  24. mutationObserver = viewDocument.getObserver( MutationObserver );
  25. selectionObserver = viewDocument.getObserver( SelectionObserver );
  26. viewRoot = viewDocument.getRoot();
  27. viewRoot.appendChildren( parse(
  28. '<container:p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</container:p>' +
  29. '<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
  30. viewDocument.render();
  31. viewDocument.selection.removeAllRanges();
  32. document.getSelection().removeAllRanges();
  33. viewDocument.isFocused = true;
  34. selectionObserver.enable();
  35. // Ensure selectionchange will not be fired.
  36. setTimeout( () => done(), 100 );
  37. } );
  38. afterEach( () => {
  39. domRoot.parentElement.removeChild( domRoot );
  40. selectionObserver.disable();
  41. viewDocument.destroy();
  42. } );
  43. it( 'should fire selectionChange when it is the only change', ( done ) => {
  44. viewDocument.on( 'selectionChange', ( evt, data ) => {
  45. expect( data ).to.have.property( 'domSelection' ).that.equals( document.getSelection() );
  46. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
  47. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  48. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  49. expect( data.newSelection.rangeCount ).to.equal( 1 );
  50. const newViewRange = data.newSelection.getFirstRange();
  51. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  52. expect( newViewRange.start.parent ).to.equal( viewFoo );
  53. expect( newViewRange.start.offset ).to.equal( 1 );
  54. expect( newViewRange.end.parent ).to.equal( viewFoo );
  55. expect( newViewRange.end.offset ).to.equal( 2 );
  56. done();
  57. } );
  58. changeDomSelection();
  59. } );
  60. it( 'should add only one listener to one document', ( done ) => {
  61. // Add second roots to ensure that listener is added once.
  62. viewDocument.createRoot( document.getElementById( 'additional' ), 'additional' );
  63. viewDocument.on( 'selectionChange', () => {
  64. done();
  65. } );
  66. changeDomSelection();
  67. } );
  68. it( 'should not fire selectionChange on render', ( done ) => {
  69. viewDocument.on( 'selectionChange', () => {
  70. throw 'selectionChange on render';
  71. } );
  72. setTimeout( done, 70 );
  73. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  74. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  75. viewDocument.render();
  76. } );
  77. it( 'should not fired if observer is disabled', ( done ) => {
  78. viewDocument.getObserver( SelectionObserver ).disable();
  79. viewDocument.on( 'selectionChange', () => {
  80. throw 'selectionChange on render';
  81. } );
  82. setTimeout( done, 70 );
  83. changeDomSelection();
  84. } );
  85. it( 'should not fired if there is no focus', ( done ) => {
  86. viewDocument.isFocused = false;
  87. // changeDomSelection() may focus the editable element (happens on Chrome)
  88. // so cancel this because it sets the isFocused flag.
  89. viewDocument.on( 'focus', ( evt ) => evt.stop(), { priority: 'highest' } );
  90. viewDocument.on( 'selectionChange', () => {
  91. // Validate the correctness of the test. May help tracking issue with this test.
  92. expect( viewDocument.isFocused ).to.be.false;
  93. throw 'selectionChange on render';
  94. } );
  95. setTimeout( done, 70 );
  96. changeDomSelection();
  97. } );
  98. it( 'should warn and not enter infinite loop', ( done ) => {
  99. // Reset infinite loop counters so other tests won't mess up with this test.
  100. selectionObserver._clearInfiniteLoop();
  101. let counter = 100;
  102. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  103. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  104. viewDocument.on( 'selectionChange', () => {
  105. counter--;
  106. if ( counter > 0 ) {
  107. setTimeout( changeDomSelection );
  108. } else {
  109. throw 'Infinite loop!';
  110. }
  111. } );
  112. let warnedOnce = false;
  113. testUtils.sinon.stub( log, 'warn', ( msg ) => {
  114. if ( !warnedOnce ) {
  115. warnedOnce = true;
  116. setTimeout( () => {
  117. expect( msg ).to.match( /^selectionchange-infinite-loop/ );
  118. done();
  119. }, 200 );
  120. }
  121. } );
  122. changeDomSelection();
  123. } );
  124. it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
  125. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  126. // Reset infinite loop counters so other tests won't mess up with this test.
  127. selectionObserver._clearInfiniteLoop();
  128. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  129. const spy = testUtils.sinon.spy( log, 'warn' );
  130. for ( let i = 0; i < 10; i++ ) {
  131. changeDomSelection();
  132. }
  133. setTimeout( () => {
  134. expect( spy.called ).to.be.false;
  135. done();
  136. }, 400 );
  137. } );
  138. } );
  139. function changeDomSelection() {
  140. const domSelection = document.getSelection();
  141. domSelection.removeAllRanges();
  142. const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
  143. const domRange = new Range();
  144. domRange.setStart( domFoo, 1 );
  145. domRange.setEnd( domFoo, 2 );
  146. domSelection.addRange( domRange );
  147. }