ported all test cases from svelte to react
This commit is contained in:
Peter
2
examples/react/src/app.d.ts
vendored
2
examples/react/src/app.d.ts
vendored
@@ -2,6 +2,6 @@ import { Edge, Node, ReactFlowProps } from '@xyflow/react';
|
||||
|
||||
declare global {
|
||||
interface GenericTestCase {
|
||||
reactFlowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
|
||||
flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@ type FlowProps = {
|
||||
};
|
||||
|
||||
export default ({ generics }: FlowProps) => {
|
||||
const [nodes, setNodes] = useState(generics.reactFlowProps.nodes);
|
||||
const [edges, setEdges] = useState(generics.reactFlowProps.edges);
|
||||
const [nodes, setNodes] = useState(generics.flowProps.nodes);
|
||||
const [edges, setEdges] = useState(generics.flowProps.edges);
|
||||
|
||||
const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
|
||||
const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
|
||||
@@ -15,7 +15,7 @@ export default ({ generics }: FlowProps) => {
|
||||
return (
|
||||
<div style={{ height: '100%' }}>
|
||||
<ReactFlow
|
||||
{...generics.reactFlowProps}
|
||||
{...generics.flowProps}
|
||||
nodes={nodes}
|
||||
onNodesChange={onNodesChange}
|
||||
edges={edges}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { MarkerType } from '@xyflow/react';
|
||||
|
||||
export default {
|
||||
reactFlowProps: {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
export default () => {
|
||||
return (
|
||||
<div
|
||||
className="container"
|
||||
style={{
|
||||
width: '100px',
|
||||
height: '50px',
|
||||
background: 'red',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="drag-handle custom-drag-handle"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '25px',
|
||||
height: '25px',
|
||||
backgroundColor: 'green',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +1,91 @@
|
||||
export default {};
|
||||
import DragHandleNode from './components/DragHandleNode';
|
||||
|
||||
export default {
|
||||
flowProps: {
|
||||
fitView: true,
|
||||
nodeTypes: {
|
||||
DragHandleNode,
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
id: 'Node-1',
|
||||
data: { label: 'Node-1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
className: 'playwright-test-class-123',
|
||||
style: { backgroundColor: 'red' },
|
||||
},
|
||||
{
|
||||
id: 'Node-2',
|
||||
type: 'output',
|
||||
data: { label: 'Node-2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: 'Node-3',
|
||||
data: { label: 'Node-3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: 'Node-4',
|
||||
data: { label: 'Node-4' },
|
||||
position: { x: 0, y: 200 },
|
||||
type: 'output',
|
||||
},
|
||||
{
|
||||
id: 'drag-handle',
|
||||
data: { label: 'Drag Handle' },
|
||||
position: { x: 200, y: 0 },
|
||||
type: 'DragHandleNode',
|
||||
dragHandle: '.custom-drag-handle',
|
||||
},
|
||||
{
|
||||
id: 'notConnectable',
|
||||
type: 'output',
|
||||
data: { label: 'notConnectable' },
|
||||
position: { x: 0, y: 300 },
|
||||
connectable: false,
|
||||
},
|
||||
{
|
||||
id: 'notDraggable',
|
||||
data: { label: 'notDraggable' },
|
||||
position: { x: 0, y: 400 },
|
||||
draggable: false,
|
||||
},
|
||||
{
|
||||
id: 'notSelectable',
|
||||
data: { label: 'notSelectable' },
|
||||
position: { x: 0, y: 500 },
|
||||
selectable: false,
|
||||
},
|
||||
{
|
||||
id: 'notDeletable',
|
||||
data: { label: 'notDeletable' },
|
||||
position: { x: 0, y: 600 },
|
||||
deletable: false,
|
||||
},
|
||||
{
|
||||
id: 'hidden',
|
||||
data: { label: 'hidden' },
|
||||
position: { x: 0, y: 700 },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-2',
|
||||
label: 'edge',
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'default',
|
||||
source: 'Node-1',
|
||||
target: 'Node-3',
|
||||
label: 'edge',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
|
||||
37
examples/react/src/generic-tests/pane/general.ts
Normal file
37
examples/react/src/generic-tests/pane/general.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
minZoom: 0.25,
|
||||
maxZoom: 4,
|
||||
fitView: true,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2',
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
38
examples/react/src/generic-tests/pane/non-defaults.ts
Normal file
38
examples/react/src/generic-tests/pane/non-defaults.ts
Normal file
@@ -0,0 +1,38 @@
|
||||
export default {
|
||||
flowProps: {
|
||||
panOnScroll: true,
|
||||
initialViewport: { x: 1.23, y: 9.87, zoom: 1.234 },
|
||||
autoPanOnConnect: false,
|
||||
autoPanOnNodeDrag: false,
|
||||
nodes: [
|
||||
{
|
||||
id: '1',
|
||||
data: { label: '1' },
|
||||
position: { x: 0, y: 0 },
|
||||
type: 'input',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
data: { label: '2' },
|
||||
position: { x: -100, y: 100 },
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
data: { label: '3' },
|
||||
position: { x: 100, y: 100 },
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: 'first-edge',
|
||||
source: '1',
|
||||
target: '2',
|
||||
},
|
||||
{
|
||||
id: 'second-edge',
|
||||
source: '1',
|
||||
target: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
} satisfies GenericTestCase;
|
||||
@@ -13,7 +13,7 @@ test.describe('EDGES', () => {
|
||||
|
||||
test.describe('selection', () => {
|
||||
test('selecting an edge by click', async ({ page }) => {
|
||||
const edge = page.locator('.svelte-flow__edge').and(page.locator('[data-id="edge-with-class"]'));
|
||||
const edge = page.locator(`${FRAMEWORK}.-flow__edge`).and(page.locator('[data-id="edge-with-class"]'));
|
||||
|
||||
await expect(edge).toBeAttached();
|
||||
await edge.click();
|
||||
|
||||
@@ -122,7 +122,7 @@ test.describe('PANE DEFAULT', () => {
|
||||
|
||||
test('autoPanOnConnect works as intended', async ({ page }) => {
|
||||
const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
|
||||
const handle = page.locator('[data-id="1"] .svelte-flow__handle');
|
||||
const handle = page.locator(`[data-id="1"] .${FRAMEWORK}-flow__handle`);
|
||||
|
||||
await expect(handle).toBeAttached();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user