selectionobserver.js 9.8 KB

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