domemittermixin.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document, window, Event, MouseEvent */
  6. /* bender-tags: ui */
  7. import testUtils from 'tests/core/_utils/utils.js';
  8. import DOMEmitterMixin from 'ckeditor5/ui/domemittermixin.js';
  9. import EmitterMixin from 'ckeditor5/utils/emittermixin.js';
  10. testUtils.createSinonSandbox();
  11. describe( 'DOMEmitterMixin', () => {
  12. let emitter, domEmitter, node;
  13. beforeEach( () => {
  14. emitter = Object.create( EmitterMixin );
  15. domEmitter = Object.create( DOMEmitterMixin );
  16. node = document.createElement( 'div' );
  17. } );
  18. describe( 'listenTo', () => {
  19. it( 'should listen to EmitterMixin events', () => {
  20. const spy = testUtils.sinon.spy();
  21. domEmitter.listenTo( emitter, 'test', spy );
  22. emitter.fire( 'test' );
  23. sinon.assert.calledOnce( spy );
  24. } );
  25. it( 'should listen to native DOM events', () => {
  26. const spy = testUtils.sinon.spy();
  27. domEmitter.listenTo( node, 'test', spy );
  28. node.dispatchEvent( new Event( 'test' ) );
  29. sinon.assert.calledOnce( spy );
  30. } );
  31. it( 'should listen to native DOM events - window as source', () => {
  32. const spy = testUtils.sinon.spy();
  33. domEmitter.listenTo( window, 'test', spy );
  34. window.dispatchEvent( new Event( 'test' ) );
  35. sinon.assert.calledOnce( spy );
  36. } );
  37. it( 'should listen to native DOM events - document as source', () => {
  38. const spy = testUtils.sinon.spy();
  39. domEmitter.listenTo( document, 'test', spy );
  40. document.dispatchEvent( new Event( 'test' ) );
  41. sinon.assert.calledOnce( spy );
  42. } );
  43. // #187
  44. it( 'should work for DOM Nodes belonging to another window', () => {
  45. const spy = testUtils.sinon.spy();
  46. const iframe = document.createElement( 'iframe' );
  47. document.body.appendChild( iframe );
  48. const iframeNode = iframe.contentWindow.document.createElement( 'div' );
  49. domEmitter.listenTo( iframeNode, 'test', spy );
  50. iframeNode.dispatchEvent( new Event( 'test' ) );
  51. sinon.assert.calledOnce( spy );
  52. } );
  53. describe( 'event capturing', () => {
  54. beforeEach( () => {
  55. document.body.appendChild( node );
  56. } );
  57. afterEach( () => {
  58. document.body.removeChild( node );
  59. } );
  60. it( 'should not use capturing at default', () => {
  61. const spy = testUtils.sinon.spy();
  62. domEmitter.listenTo( document, 'test', spy );
  63. node.dispatchEvent( new Event( 'test', { bubbles: false } ) );
  64. sinon.assert.notCalled( spy );
  65. } );
  66. it( 'should optionally use capturing', () => {
  67. const spy = testUtils.sinon.spy();
  68. domEmitter.listenTo( document, 'test', spy, { useCapture: true } );
  69. node.dispatchEvent( new Event( 'test', { bubbles: false } ) );
  70. sinon.assert.calledOnce( spy );
  71. } );
  72. } );
  73. } );
  74. describe( 'stopListening', () => {
  75. it( 'should stop listening to a specific event callback', () => {
  76. const spy1 = testUtils.sinon.spy();
  77. const spy2 = testUtils.sinon.spy();
  78. domEmitter.listenTo( node, 'event1', spy1 );
  79. domEmitter.listenTo( node, 'event2', spy2 );
  80. node.dispatchEvent( new Event( 'event1' ) );
  81. node.dispatchEvent( new Event( 'event2' ) );
  82. domEmitter.stopListening( node, 'event1', spy1 );
  83. node.dispatchEvent( new Event( 'event1' ) );
  84. node.dispatchEvent( new Event( 'event2' ) );
  85. sinon.assert.calledOnce( spy1 );
  86. sinon.assert.calledTwice( spy2 );
  87. } );
  88. it( 'should stop listening to an specific event', () => {
  89. const spy1a = testUtils.sinon.spy();
  90. const spy1b = testUtils.sinon.spy();
  91. const spy2 = testUtils.sinon.spy();
  92. domEmitter.listenTo( node, 'event1', spy1a );
  93. domEmitter.listenTo( node, 'event1', spy1b );
  94. domEmitter.listenTo( node, 'event2', spy2 );
  95. node.dispatchEvent( new Event( 'event1' ) );
  96. node.dispatchEvent( new Event( 'event2' ) );
  97. sinon.assert.calledOnce( spy1a );
  98. sinon.assert.calledOnce( spy1b );
  99. sinon.assert.calledOnce( spy2 );
  100. domEmitter.stopListening( node, 'event1' );
  101. node.dispatchEvent( new Event( 'event1' ) );
  102. node.dispatchEvent( new Event( 'event2' ) );
  103. sinon.assert.calledOnce( spy1a );
  104. sinon.assert.calledOnce( spy1b );
  105. sinon.assert.calledTwice( spy2 );
  106. } );
  107. it( 'should stop listening to all events from a specific node', () => {
  108. const spy1 = testUtils.sinon.spy();
  109. const spy2 = testUtils.sinon.spy();
  110. domEmitter.listenTo( node, 'event1', spy1 );
  111. domEmitter.listenTo( node, 'event2', spy2 );
  112. node.dispatchEvent( new Event( 'event1' ) );
  113. node.dispatchEvent( new Event( 'event2' ) );
  114. domEmitter.stopListening( node );
  115. node.dispatchEvent( new Event( 'event1' ) );
  116. node.dispatchEvent( new Event( 'event2' ) );
  117. sinon.assert.calledOnce( spy1 );
  118. sinon.assert.calledOnce( spy2 );
  119. } );
  120. it( 'should stop listening to everything', () => {
  121. const spy1 = testUtils.sinon.spy();
  122. const spy2 = testUtils.sinon.spy();
  123. const node1 = document.createElement( 'div' );
  124. const node2 = document.createElement( 'div' );
  125. domEmitter.listenTo( node1, 'event1', spy1 );
  126. domEmitter.listenTo( node2, 'event2', spy2 );
  127. expect( domEmitter ).to.have.property( '_listeningTo' );
  128. node1.dispatchEvent( new Event( 'event1' ) );
  129. node2.dispatchEvent( new Event( 'event2' ) );
  130. domEmitter.stopListening();
  131. node1.dispatchEvent( new Event( 'event1' ) );
  132. node2.dispatchEvent( new Event( 'event2' ) );
  133. sinon.assert.calledOnce( spy1 );
  134. sinon.assert.calledOnce( spy2 );
  135. expect( domEmitter ).to.not.have.property( '_listeningTo' );
  136. } );
  137. it( 'should stop listening to everything what left', () => {
  138. const spy1 = testUtils.sinon.spy();
  139. const spy2 = testUtils.sinon.spy();
  140. const spy3 = testUtils.sinon.spy();
  141. const spy4 = testUtils.sinon.spy();
  142. const node1 = document.createElement( 'div' );
  143. const node2 = document.createElement( 'div' );
  144. domEmitter.listenTo( node1, 'event1', spy1 );
  145. domEmitter.listenTo( node1, 'event2', spy2 );
  146. domEmitter.listenTo( node2, 'event1', spy3 );
  147. domEmitter.listenTo( node2, 'event2', spy4 );
  148. expect( domEmitter ).to.have.property( '_listeningTo' );
  149. domEmitter.stopListening( node1, 'event1', spy1 );
  150. domEmitter.stopListening( node2, 'event1' );
  151. node1.dispatchEvent( new Event( 'event1' ) );
  152. node1.dispatchEvent( new Event( 'event2' ) );
  153. node2.dispatchEvent( new Event( 'event1' ) );
  154. node2.dispatchEvent( new Event( 'event2' ) );
  155. sinon.assert.notCalled( spy1 );
  156. sinon.assert.calledOnce( spy2 );
  157. sinon.assert.notCalled( spy3 );
  158. sinon.assert.calledOnce( spy4 );
  159. domEmitter.stopListening();
  160. node1.dispatchEvent( new Event( 'event1' ) );
  161. node1.dispatchEvent( new Event( 'event2' ) );
  162. node2.dispatchEvent( new Event( 'event1' ) );
  163. node2.dispatchEvent( new Event( 'event2' ) );
  164. sinon.assert.notCalled( spy1 );
  165. sinon.assert.calledOnce( spy2 );
  166. sinon.assert.notCalled( spy3 );
  167. sinon.assert.calledOnce( spy4 );
  168. expect( domEmitter ).to.not.have.property( '_listeningTo' );
  169. } );
  170. it( 'should not stop other nodes when a non-listened node is provided', () => {
  171. const spy = testUtils.sinon.spy();
  172. const node1 = document.createElement( 'div' );
  173. const node2 = document.createElement( 'div' );
  174. domEmitter.listenTo( node1, 'test', spy );
  175. domEmitter.stopListening( node2 );
  176. node1.dispatchEvent( new Event( 'test' ) );
  177. sinon.assert.called( spy );
  178. } );
  179. it( 'should pass DOM Event data to the listener', () => {
  180. const spy = testUtils.sinon.spy();
  181. domEmitter.listenTo( node, 'click', spy );
  182. const mouseEvent = new MouseEvent( 'click', {
  183. screenX: 10,
  184. screenY: 20
  185. } );
  186. node.dispatchEvent( mouseEvent );
  187. sinon.assert.calledOnce( spy );
  188. expect( spy.args[ 0 ][ 1 ] ).to.be.equal( mouseEvent );
  189. } );
  190. it( 'should detach native DOM event listener proxy, specific event', () => {
  191. const spy1a = testUtils.sinon.spy();
  192. const spy1b = testUtils.sinon.spy();
  193. domEmitter.listenTo( node, 'test', spy1a );
  194. const proxyEmitter = domEmitter._getProxyEmitter( node );
  195. const spy2 = testUtils.sinon.spy( proxyEmitter, 'fire' );
  196. node.dispatchEvent( new Event( 'test' ) );
  197. sinon.assert.calledOnce( spy1a );
  198. sinon.assert.calledOnce( spy2 );
  199. domEmitter.stopListening( node, 'test' );
  200. node.dispatchEvent( new Event( 'test' ) );
  201. sinon.assert.calledOnce( spy1a );
  202. sinon.assert.calledOnce( spy2 );
  203. // Attach same event again.
  204. domEmitter.listenTo( node, 'test', spy1b );
  205. node.dispatchEvent( new Event( 'test' ) );
  206. expect( proxyEmitter ).to.be.equal( domEmitter._getProxyEmitter( node ) );
  207. sinon.assert.calledOnce( spy1a );
  208. sinon.assert.calledOnce( spy1b );
  209. sinon.assert.calledTwice( spy2 );
  210. } );
  211. it( 'should detach native DOM event listener proxy, specific callback', () => {
  212. const spy1a = testUtils.sinon.spy();
  213. const spy1b = testUtils.sinon.spy();
  214. const spy1c = testUtils.sinon.spy();
  215. domEmitter.listenTo( node, 'test', spy1a );
  216. domEmitter.listenTo( node, 'test', spy1b );
  217. const proxyEmitter = domEmitter._getProxyEmitter( node );
  218. const spy2 = testUtils.sinon.spy( proxyEmitter, 'fire' );
  219. node.dispatchEvent( new Event( 'test' ) );
  220. sinon.assert.calledOnce( spy1a );
  221. sinon.assert.calledOnce( spy1b );
  222. sinon.assert.calledOnce( spy2 );
  223. domEmitter.stopListening( node, 'test', spy1a );
  224. node.dispatchEvent( new Event( 'test' ) );
  225. sinon.assert.calledOnce( spy1a );
  226. sinon.assert.calledTwice( spy1b );
  227. sinon.assert.calledTwice( spy2 );
  228. domEmitter.stopListening( node, 'test', spy1b );
  229. node.dispatchEvent( new Event( 'test' ) );
  230. sinon.assert.calledOnce( spy1a );
  231. sinon.assert.calledTwice( spy1b );
  232. sinon.assert.calledTwice( spy2 );
  233. // Attach same event again.
  234. domEmitter.listenTo( node, 'test', spy1c );
  235. node.dispatchEvent( new Event( 'test' ) );
  236. expect( proxyEmitter ).to.be.equal( domEmitter._getProxyEmitter( node ) );
  237. sinon.assert.calledOnce( spy1a );
  238. sinon.assert.calledTwice( spy1b );
  239. sinon.assert.calledOnce( spy1c );
  240. sinon.assert.calledThrice( spy2 );
  241. } );
  242. it( 'should detach native DOM event listener proxy, specific emitter', () => {
  243. const spy1a = testUtils.sinon.spy();
  244. const spy1b = testUtils.sinon.spy();
  245. const spy1c = testUtils.sinon.spy();
  246. const spy1d = testUtils.sinon.spy();
  247. domEmitter.listenTo( node, 'test1', spy1a );
  248. domEmitter.listenTo( node, 'test2', spy1b );
  249. const proxyEmitter = domEmitter._getProxyEmitter( node );
  250. const spy2 = testUtils.sinon.spy( proxyEmitter, 'fire' );
  251. node.dispatchEvent( new Event( 'test1' ) );
  252. node.dispatchEvent( new Event( 'test2' ) );
  253. sinon.assert.calledOnce( spy1a );
  254. sinon.assert.calledOnce( spy1b );
  255. sinon.assert.calledTwice( spy2 );
  256. domEmitter.stopListening( node );
  257. node.dispatchEvent( new Event( 'test1' ) );
  258. node.dispatchEvent( new Event( 'test2' ) );
  259. sinon.assert.calledOnce( spy1a );
  260. sinon.assert.calledOnce( spy1b );
  261. sinon.assert.calledTwice( spy2 );
  262. // Attach same event again.
  263. domEmitter.listenTo( node, 'test1', spy1c );
  264. domEmitter.listenTo( node, 'test2', spy1d );
  265. // Old proxy emitter died when stopped listening to the node.
  266. const proxyEmitter2 = domEmitter._getProxyEmitter( node );
  267. const spy3 = testUtils.sinon.spy( proxyEmitter2, 'fire' );
  268. node.dispatchEvent( new Event( 'test1' ) );
  269. node.dispatchEvent( new Event( 'test2' ) );
  270. expect( proxyEmitter ).to.not.be.equal( proxyEmitter2 );
  271. sinon.assert.calledOnce( spy1a );
  272. sinon.assert.calledOnce( spy1b );
  273. sinon.assert.calledOnce( spy1c );
  274. sinon.assert.calledOnce( spy1d );
  275. sinon.assert.calledTwice( spy2 );
  276. sinon.assert.calledTwice( spy3 );
  277. } );
  278. it( 'should detach native DOM event listener proxy, everything', () => {
  279. const spy1a = testUtils.sinon.spy();
  280. const spy1b = testUtils.sinon.spy();
  281. const spy1c = testUtils.sinon.spy();
  282. const spy1d = testUtils.sinon.spy();
  283. domEmitter.listenTo( node, 'test1', spy1a );
  284. domEmitter.listenTo( node, 'test2', spy1b );
  285. const proxyEmitter = domEmitter._getProxyEmitter( node );
  286. const spy2 = testUtils.sinon.spy( proxyEmitter, 'fire' );
  287. node.dispatchEvent( new Event( 'test1' ) );
  288. node.dispatchEvent( new Event( 'test2' ) );
  289. sinon.assert.calledOnce( spy1a );
  290. sinon.assert.calledOnce( spy1b );
  291. sinon.assert.calledTwice( spy2 );
  292. domEmitter.stopListening();
  293. node.dispatchEvent( new Event( 'test1' ) );
  294. node.dispatchEvent( new Event( 'test2' ) );
  295. sinon.assert.calledOnce( spy1a );
  296. sinon.assert.calledOnce( spy1b );
  297. sinon.assert.calledTwice( spy2 );
  298. // Attach same event again.
  299. domEmitter.listenTo( node, 'test1', spy1c );
  300. domEmitter.listenTo( node, 'test2', spy1d );
  301. // Old proxy emitter died when stopped listening to the node.
  302. const proxyEmitter2 = domEmitter._getProxyEmitter( node );
  303. const spy3 = testUtils.sinon.spy( proxyEmitter2, 'fire' );
  304. node.dispatchEvent( new Event( 'test1' ) );
  305. node.dispatchEvent( new Event( 'test2' ) );
  306. expect( proxyEmitter ).to.not.be.equal( proxyEmitter2 );
  307. sinon.assert.calledOnce( spy1a );
  308. sinon.assert.calledOnce( spy1b );
  309. sinon.assert.calledOnce( spy1c );
  310. sinon.assert.calledOnce( spy1d );
  311. sinon.assert.calledTwice( spy2 );
  312. sinon.assert.calledTwice( spy3 );
  313. } );
  314. // #187
  315. it( 'should work for DOM Nodes belonging to another window', () => {
  316. const spy = testUtils.sinon.spy();
  317. const iframe = document.createElement( 'iframe' );
  318. document.body.appendChild( iframe );
  319. const iframeNode = iframe.contentWindow.document.createElement( 'div' );
  320. domEmitter.listenTo( iframeNode, 'test', spy );
  321. iframeNode.dispatchEvent( new Event( 'test' ) );
  322. domEmitter.stopListening( iframeNode );
  323. iframeNode.dispatchEvent( new Event( 'test' ) );
  324. sinon.assert.calledOnce( spy );
  325. } );
  326. } );
  327. } );