selectionobserver.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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, domMain, domDocument;
  18. beforeEach( ( done ) => {
  19. domDocument = document;
  20. domRoot = domDocument.createElement( 'div' );
  21. domRoot.innerHTML = `<div contenteditable="true"></div><div contenteditable="true" id="additional"></div>`;
  22. domMain = domRoot.childNodes[ 0 ];
  23. domDocument.body.appendChild( domRoot );
  24. viewDocument = new ViewDocument();
  25. viewDocument.createRoot( domMain );
  26. mutationObserver = viewDocument.getObserver( MutationObserver );
  27. selectionObserver = viewDocument.getObserver( SelectionObserver );
  28. viewRoot = viewDocument.getRoot();
  29. viewRoot.appendChildren( parse(
  30. '<container:p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</container:p>' +
  31. '<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
  32. viewDocument.render();
  33. viewDocument.selection.removeAllRanges();
  34. domDocument.getSelection().removeAllRanges();
  35. viewDocument.isFocused = true;
  36. selectionObserver.enable();
  37. // Ensure selectionchange will not be fired.
  38. setTimeout( () => done(), 100 );
  39. } );
  40. afterEach( () => {
  41. domRoot.parentElement.removeChild( domRoot );
  42. viewDocument.destroy();
  43. } );
  44. it( 'should fire selectionChange when it is the only change', ( done ) => {
  45. viewDocument.on( 'selectionChange', ( evt, data ) => {
  46. expect( data ).to.have.property( 'domSelection' ).that.equals( domDocument.getSelection() );
  47. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
  48. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  49. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  50. expect( data.newSelection.rangeCount ).to.equal( 1 );
  51. const newViewRange = data.newSelection.getFirstRange();
  52. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  53. expect( newViewRange.start.parent ).to.equal( viewFoo );
  54. expect( newViewRange.start.offset ).to.equal( 2 );
  55. expect( newViewRange.end.parent ).to.equal( viewFoo );
  56. expect( newViewRange.end.offset ).to.equal( 2 );
  57. done();
  58. } );
  59. changeDomSelection();
  60. } );
  61. it( 'should add only one listener to one document', ( done ) => {
  62. // Add second roots to ensure that listener is added once.
  63. viewDocument.createRoot( domDocument.getElementById( 'additional' ), 'additional' );
  64. viewDocument.on( 'selectionChange', () => {
  65. done();
  66. } );
  67. changeDomSelection();
  68. } );
  69. it( 'should not fire selectionChange on render', ( done ) => {
  70. viewDocument.on( 'selectionChange', () => {
  71. throw 'selectionChange on render';
  72. } );
  73. setTimeout( done, 70 );
  74. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  75. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  76. viewDocument.render();
  77. } );
  78. it( 'should not fired if observer is disabled', ( done ) => {
  79. viewDocument.getObserver( SelectionObserver ).disable();
  80. viewDocument.on( 'selectionChange', () => {
  81. throw 'selectionChange on render';
  82. } );
  83. setTimeout( done, 70 );
  84. changeDomSelection();
  85. } );
  86. it( 'should not fired if there is no focus', ( done ) => {
  87. viewDocument.isFocused = false;
  88. // changeDomSelection() may focus the editable element (happens on Chrome)
  89. // so cancel this because it sets the isFocused flag.
  90. viewDocument.on( 'focus', ( evt ) => evt.stop(), { priority: 'highest' } );
  91. viewDocument.on( 'selectionChange', () => {
  92. // Validate the correctness of the test. May help tracking issue with this test.
  93. expect( viewDocument.isFocused ).to.be.false;
  94. throw 'selectionChange on render';
  95. } );
  96. setTimeout( done, 70 );
  97. changeDomSelection();
  98. } );
  99. it( 'should warn and not enter infinite loop', () => {
  100. // Selectionchange event is called twice per `changeDomSelection()` execution.
  101. let counter = 105;
  102. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  103. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  104. return new Promise( ( resolve, reject ) => {
  105. testUtils.sinon.stub( log, 'warn', ( msg ) => {
  106. expect( msg ).to.match( /^selectionchange-infinite-loop/ );
  107. resolve();
  108. } );
  109. viewDocument.on( 'selectionChangeDone', () => {
  110. if ( !counter ) {
  111. reject( new Error( 'Infinite loop warning was not logged.' ) );
  112. }
  113. } );
  114. while ( counter > 0 ) {
  115. changeDomSelection();
  116. counter--;
  117. }
  118. } );
  119. } );
  120. it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
  121. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  122. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  123. const spy = testUtils.sinon.spy( log, 'warn' );
  124. viewDocument.on( 'selectionChangeDone', () => {
  125. expect( spy.called ).to.be.false;
  126. done();
  127. } );
  128. for ( let i = 0; i < 10; i++ ) {
  129. changeDomSelection();
  130. }
  131. } );
  132. it( 'should not be treated as an infinite loop if changes are not often', () => {
  133. const clock = testUtils.sinon.useFakeTimers( 'setInterval', 'clearInterval' );
  134. const stub = testUtils.sinon.stub( log, 'warn' );
  135. // We need to recreate SelectionObserver, so it will use mocked setInterval.
  136. selectionObserver.disable();
  137. selectionObserver.destroy();
  138. viewDocument._observers.delete( SelectionObserver );
  139. viewDocument.addObserver( SelectionObserver );
  140. return doChanges()
  141. .then( doChanges )
  142. .then( () => {
  143. sinon.assert.notCalled( stub );
  144. clock.restore();
  145. } );
  146. // Selectionchange event is called twice per `changeDomSelection()` execution. We call it 75 times to get
  147. // 150 events. Infinite loop counter is reset, so calling this method twice should not show any warning.
  148. function doChanges() {
  149. return new Promise( resolve => {
  150. viewDocument.once( 'selectionChangeDone', () => {
  151. clock.tick( 1100 );
  152. resolve();
  153. } );
  154. for ( let i = 0; i < 75; i++ ) {
  155. changeDomSelection();
  156. }
  157. } );
  158. }
  159. } );
  160. it( 'should fire `selectionChangeDone` event after selection stop changing', ( done ) => {
  161. const spy = sinon.spy();
  162. viewDocument.on( 'selectionChangeDone', spy );
  163. // Disable focus observer to not re-render view on each focus.
  164. viewDocument.getObserver( FocusObserver ).disable();
  165. // Change selection.
  166. changeDomSelection();
  167. // Wait 100ms.
  168. // Note that it's difficult/not possible to test lodash#debounce with sinon fake timers.
  169. // See: https://github.com/lodash/lodash/issues/304
  170. setTimeout( () => {
  171. // Check if spy was called.
  172. expect( spy.notCalled ).to.true;
  173. // Change selection one more time.
  174. changeDomSelection();
  175. // Wait 210ms (debounced function should be called).
  176. setTimeout( () => {
  177. const data = spy.firstCall.args[ 1 ];
  178. expect( spy.calledOnce ).to.true;
  179. expect( data ).to.have.property( 'domSelection' ).to.equal( domDocument.getSelection() );
  180. expect( data ).to.have.property( 'oldSelection' ).to.instanceof( ViewSelection );
  181. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  182. expect( data ).to.have.property( 'newSelection' ).to.instanceof( ViewSelection );
  183. expect( data.newSelection.rangeCount ).to.equal( 1 );
  184. const newViewRange = data.newSelection.getFirstRange();
  185. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  186. expect( newViewRange.start.parent ).to.equal( viewFoo );
  187. expect( newViewRange.start.offset ).to.equal( 3 );
  188. expect( newViewRange.end.parent ).to.equal( viewFoo );
  189. expect( newViewRange.end.offset ).to.equal( 3 );
  190. done();
  191. }, 210 );
  192. }, 100 );
  193. } );
  194. it( 'should not fire `selectionChangeDone` event when observer will be destroyed', ( done ) => {
  195. const spy = sinon.spy();
  196. viewDocument.on( 'selectionChangeDone', spy );
  197. // Change selection.
  198. changeDomSelection();
  199. // Wait 100ms.
  200. // Note that it's difficult/not possible to test lodash#debounce with sinon fake timers.
  201. // See: https://github.com/lodash/lodash/issues/304
  202. setTimeout( () => {
  203. // And destroy observer.
  204. selectionObserver.destroy();
  205. // Wait another 110ms.
  206. setTimeout( () => {
  207. // Check that event won't be called.
  208. expect( spy.notCalled ).to.true;
  209. done();
  210. }, 110 );
  211. }, 100 );
  212. } );
  213. function changeDomSelection() {
  214. const domSelection = domDocument.getSelection();
  215. const domFoo = domMain.childNodes[ 0 ].childNodes[ 0 ];
  216. const offset = domSelection.anchorOffset;
  217. domSelection.removeAllRanges();
  218. domSelection.collapse( domFoo, offset == 2 ? 3 : 2 );
  219. }
  220. } );