chore(svelte-examples): pull out of lib package (#3363)

* chore(svelte-examples): pull out of lib package * chore(svelte-examples): cleanup * chore(examples): add readme files
2023-08-31 16:44:27 +02:00
parent 3da34c739e
commit dcc38794a6
197 changed files with 2003 additions and 1575 deletions
@@ -0,0 +1,63 @@
+import { ReactFlow, BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, ReactFlowProvider } from '@xyflow/react';
+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}
+            />
+          </ReactFlowProvider>
+          <ReactFlowProvider>
+            <ReactFlow
+              defaultNodes={simpleflow2.nodes}
+              edgeTypes={{ default: CustomEdge }}
+              defaultEdges={simpleflow2.edges}
+            />
+          </ReactFlowProvider>
+        </>
+      );
+    });
+
+    it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => {
+      cy.get('.react-flow__edgelabel-renderer').should('have.length', 2);
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(0)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge1');
+        });
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(1)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge2');
+        });
+    });
+  });
+});