Add test

x-pack/plugins/apm/public/components/app/ServiceMap/use_cytoscape_event_handlers.test.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import cytoscape from 'cytoscape';
+import { EuiTheme } from '../../../../../observability/public';
+import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers';
+import dagre from 'cytoscape-dagre';
+
+cytoscape.use(dagre);
+
+const theme = ({
+  eui: { avatarSizing: { l: { size: 10 } } },
+} as unknown) as EuiTheme;
+
+describe('useCytoscapeEventHandlers', () => {
+  describe('when cytoscape is undefined', () => {
+    it('runs', () => {
+      expect(() => {
+        renderHook(() => useCytoscapeEventHandlers({ cy: undefined, theme }));
+      }).not.toThrowError();
+    });
+  });
+
+  describe('when an element is dragged', () => {
+    it('sets the hasBeenDragged data', () => {
+      const cy = cytoscape({ elements: [{ data: { id: 'test' } }] });
+
+      renderHook(() => useCytoscapeEventHandlers({ cy, theme }));
+      cy.getElementById('test').trigger('drag');
+
+      expect(cy.getElementById('test').data('hasBeenDragged')).toEqual(true);
+    });
+  });
+
+  describe('when a node is hovered', () => {
+    it('applies the hover class', () => {
+      const cy = cytoscape({
+        elements: [{ data: { id: 'test' } }],
+      });
+      const node = cy.getElementById('test');
+
+      renderHook(() => useCytoscapeEventHandlers({ cy, theme }));
+      node.trigger('mouseover');
+
+      expect(node.hasClass('hover')).toEqual(true);
+    });
+  });
+
+  describe('when a node is un-hovered', () => {
+    it('removes the hover class', () => {
+      const cy = cytoscape({
+        elements: [{ data: { id: 'test' }, classes: 'hover' }],
+      });
+      const node = cy.getElementById('test');
+
+      renderHook(() => useCytoscapeEventHandlers({ cy, theme }));
+      node.trigger('mouseout');
+
+      expect(node.hasClass('hover')).toEqual(false);
+    });
+  });
+});

x-pack/plugins/apm/public/components/app/ServiceMap/use_cytoscape_event_handlers.ts

@@ -148,29 +148,30 @@ export function useCytoscapeEventHandlers({
         console.debug('cytoscape:', event);
       }
     };
-    const firstDragHandler: cytoscape.EventHandler = (event) => {
-      event.target.data('hasBeenDragged', true);
-    };
+
     const dragHandler: cytoscape.EventHandler = (event) => {
       applyCubicBezierStyles(event.target.connectedEdges());
+
+      if (!event.target.data('hasBeenDragged')) {
+        event.target.data('hasBeenDragged', true);
+      }
     };
 
     if (cy) {
-      cy.on('custom:data layoutstop select unselect', debugHandler);
+      cy.on('custom:data drag layoutstop select unselect', debugHandler);
       cy.on('custom:data', dataHandler);
       cy.on('layoutstop', layoutstopHandler);
       cy.on('mouseover', 'edge, node', mouseoverHandler);
       cy.on('mouseout', 'edge, node', mouseoutHandler);
       cy.on('select', 'node', selectHandler);
       cy.on('unselect', 'node', unselectHandler);
-      cy.one('drag', 'node', firstDragHandler);
       cy.on('drag', 'node', dragHandler);
     }
 
     return () => {
       if (cy) {
         cy.removeListener(
-          'custom:data layoutstop select unselect',
+          'custom:data drag layoutstop select unselect',
           undefined,
           debugHandler
         );
@@ -181,7 +182,6 @@ export function useCytoscapeEventHandlers({
         cy.removeListener('select', 'node', selectHandler);
         cy.removeListener('unselect', 'node', unselectHandler);
         cy.removeListener('drag', 'node', dragHandler);
-        cy.removeListener('drag', 'node', firstDragHandler);
       }
     };
   }, [cy, serviceName, trackApmEvent, theme]);