domemittermixin.js 12 KB

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