test(draghandle): add basic tests #1552

cypress/integration/flow/draghandle.spec.js

@@ -0,0 +1,30 @@
+describe('DragHandle Flow Rendering', () => {
+  before(() => {
+    cy.visit('/draghandle');
+  });
+
+  it('renders a flow with a node', () => {
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow__node').should('have.length', 1);
+  });
+
+  it('tries to drag a node', () => {
+    const $nodeElement = Cypress.$('.react-flow__node:first');
+    const styleBeforeDrag = $nodeElement.css('transform');
+
+    cy.drag('.react-flow__node:first', { x: 500, y: 500 }).then(() => {
+      const styleAfterDrag = $nodeElement.css('transform');
+      expect(styleBeforeDrag).to.be.equal(styleAfterDrag);
+    });
+  });
+
+  it('drags a node', () => {
+    const $nodeElement = Cypress.$('.react-flow__node:first');
+    const styleBeforeDrag = $nodeElement.css('transform');
+
+    cy.drag('.custom-drag-handle:first', { x: 500, y: 500 }).then(() => {
+      const styleAfterDrag = $nodeElement.css('transform');
+      expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+    });
+  });
+});

example/src/DragHandle/DragHandleNode.tsx

@@ -0,0 +1,33 @@
+import { memo, FC } from 'react';
+
+import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
+
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
+
+const labelStyle = {
+  display: 'flex',
+  alignItems: 'center',
+};
+
+const dragHandleStyle = {
+  display: 'inline-block',
+  width: 25,
+  height: 25,
+  backgroundColor: 'teal',
+  marginLeft: 5,
+  borderRadius: '50%',
+};
+
+const ColorSelectorNode: FC<NodeProps> = () => {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
+      <div style={labelStyle}>
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
+      </div>
+      <Handle type="source" position={Position.Right} />
+    </>
+  );
+};
+
+export default memo(ColorSelectorNode);

example/src/DragHandle/index.tsx

@@ -0,0 +1,21 @@
+import ReactFlow from 'react-flow-renderer';
+
+import DragHandleNode from './DragHandleNode';
+
+const nodeTypes = {
+  dragHandleNode: DragHandleNode,
+};
+
+const elements = [
+  {
+    id: '2',
+    type: 'dragHandleNode',
+    dragHandle: '.custom-drag-handle',
+    style: { border: '1px solid #ddd', padding: '20px 40px' },
+    position: { x: 200, y: 200 },
+  },
+];
+
+const DragHandleFlow = () => <ReactFlow elements={elements} nodeTypes={nodeTypes} />;
+
+export default DragHandleFlow;

example/src/index.tsx

@@ -26,6 +26,7 @@ import UseZoomPanHelper from './UseZoomPanHelper';
 import UseUpdateNodeInternals from './UseUpdateNodeInternals';
 import Undirectional from './Undirectional';
 import MultiFlows from './MultiFlows';
+import DragHandle from './DragHandle';
 
 import './index.css';
 
@@ -126,6 +127,10 @@ const routes = [
     path: '/multiflows',
     component: MultiFlows,
   },
+  {
+    path: '/draghandle',
+    component: DragHandle,
+  },
 ];
 
 const Header = withRouter(({ history, location }) => {