8
0

selectionobserver.js 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import ViewRange from '../../../src/view/range';
  6. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  7. import ViewSelection from '../../../src/view/selection';
  8. import ViewDocument from '../../../src/view/document';
  9. import SelectionObserver from '../../../src/view/observer/selectionobserver';
  10. import MutationObserver from '../../../src/view/observer/mutationobserver';
  11. import FocusObserver from '../../../src/view/observer/focusobserver';
  12. import log from '@ckeditor/ckeditor5-utils/src/log';
  13. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  14. import { parse } from '../../../src/dev-utils/view';
  15. const setTimeout = global.window.setTimeout;
  16. const setInterval = global.window.setInterval;
  17. const clearInterval = global.window.clearInterval;
  18. const domDocument = global.document;
  19. testUtils.createSinonSandbox();
  20. describe( 'SelectionObserver', () => {
  21. let viewDocument, viewRoot, mutationObserver, selectionObserver, domRoot, domMain;
  22. beforeEach( ( done ) => {
  23. domRoot = domDocument.createElement( 'div' );
  24. domRoot.innerHTML = `<div contenteditable="true"></div><div contenteditable="true" id="additional"></div>`;
  25. domMain = domRoot.childNodes[ 0 ];
  26. domDocument.body.appendChild( domRoot );
  27. viewDocument = new ViewDocument();
  28. viewDocument.createRoot( domMain );
  29. mutationObserver = viewDocument.getObserver( MutationObserver );
  30. selectionObserver = viewDocument.getObserver( SelectionObserver );
  31. viewRoot = viewDocument.getRoot();
  32. viewRoot.appendChildren( parse(
  33. '<container:p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</container:p>' +
  34. '<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
  35. viewDocument.render();
  36. viewDocument.selection.removeAllRanges();
  37. domDocument.getSelection().removeAllRanges();
  38. viewDocument.isFocused = true;
  39. selectionObserver.enable();
  40. // Ensure selectionchange will not be fired.
  41. setTimeout( () => done(), 100 );
  42. } );
  43. afterEach( () => {
  44. domRoot.parentElement.removeChild( domRoot );
  45. viewDocument.destroy();
  46. } );
  47. it( 'should fire selectionChange when it is the only change', ( done ) => {
  48. viewDocument.on( 'selectionChange', ( evt, data ) => {
  49. expect( data ).to.have.property( 'domSelection' ).that.equals( domDocument.getSelection() );
  50. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
  51. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  52. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  53. expect( data.newSelection.rangeCount ).to.equal( 1 );
  54. const newViewRange = data.newSelection.getFirstRange();
  55. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  56. expect( newViewRange.start.parent ).to.equal( viewFoo );
  57. expect( newViewRange.start.offset ).to.equal( 2 );
  58. expect( newViewRange.end.parent ).to.equal( viewFoo );
  59. expect( newViewRange.end.offset ).to.equal( 2 );
  60. done();
  61. } );
  62. changeDomSelection();
  63. } );
  64. it( 'should add only one listener to one document', ( done ) => {
  65. // Add second roots to ensure that listener is added once.
  66. viewDocument.createRoot( domDocument.getElementById( 'additional' ), 'additional' );
  67. viewDocument.on( 'selectionChange', () => {
  68. done();
  69. } );
  70. changeDomSelection();
  71. } );
  72. it( 'should not fire selectionChange on render', ( done ) => {
  73. viewDocument.on( 'selectionChange', () => {
  74. throw 'selectionChange on render';
  75. } );
  76. setTimeout( done, 70 );
  77. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  78. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  79. viewDocument.render();
  80. } );
  81. it( 'should not fired if observer is disabled', ( done ) => {
  82. viewDocument.getObserver( SelectionObserver ).disable();
  83. viewDocument.on( 'selectionChange', () => {
  84. throw 'selectionChange on render';
  85. } );
  86. setTimeout( done, 70 );
  87. changeDomSelection();
  88. } );
  89. it( 'should not fired if there is no focus', ( done ) => {
  90. viewDocument.isFocused = false;
  91. // changeDomSelection() may focus the editable element (happens on Chrome)
  92. // so cancel this because it sets the isFocused flag.
  93. viewDocument.on( 'focus', ( evt ) => evt.stop(), { priority: 'highest' } );
  94. viewDocument.on( 'selectionChange', () => {
  95. // Validate the correctness of the test. May help tracking issue with this test.
  96. expect( viewDocument.isFocused ).to.be.false;
  97. throw 'selectionChange on render';
  98. } );
  99. setTimeout( done, 70 );
  100. changeDomSelection();
  101. } );
  102. it( 'should warn and not enter infinite loop', ( done ) => {
  103. // Reset infinite loop counters so other tests won't mess up with this test.
  104. selectionObserver._clearInfiniteLoop();
  105. clearInterval( selectionObserver._clearInfiniteLoopInterval );
  106. selectionObserver._clearInfiniteLoopInterval = setInterval( () => selectionObserver._clearInfiniteLoop(), 2000 );
  107. let counter = 100;
  108. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  109. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  110. viewDocument.on( 'selectionChange', () => {
  111. counter--;
  112. if ( counter > 0 ) {
  113. setTimeout( changeDomSelection );
  114. } else {
  115. throw 'Infinite loop!';
  116. }
  117. } );
  118. let warnedOnce = false;
  119. testUtils.sinon.stub( log, 'warn', ( msg ) => {
  120. if ( !warnedOnce ) {
  121. warnedOnce = true;
  122. setTimeout( () => {
  123. expect( msg ).to.match( /^selectionchange-infinite-loop/ );
  124. done();
  125. }, 200 );
  126. }
  127. } );
  128. changeDomSelection();
  129. } );
  130. it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
  131. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  132. // Reset infinite loop counters so other tests won't mess up with this test.
  133. selectionObserver._clearInfiniteLoop();
  134. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  135. const spy = testUtils.sinon.spy( log, 'warn' );
  136. for ( let i = 0; i < 10; i++ ) {
  137. changeDomSelection();
  138. }
  139. setTimeout( () => {
  140. expect( spy.called ).to.be.false;
  141. done();
  142. }, 400 );
  143. } );
  144. it( 'should not be treated as an infinite loop if changes are not often', ( done ) => {
  145. const clock = testUtils.sinon.useFakeTimers( 'setInterval', 'clearInterval' );
  146. const spy = testUtils.sinon.spy( log, 'warn' );
  147. // We need to recreate SelectionObserver, so it will use mocked setInterval.
  148. selectionObserver.disable();
  149. selectionObserver.destroy();
  150. viewDocument._observers.delete( SelectionObserver );
  151. viewDocument.addObserver( SelectionObserver );
  152. // Inf-loop kicks in after 50th time the selection is changed in 2s.
  153. // We will test 30 times, tick sinon clock to clean counter and then test 30 times again.
  154. // Note that `changeDomSelection` fires two events.
  155. let changeCount = 15;
  156. for ( let i = 0; i < changeCount; i++ ) {
  157. setTimeout( () => {
  158. changeDomSelection();
  159. }, i * 20 );
  160. }
  161. setTimeout( () => {
  162. // Move the clock by 2100ms which will trigger callback added to `setInterval` and reset the inf-loop counter.
  163. clock.tick( 2100 );
  164. for ( let i = 0; i < changeCount; i++ ) {
  165. changeDomSelection();
  166. }
  167. setTimeout( () => {
  168. expect( spy.called ).to.be.false;
  169. clock.restore();
  170. done();
  171. }, 200 );
  172. }, 400 );
  173. } );
  174. it( 'should fire `selectionChangeDone` event after selection stop changing', ( done ) => {
  175. const spy = sinon.spy();
  176. viewDocument.on( 'selectionChangeDone', spy );
  177. // Disable focus observer to not re-render view on each focus.
  178. viewDocument.getObserver( FocusObserver ).disable();
  179. // Change selection.
  180. changeDomSelection();
  181. // Wait 100ms.
  182. // Note that it's difficult/not possible to test lodash#debounce with sinon fake timers.
  183. // See: https://github.com/lodash/lodash/issues/304
  184. setTimeout( () => {
  185. // Check if spy was called.
  186. expect( spy.notCalled ).to.true;
  187. // Change selection one more time.
  188. changeDomSelection();
  189. // Wait 210ms (debounced function should be called).
  190. setTimeout( () => {
  191. const data = spy.firstCall.args[ 1 ];
  192. expect( spy.calledOnce ).to.true;
  193. expect( data ).to.have.property( 'domSelection' ).to.equal( domDocument.getSelection() );
  194. expect( data ).to.have.property( 'oldSelection' ).to.instanceof( ViewSelection );
  195. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  196. expect( data ).to.have.property( 'newSelection' ).to.instanceof( ViewSelection );
  197. expect( data.newSelection.rangeCount ).to.equal( 1 );
  198. const newViewRange = data.newSelection.getFirstRange();
  199. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  200. expect( newViewRange.start.parent ).to.equal( viewFoo );
  201. expect( newViewRange.start.offset ).to.equal( 3 );
  202. expect( newViewRange.end.parent ).to.equal( viewFoo );
  203. expect( newViewRange.end.offset ).to.equal( 3 );
  204. done();
  205. }, 210 );
  206. }, 100 );
  207. } );
  208. it( 'should not fire `selectionChangeDone` event when observer will be destroyed', ( done ) => {
  209. const spy = sinon.spy();
  210. viewDocument.on( 'selectionChangeDone', spy );
  211. // Change selection.
  212. changeDomSelection();
  213. // Wait 100ms.
  214. // Note that it's difficult/not possible to test lodash#debounce with sinon fake timers.
  215. // See: https://github.com/lodash/lodash/issues/304
  216. setTimeout( () => {
  217. // And destroy observer.
  218. selectionObserver.destroy();
  219. // Wait another 110ms.
  220. setTimeout( () => {
  221. // Check that event won't be called.
  222. expect( spy.notCalled ).to.true;
  223. done();
  224. }, 110 );
  225. }, 100 );
  226. } );
  227. function changeDomSelection() {
  228. const domSelection = domDocument.getSelection();
  229. const domFoo = domMain.childNodes[ 0 ].childNodes[ 0 ];
  230. const offset = domSelection.anchorOffset;
  231. domSelection.removeAllRanges();
  232. domSelection.collapse( domFoo, offset == 2 ? 3 : 2 );
  233. }
  234. } );