test(props): add tests for basic props
This commit is contained in:
moklick
@@ -0,0 +1,255 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import {
|
||||
ReactFlow,
|
||||
Node,
|
||||
Edge,
|
||||
NodeChange,
|
||||
EdgeChange,
|
||||
applyNodeChanges,
|
||||
applyEdgeChanges,
|
||||
Connection,
|
||||
addEdge,
|
||||
ReactFlowProps,
|
||||
EdgeProps,
|
||||
} from '@react-flow/bundle';
|
||||
|
||||
import * as simpleflow from '../../fixtures/simpleflow';
|
||||
|
||||
describe('<ReactFlow />: Basic Props', () => {
|
||||
describe('uses defaultNodes and defaultEdges', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<ReactFlow defaultNodes={simpleflow.nodes} defaultEdges={simpleflow.edges} />);
|
||||
});
|
||||
|
||||
it('mounts nodes and edges', () => {
|
||||
cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
|
||||
});
|
||||
|
||||
it('drags a node', () => {
|
||||
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
|
||||
|
||||
cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
|
||||
const styleAfterDrag = $el.css('transform');
|
||||
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses nodes and edges', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<Comp initialNodes={simpleflow.nodes} initialEdges={simpleflow.edges} />);
|
||||
});
|
||||
|
||||
it('mounts nodes and edges', () => {
|
||||
cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
|
||||
});
|
||||
|
||||
it('can not drag a node', () => {
|
||||
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
|
||||
|
||||
cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
|
||||
const styleAfterDrag = $el.css('transform');
|
||||
expect(styleBeforeDrag).to.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses onNodesChange handler', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<Comp addOnNodeChangeHandler initialNodes={simpleflow.nodes} />);
|
||||
});
|
||||
|
||||
it('mounts nodes', () => {
|
||||
cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', 0);
|
||||
});
|
||||
|
||||
it('drags a node', () => {
|
||||
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
|
||||
|
||||
cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
|
||||
const styleAfterDrag = $el.css('transform');
|
||||
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
|
||||
it('can not connect nodes', () => {
|
||||
cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
|
||||
|
||||
cy.get('.react-flow__node')
|
||||
.last()
|
||||
.find('.react-flow__handle.target')
|
||||
.trigger('mousemove')
|
||||
.trigger('mouseup', { force: true });
|
||||
|
||||
cy.get('.react-flow__edge').should('have.length', 0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses onEdgeChange handler', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<Comp addOnEdgeChangeHandler initialNodes={simpleflow.nodes} initialEdges={simpleflow.edges} />);
|
||||
});
|
||||
|
||||
it('mounts nodes and edges', () => {
|
||||
cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
|
||||
});
|
||||
|
||||
it('selects an edge', () => {
|
||||
cy.get('.react-flow__edge').first().click().should('have.class', 'selected');
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses onConnect handlers', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<Comp addOnConnectHandler initialNodes={simpleflow.nodes} />);
|
||||
});
|
||||
|
||||
it('mounts nodes', () => {
|
||||
cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', 0);
|
||||
});
|
||||
|
||||
it('connects nodes', () => {
|
||||
cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
|
||||
|
||||
cy.get('.react-flow__node')
|
||||
.last()
|
||||
.find('.react-flow__handle.target')
|
||||
.trigger('mousemove')
|
||||
.trigger('mouseup', { force: true });
|
||||
|
||||
cy.get('.react-flow__edge').should('have.length', 1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses nodeTypes', () => {
|
||||
it('renders custom nodes', () => {
|
||||
const nodeTypes = {
|
||||
custom: () => <div className="customnode">custom node</div>,
|
||||
};
|
||||
|
||||
const initialNodes = simpleflow.nodes.map((n) => ({
|
||||
...n,
|
||||
type: 'custom',
|
||||
}));
|
||||
|
||||
cy.mount(<Comp nodeTypes={nodeTypes} initialNodes={initialNodes} />);
|
||||
|
||||
cy.get('.react-flow__node-custom').should('have.length', simpleflow.nodes.length);
|
||||
cy.get('.react-flow').contains('custom node');
|
||||
});
|
||||
|
||||
it('tries invalid node type - should fallback to default', () => {
|
||||
const initialNodes = simpleflow.nodes.map((n) => ({
|
||||
...n,
|
||||
type: 'invalid',
|
||||
}));
|
||||
|
||||
cy.mount(<Comp initialNodes={initialNodes} />);
|
||||
|
||||
cy.get('.react-flow__node-invalid').should('have.length', 0);
|
||||
cy.get('.react-flow__node-default').should('have.length', simpleflow.nodes.length);
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses edgeTypes', () => {
|
||||
it('renders custom edge', () => {
|
||||
const edgeTypes = {
|
||||
custom: ({ sourceX, sourceY, targetX, targetY }: EdgeProps) => (
|
||||
<path d={`M${sourceX} ${sourceY} L${targetX} ${targetY}`} stroke="black" />
|
||||
),
|
||||
};
|
||||
|
||||
const initialEdges = simpleflow.edges.map((e) => ({
|
||||
...e,
|
||||
type: 'custom',
|
||||
}));
|
||||
|
||||
cy.mount(<Comp edgeTypes={edgeTypes} initialNodes={simpleflow.nodes} initialEdges={initialEdges} />);
|
||||
|
||||
cy.get('.react-flow__edge-custom').should('have.length', simpleflow.edges.length);
|
||||
});
|
||||
|
||||
it('tries invalid edge type - should fallback to default', () => {
|
||||
const initialEdges = simpleflow.edges.map((e) => ({
|
||||
...e,
|
||||
type: 'invalid',
|
||||
}));
|
||||
|
||||
cy.mount(<Comp initialNodes={simpleflow.nodes} initialEdges={initialEdges} />);
|
||||
|
||||
cy.get('.react-flow__edge-invalid').should('have.length', 0);
|
||||
cy.get('.react-flow__edge-default').should('have.length', simpleflow.edges.length);
|
||||
});
|
||||
});
|
||||
|
||||
it('uses style', () => {
|
||||
const styles = {
|
||||
backgroundColor: 'red',
|
||||
};
|
||||
|
||||
cy.mount(<Comp style={styles} />);
|
||||
cy.get('.react-flow').should('have.css', 'background-color', 'rgb(255, 0, 0)');
|
||||
});
|
||||
|
||||
it('uses classname', () => {
|
||||
cy.mount(<Comp className="custom" />);
|
||||
cy.get('.react-flow').should('have.class', 'custom');
|
||||
});
|
||||
});
|
||||
|
||||
// test specific helper component
|
||||
|
||||
function Comp({
|
||||
addOnNodeChangeHandler = false,
|
||||
addOnEdgeChangeHandler = false,
|
||||
addOnConnectHandler = false,
|
||||
initialNodes = [],
|
||||
initialEdges = [],
|
||||
...rest
|
||||
}: {
|
||||
initialNodes?: Node[];
|
||||
initialEdges?: Edge[];
|
||||
addOnNodeChangeHandler?: boolean;
|
||||
addOnEdgeChangeHandler?: boolean;
|
||||
addOnConnectHandler?: boolean;
|
||||
} & Partial<ReactFlowProps>) {
|
||||
const [nodes, setNodes] = useState<Node[]>(initialNodes);
|
||||
const [edges, setEdges] = useState<Edge[]>(initialEdges);
|
||||
|
||||
const onNodesChange = useCallback(
|
||||
(changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
|
||||
[setNodes]
|
||||
);
|
||||
|
||||
const onEdgesChange = useCallback(
|
||||
(changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
|
||||
[setEdges]
|
||||
);
|
||||
|
||||
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
|
||||
|
||||
const handlers: {
|
||||
onNodesChange?: (changes: NodeChange[]) => void;
|
||||
onEdgesChange?: (changes: EdgeChange[]) => void;
|
||||
onConnect?: (params: Connection | Edge) => void;
|
||||
} = {};
|
||||
|
||||
if (addOnNodeChangeHandler) {
|
||||
handlers.onNodesChange = onNodesChange;
|
||||
}
|
||||
|
||||
if (addOnEdgeChangeHandler) {
|
||||
handlers.onEdgesChange = onEdgesChange;
|
||||
}
|
||||
|
||||
if (addOnConnectHandler) {
|
||||
handlers.onConnect = onConnect;
|
||||
}
|
||||
|
||||
return <ReactFlow nodes={nodes} edges={edges} {...handlers} {...rest} />;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { ReactFlow } from '@react-flow/bundle';
|
||||
|
||||
import { nodes, edges } from '../../fixtures/simpleflow';
|
||||
|
||||
describe('<ReactFlow />: Uncontrolled Flow', () => {
|
||||
beforeEach(() => {
|
||||
cy.mount(<ReactFlow defaultNodes={nodes} defaultEdges={edges} />);
|
||||
});
|
||||
|
||||
it('mounts nodes and edges', () => {
|
||||
cy.get('.react-flow__node').should('have.length', nodes.length);
|
||||
cy.get('.react-flow__edge').should('have.length', edges.length);
|
||||
});
|
||||
|
||||
it('selects a node', () => {
|
||||
cy.get('.react-flow__node').first().click().should('have.class', 'selected');
|
||||
cy.get('.react-flow__pane').click();
|
||||
cy.get('.react-flow__node').first().should('not.have.class', 'selected');
|
||||
});
|
||||
|
||||
it('drags a node', () => {
|
||||
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
|
||||
|
||||
cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
|
||||
const styleAfterDrag = $el.css('transform');
|
||||
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
|
||||
it('selects an edge', () => {
|
||||
cy.get('.react-flow__edge').first().click().should('have.class', 'selected');
|
||||
cy.get('.react-flow__pane').click();
|
||||
cy.get('.react-flow__edge').first().should('not.have.class', 'selected');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
import { ReactFlow, ReactFlowProps, Viewport, useViewport } from '@react-flow/bundle';
|
||||
|
||||
import * as simpleflow from '../../fixtures/simpleflow';
|
||||
|
||||
const nodesOutsideOfView = [
|
||||
{
|
||||
...simpleflow.nodes[0],
|
||||
position: {
|
||||
x: -500,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
...simpleflow.nodes[1],
|
||||
position: {
|
||||
x: 500,
|
||||
y: 0,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
describe('<ReactFlow />: View Props', () => {
|
||||
it('uses fitView', () => {
|
||||
cy.mount(<Comp nodes={nodesOutsideOfView} fitView minZoom={0.2} />);
|
||||
cy.get('.react-flow__node:first').isWithinViewport();
|
||||
});
|
||||
|
||||
it('uses fitViewOptions', () => {
|
||||
const fitViewOptions = { padding: 0.5 };
|
||||
|
||||
cy.mount(<ReactFlow nodes={[nodesOutsideOfView[0]]} fitView fitViewOptions={fitViewOptions} />).wait(200);
|
||||
cy.get('.react-flow__node:first').isWithinViewport();
|
||||
});
|
||||
|
||||
describe('uses minZoom', () => {
|
||||
it('minZoom: 0.2', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
|
||||
cy.mount(<Comp minZoom={0.2} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(0.2);
|
||||
});
|
||||
});
|
||||
|
||||
it('minZoom: 1', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
|
||||
cy.mount(<Comp minZoom={1} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('sets invalid defaultZoom', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
const defaultViewport = { x: 0, y: 0, zoom: 0.2 };
|
||||
|
||||
cy.mount(<Comp minZoom={1} defaultViewport={defaultViewport} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('uses maxZoom', () => {
|
||||
it('maxZoom: 1', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
|
||||
cy.mount(<Comp maxZoom={1} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(-10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
|
||||
});
|
||||
});
|
||||
|
||||
it('maxZoom: 2', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
|
||||
cy.mount(<Comp maxZoom={2} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(-10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(2);
|
||||
});
|
||||
});
|
||||
|
||||
it('sets invalid defaultZoom', () => {
|
||||
const onChangeSpy = cy.spy().as('onChangeSpy');
|
||||
const defaultViewport = { x: 0, y: 0, zoom: 2 };
|
||||
|
||||
cy.mount(<Comp maxZoom={1.5} defaultViewport={defaultViewport} onChange={onChangeSpy} />);
|
||||
|
||||
cy.zoomPane(-10000).then(() => {
|
||||
expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1.5);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// test specific helpers
|
||||
|
||||
type CompProps = {
|
||||
onChange?: (vp: Viewport) => void;
|
||||
};
|
||||
|
||||
function InnerComp({ onChange }: CompProps) {
|
||||
const viewport = useViewport();
|
||||
|
||||
onChange?.(viewport);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function Comp({ onChange, ...rest }: CompProps & ReactFlowProps) {
|
||||
return (
|
||||
<ReactFlow {...rest}>
|
||||
<InnerComp onChange={onChange} />
|
||||
</ReactFlow>
|
||||
);
|
||||
}
|
||||
|
||||
function getLatestViewport(onChangeSpy: any) {
|
||||
return onChangeSpy.lastCall.args[0] as unknown as Viewport;
|
||||
}
|
||||
Reference in New Issue
Block a user