From c5ce586dd9d6a53e600cbff4e9257695fb08e601 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 5 Oct 2021 10:45:51 +0200
Subject: [PATCH] test(draghandle): add basic tests #1552

---
 cypress/integration/flow/draghandle.spec.js | 30 +++++++++++++++++++
 example/src/DragHandle/DragHandleNode.tsx   | 33 +++++++++++++++++++++
 example/src/DragHandle/index.tsx            | 21 +++++++++++++
 example/src/index.tsx                       |  5 ++++
 4 files changed, 89 insertions(+)
 create mode 100644 cypress/integration/flow/draghandle.spec.js
 create mode 100644 example/src/DragHandle/DragHandleNode.tsx
 create mode 100644 example/src/DragHandle/index.tsx

diff --git a/cypress/integration/flow/draghandle.spec.js b/cypress/integration/flow/draghandle.spec.js
new file mode 100644
index 00000000..015a5a34
--- /dev/null
+++ b/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);
+    });
+  });
+});
diff --git a/example/src/DragHandle/DragHandleNode.tsx b/example/src/DragHandle/DragHandleNode.tsx
new file mode 100644
index 00000000..377e45de
--- /dev/null
+++ b/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);
diff --git a/example/src/DragHandle/index.tsx b/example/src/DragHandle/index.tsx
new file mode 100644
index 00000000..b5620243
--- /dev/null
+++ b/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;
diff --git a/example/src/index.tsx b/example/src/index.tsx
index 5ac43c39..f81278ba 100644
--- a/example/src/index.tsx
+++ b/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 }) => {