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,42 @@
+import React, { useEffect } from 'react';
+import { ReactFlow, Edge, useEdges } from '@xyflow/react';
+
+import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
+
+describe('useEdges.cy.tsx', () => {
+  it('handles edges', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow nodes={initialNodes} edges={initialEdges}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', initialEdges);
+  });
+
+  it('handles defaultEdges', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={initialNodes} defaultEdges={initialEdges}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', initialEdges);
+  });
+});
+
+const HookHelperComponent = ({ onChange }: { onChange: (edges: Edge[]) => void }) => {
+  const edges = useEdges();
+
+  useEffect(() => {
+    onChange(edges);
+  }, [edges]);
+
+  return null;
+};
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { ReactFlow, Node, useNodes } from '@xyflow/react';
+
+import { nodes } from '../../fixtures/simpleflow';
+
+const nodeDimensions = {
+  width: 100,
+  height: 50,
+};
+
+const initialNodes: Node[] = nodes.map((n) => ({
+  ...n,
+  style: nodeDimensions,
+}));
+
+const expectedNodes: Node[] = initialNodes.map((n) => ({
+  ...n,
+  positionAbsolute: n.position,
+  ...nodeDimensions,
+}));
+
+describe('useNodes.cy.tsx', () => {
+  it('handles nodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow nodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+
+  it('handles defaultNodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+});
+
+const HookHelperComponent = ({ onChange }: { onChange: (nodes: Node[]) => void }) => {
+  const nodes = useNodes();
+
+  useEffect(() => {
+    onChange(nodes);
+  }, [nodes]);
+
+  return null;
+};
@@ -0,0 +1,68 @@
+import { ReactFlow, useNodesInitialized } from '@xyflow/react';
+
+import { nodes } from '../../fixtures/simpleflow';
+import ControlledFlow from '../../support/ControlledFlow';
+
+describe('useNodesInitialized.cy.tsx', () => {
+  it('returns false for no nodes', () => {
+    const initSpy = cy.spy().as('initSpy');
+
+    cy.mount(
+      <ReactFlow nodes={[]}>
+        <HookHelperComponent onChange={initSpy} />
+      </ReactFlow>
+    );
+
+    // cy.get('@initSpy').should('to.be.calledOnce');
+    cy.get('@initSpy').should('have.been.calledWith', false);
+  });
+
+  it('returns false without onNodesChange', () => {
+    const initSpy = cy.spy().as('initSpy');
+
+    cy.mount(
+      <ReactFlow nodes={nodes}>
+        <HookHelperComponent onChange={initSpy} />
+      </ReactFlow>
+    );
+
+    // cy.get('@initSpy').should('to.be.calledOnce');
+    cy.get('@initSpy').should('have.be.calledWith', false);
+  });
+
+  it('returns true for defaultNodes', () => {
+    const initSpy = cy.spy().as('initSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={nodes}>
+        <HookHelperComponent onChange={initSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@initSpy').should('have.been.calledWith', false);
+    cy.get('@initSpy').should('have.been.calledWith', true);
+  });
+
+  it('returns true for nodes + onNodesChange', () => {
+    const initSpy = cy.spy().as('initSpy');
+
+    cy.mount(
+      <ControlledFlow initialNodes={nodes}>
+        <HookHelperComponent onChange={initSpy} />
+      </ControlledFlow>
+    );
+
+    cy.get('@initSpy').should('have.been.calledWith', false);
+    cy.get('@initSpy').should('have.been.calledWith', true);
+  });
+});
+
+// test specific helpers
+
+function HookHelperComponent({ onChange }: { onChange: (init: boolean) => void }) {
+  const initialized = useNodesInitialized();
+
+  onChange(initialized);
+
+  return null;
+}
@@ -0,0 +1,96 @@
+import { ReactFlow, useOnViewportChange, Viewport } from '@xyflow/react';
+
+describe('useOnViewportChange.cy.tsx', () => {
+  it('listen to viewport drag', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.dragPane({ from: { x: 50, y: 50 }, to: { x: 50, y: 100 } }).then(() => {
+      cy.get('@onStartSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+      cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 50, zoom: 1 });
+      cy.get('@onEndSpy').should('have.been.calledWith', { x: 0, y: 50, zoom: 1 });
+    });
+  });
+
+  it('handles zoom in', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(-200).then(() => {
+      cy.get('@onStartSpy').should('have.been.callCount', 1);
+      cy.get('@onChangeSpy').should('have.been.callCount', 1);
+      cy.get('@onEndSpy').should('have.been.callCount', 1);
+
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.gt(1);
+    });
+  });
+
+  it('handles zoom out', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(200).then(() => {
+      cy.get('@onStartSpy').should('have.been.callCount', 1);
+      cy.get('@onChangeSpy').should('have.been.callCount', 1);
+      cy.get('@onEndSpy').should('have.been.callCount', 1);
+
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.lt(1);
+    });
+  });
+
+  it('handles default viewport', () => {
+    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
+    const onStartSpy = cy.spy().as('onStartSpy');
+
+    cy.mount(
+      <ReactFlow defaultViewport={defaultViewport}>
+        <HookHelperComponent onStart={onStartSpy} />
+      </ReactFlow>
+    );
+
+    cy.dragPane({ from: { x: 50, y: 50 }, to: { x: 50, y: 100 } }).then(() => {
+      cy.get('@onStartSpy').should('have.been.calledWith', defaultViewport);
+    });
+  });
+});
+
+// test specific helpers
+
+function HookHelperComponent({
+  onStart,
+  onChange,
+  onEnd,
+}: {
+  onStart?: (viewport: Viewport) => void;
+  onChange?: (viewport: Viewport) => void;
+  onEnd?: (viewport: Viewport) => void;
+}) {
+  useOnViewportChange({ onStart, onChange, onEnd });
+
+  return null;
+}
+
+function getLatestViewport(onChangeSpy: any) {
+  return onChangeSpy.lastCall.args[0] as unknown as Viewport;
+}
@@ -0,0 +1,79 @@
+import { ReactFlow, useViewport, Viewport } from '@xyflow/react';
+
+describe('useViewport.cy.tsx', () => {
+  it('handles drag', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+
+    cy.dragPane({ from: { x: 50, y: 0 }, to: { x: 50, y: 400 } }).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+
+      expect(getLatestViewport(onChangeSpy)).to.eql({ x: 0, y: 400, zoom: 1 });
+    });
+  });
+
+  it('handles zoom in', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(-200).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.gt(1);
+    });
+  });
+
+  it('handles zoom out', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(200).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.lt(1);
+    });
+  });
+
+  it('handles default viewport', () => {
+    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultViewport={defaultViewport}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', defaultViewport);
+  });
+});
+
+// test specific helpers
+
+function HookHelperComponent({ onChange }: { onChange: (vp: Viewport) => void }) {
+  const viewport = useViewport();
+
+  onChange(viewport);
+
+  return null;
+}
+
+function getLatestViewport(onChangeSpy: any) {
+  return onChangeSpy.lastCall.args[0] as unknown as Viewport;
+}