From a9e7411d6daa8562a8e70d2acb9dc6b291d9c6f6 Mon Sep 17 00:00:00 2001
From: GeoffreyLiu <geoffrey@iscoollab.com>
Date: Tue, 8 Nov 2022 13:56:05 +0800
Subject: [PATCH] test: add the test case

---
 .../reactflow/multiple-instance.cy.tsx        | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

diff --git a/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx
new file mode 100644
index 00000000..eacf8d4f
--- /dev/null
+++ b/examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx
@@ -0,0 +1,61 @@
+import ReactFlow, { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from 'reactflow';
+import * as simpleflow from '../../fixtures/simpleflow';
+
+function CustomEdge(props: EdgeProps) {
+  const [path, labelX, labelY] = getSmoothStepPath(props);
+  return (
+    <>
+      <BaseEdge path={path} labelX={labelX} labelY={labelY} />
+      <EdgeLabelRenderer>
+        <div className="label">{props.id}</div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+const simpleflow1 = { ...simpleflow };
+simpleflow1.edges = [...simpleflow1.edges];
+simpleflow1.edges[0] = { ...simpleflow1.edges[0], id: 'edge1' };
+
+const simpleflow2 = { ...simpleflow };
+simpleflow2.edges = [...simpleflow2.edges];
+simpleflow2.edges[0] = { ...simpleflow2.edges[0], id: 'edge2' };
+
+describe('<ReactFlow />: Multiple Instances', () => {
+  describe('render EdgeLabelRenderer', () => {
+    beforeEach(() => {
+      cy.mount(
+        <>
+          <ReactFlowProvider>
+            <ReactFlow
+              defaultNodes={simpleflow1.nodes}
+              edgeTypes={{ default: CustomEdge }}
+              defaultEdges={simpleflow1.edges}
+              id="reactflow-a"
+            />
+          </ReactFlowProvider>
+          <ReactFlowProvider>
+            <ReactFlow
+              defaultNodes={simpleflow2.nodes}
+              edgeTypes={{ default: CustomEdge }}
+              defaultEdges={simpleflow2.edges}
+              id="reactflow-b"
+            />
+          </ReactFlowProvider>
+        </>
+      );
+    });
+
+    it('Each ReactFlow instance has its EdgeLabelRenderer DOM element without conflict', () => {
+      cy.get('#edgelabel-portal-reactflow-a').should('have.length', 1);
+      cy.get('#edgelabel-portal-reactflow-b').should('have.length', 1);
+    });
+
+    it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => {
+      cy.get('#edgelabel-portal-reactflow-a .label').should('have.length', 1);
+      cy.get('#edgelabel-portal-reactflow-a .label').should('contain.text', 'edge1');
+      cy.get('#edgelabel-portal-reactflow-b .label').should('have.length', 1);
+      cy.get('#edgelabel-portal-reactflow-b .label').should('contain.text', 'edge2');
+    });
+  });
+});