InteractionEventsSpec.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. /* global sinon */
  2. import {
  3. bootstrapDiagram,
  4. inject
  5. } from 'test/TestHelper';
  6. import interactionEventsModule from 'lib/features/interaction-events';
  7. var bindings = {
  8. mouseover: 'element.hover',
  9. mouseout: 'element.out',
  10. click: 'element.click',
  11. dblclick: 'element.dblclick',
  12. mousedown: 'element.mousedown',
  13. mouseup: 'element.mouseup',
  14. contextmenu: 'element.contextmenu'
  15. };
  16. describe('features/interaction-events', function() {
  17. beforeEach(bootstrapDiagram({
  18. modules: [
  19. interactionEventsModule
  20. ]
  21. }));
  22. var rootShape,
  23. parentShape,
  24. childShape,
  25. childShape2,
  26. connection;
  27. beforeEach(inject(function(elementFactory, canvas) {
  28. rootShape = elementFactory.createRoot({
  29. id: 'root'
  30. });
  31. canvas.setRootElement(rootShape);
  32. parentShape = elementFactory.createShape({
  33. id: 'parent',
  34. x: 100, y: 100, width: 300, height: 300
  35. });
  36. canvas.addShape(parentShape, rootShape);
  37. childShape = elementFactory.createShape({
  38. id: 'child',
  39. x: 110, y: 110, width: 100, height: 100
  40. });
  41. canvas.addShape(childShape, parentShape);
  42. childShape2 = elementFactory.createShape({
  43. id: 'child2',
  44. x: 200, y: 110, width: 100, height: 100
  45. });
  46. canvas.addShape(childShape2, parentShape);
  47. connection = elementFactory.createConnection({
  48. id: 'connection',
  49. waypoints: [ { x: 150, y: 150 }, { x: 150, y: 200 }, { x: 350, y: 150 } ],
  50. source: childShape,
  51. target: childShape2
  52. });
  53. canvas.addConnection(connection, parentShape);
  54. }));
  55. describe('bootstrap', function() {
  56. it('should bootstrap diagram with component', inject(function() {}));
  57. });
  58. describe('event handling', function() {
  59. function verifyEvent(type, button) {
  60. var description =
  61. type +
  62. (button ? ' with button=' + button : '');
  63. it(description, inject(function(eventBus, elementRegistry) {
  64. // given
  65. var parentGfx = elementRegistry.getGraphics(parentShape);
  66. var listenerFn = sinon.spy(function(e) {
  67. expect(e.element).to.eql(parentShape);
  68. expect(e.gfx).to.eql(parentGfx);
  69. expect(e.type).to.eql(bindings[type]);
  70. });
  71. // given
  72. eventBus.on(bindings[type], listenerFn);
  73. // when
  74. triggerMouseEvent(parentGfx, type, button);
  75. // then
  76. expect(listenerFn).to.have.been.calledOnce;
  77. expect(listenerFn).not.to.have.thrown();
  78. }));
  79. }
  80. function verifyNoEvent(type, button) {
  81. var description =
  82. 'should suppress ' + type +
  83. (button ? ' with button=' + button : '');
  84. it(description, inject(function(eventBus, elementRegistry) {
  85. // given
  86. var rootGfx = elementRegistry.getGraphics(rootShape);
  87. var listenerFn = sinon.spy();
  88. // given
  89. eventBus.on(bindings[type], listenerFn);
  90. // when
  91. triggerMouseEvent(rootGfx, type, button);
  92. // then
  93. expect(listenerFn).not.to.have.been.called;
  94. }));
  95. }
  96. describe('should handle', function() {
  97. // left-clicks
  98. Object.keys(bindings).forEach(function(event) {
  99. verifyEvent(event);
  100. });
  101. // <contextmenu> right-click
  102. verifyEvent('contextmenu', 2);
  103. });
  104. describe('should suppress', function() {
  105. // right-clicks
  106. [
  107. 'click',
  108. 'mousedown',
  109. 'mouseup',
  110. 'dblclick'
  111. ].forEach(function(event) {
  112. verifyNoEvent(event, 2);
  113. });
  114. // may be registered temporarily
  115. [
  116. 'mousemove'
  117. ].forEach(function(event) {
  118. verifyNoEvent(event);
  119. });
  120. });
  121. });
  122. describe('register / unregister', function() {
  123. it('should register', inject(
  124. function(interactionEvents, eventBus, canvas) {
  125. // given
  126. var listenerFn = sinon.spy();
  127. var node = canvas._svg;
  128. eventBus.on('element.mousemove', listenerFn);
  129. // when
  130. interactionEvents.registerEvent(
  131. node, 'mousemove', 'element.mousemove'
  132. );
  133. triggerMouseEvent(node, 'mousemove');
  134. // then
  135. expect(listenerFn).to.have.been.called;
  136. }
  137. ));
  138. it('should unregister', inject(function(interactionEvents, eventBus) {
  139. // given
  140. var listenerFn = sinon.spy();
  141. var node = document.body;
  142. eventBus.on('element.mousemove', listenerFn);
  143. // when
  144. interactionEvents.registerEvent(
  145. node, 'mousemove', 'element.mousemove'
  146. );
  147. interactionEvents.unregisterEvent(
  148. node, 'mousemove', 'element.mousemove'
  149. );
  150. triggerMouseEvent(node, 'mousemove');
  151. // then
  152. expect(listenerFn).not.to.have.been.called;
  153. }));
  154. it('should not throw not de-registration', inject(
  155. function(interactionEvents) {
  156. var node = document.body;
  157. expect(function() {
  158. interactionEvents.unregisterEvent(
  159. node, 'mousemove', 'element.mousemove'
  160. );
  161. }).not.to.throw;
  162. }
  163. ));
  164. });
  165. });
  166. // helpers //////////////////////
  167. function triggerMouseEvent(gfx, type, button) {
  168. var event = mouseEvent(type, button);
  169. return gfx.dispatchEvent(event);
  170. }
  171. function mouseEvent(type, button) {
  172. if (!button) {
  173. button = 0;
  174. }
  175. var event = document.createEvent('MouseEvent');
  176. event.initMouseEvent(
  177. type, true, true, window,
  178. 0, 0, 0, 80, 20,
  179. false, false, false, false,
  180. button, null
  181. );
  182. return event;
  183. }