alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented generic tests for config based test flow creation

Browse Source
This commit is contained in:
Peter
2023-11-07 13:04:44 +01:00
parent 57e6e389c9
commit 3676670c44
20 changed files with 375 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/svelte/src/app.d.ts
Vendored
+7
View File
@@ -1,4 +1,7 @@
// See https://kit.svelte.dev/docs/types#app // See https://kit.svelte.dev/docs/types#app
import type { Edge, Node, SvelteFlowProps } from '@xyflow/svelte';
// for information about these interfaces // for information about these interfaces
declare global { declare global {
namespace App { namespace App {
@@ -7,6 +10,10 @@ declare global {
// interface PageData {} // interface PageData {}
// interface Platform {} // interface Platform {}
} }
interface GenericTestCase {
svelteFlowProps: Omit<SvelteFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
}
} }
export {}; export {};
examples/svelte/src/generic-tests/edges/general.ts
+161
View File
@@ -0,0 +1,161 @@
import { MarkerType } from '@xyflow/svelte';
export default {
svelteFlowProps: {
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 }
},
{
id: '4',
data: { label: '4' },
position: { x: -100, y: 200 }
},
{
id: '5',
data: { label: '5' },
position: { x: 100, y: 200 }
},
{
id: '6',
data: { label: '6' },
position: { x: -100, y: 300 }
},
{
id: '7',
data: { label: '7' },
position: { x: 100, y: 300 }
},
{
id: '8',
data: { label: '8' },
position: { x: -100, y: 400 }
},
{
id: '9',
data: { label: '9' },
position: { x: 100, y: 400 }
},
{
id: '10',
data: { label: '10' },
position: { x: -100, y: 500 }
},
{
id: '11',
data: { label: '11' },
position: { x: 100, y: 500 }
}
// {
// id: '12',
// data: { label: '12' },
// position: { x: -100, y: 600 }
// },
// {
// id: '13',
// data: { label: '13' },
// position: { x: 100, y: 600 }
// }
],
edges: [
{
id: 'edge-with-class',
source: '1',
target: '2',
class: 'edge-class-test'
},
{
id: 'edge-with-style',
source: '1',
target: '3',
style: 'stroke: red;'
},
{
id: 'hidden-edge',
source: '2',
target: '4',
label: 'hidden',
hidden: true
},
{
id: 'animated-edge',
source: '3',
target: '5',
label: 'animated',
animated: true
},
{
id: 'not-selectable-edge',
source: '4',
target: '6',
label: 'not-selectable',
selectable: false
},
{
id: 'not-deletable',
source: '5',
target: '7',
label: 'not-deletable',
deletable: false
},
{
id: 'z-index',
source: '6',
target: '8',
label: 'z-index',
zIndex: 3141592
},
{
id: 'aria-label',
source: '7',
target: '9',
label: 'aria-label',
ariaLabel: 'aria-label-test'
},
{
id: 'interaction-width',
source: '8',
target: '10',
label: 'interaction-width',
interactionWidth: 42
},
{
id: 'markers',
source: '9',
target: '11',
label: 'markers',
markerEnd: { type: MarkerType.Arrow },
markerStart: { type: MarkerType.ArrowClosed }
}
// {
// id: 'updatable',
// source: '9',
// target: '11',
// label: 'focusable',
// updatable: true
// },
// {
// id: 'not-focusable',
//
// source: '5',
// target: '7',
// label: 'not-focusable',
// focusable: false
// },
]
}
} satisfies GenericTestCase;
examples/svelte/src/routes/tests/nodes/DragHandleNode.svelte → examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte
View File
examples/svelte/src/generic-tests/nodes/general.ts
+91
View File
@@ -0,0 +1,91 @@
import DragHandleNode from './components/DragHandleNode.svelte';
export default {
svelteFlowProps: {
fitView: true,
nodeTypes: {
DragHandleNode
},
nodes: [
{
id: 'Node-1',
data: { label: 'Node-1' },
position: { x: 0, y: 0 },
type: 'input',
class: 'playwright-test-class-123',
style: 'background-color: 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;
examples/svelte/src/generic-tests/pane/general.ts
+37
View File
@@ -0,0 +1,37 @@
export default {
svelteFlowProps: {
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;
examples/svelte/src/generic-tests/pane/non-defaults.ts
+38
View File
@@ -0,0 +1,38 @@
export default {
svelteFlowProps: {
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;
examples/svelte/src/routes/tests/edges/Flow.svelte
-12
View File
@@ -1,12 +0,0 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { initialNodes, initialEdges } from './nodesAndEdges';
import { SvelteFlow } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable(initialNodes);
const edges = writable(initialEdges);
</script>
<SvelteFlow {nodes} {edges} fitView />
examples/svelte/src/routes/tests/edges/nodesAndEdges.ts
-157
View File
@@ -1,157 +0,0 @@
import { MarkerType, type Edge, type Node } from '@xyflow/svelte';
export const initialNodes: Node[] = [
{
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 }
},
{
id: '4',
data: { label: '4' },
position: { x: -100, y: 200 }
},
{
id: '5',
data: { label: '5' },
position: { x: 100, y: 200 }
},
{
id: '6',
data: { label: '6' },
position: { x: -100, y: 300 }
},
{
id: '7',
data: { label: '7' },
position: { x: 100, y: 300 }
},
{
id: '8',
data: { label: '8' },
position: { x: -100, y: 400 }
},
{
id: '9',
data: { label: '9' },
position: { x: 100, y: 400 }
},
{
id: '10',
data: { label: '10' },
position: { x: -100, y: 500 }
},
{
id: '11',
data: { label: '11' },
position: { x: 100, y: 500 }
}
// {
// id: '12',
// data: { label: '12' },
// position: { x: -100, y: 600 }
// },
// {
// id: '13',
// data: { label: '13' },
// position: { x: 100, y: 600 }
// }
];
export const initialEdges: Edge[] = [
{
id: 'edge-with-class',
source: '1',
target: '2',
class: 'edge-class-test'
},
{
id: 'edge-with-style',
source: '1',
target: '3',
style: 'stroke: red;'
},
{
id: 'hidden-edge',
source: '2',
target: '4',
label: 'hidden',
hidden: true
},
{
id: 'animated-edge',
source: '3',
target: '5',
label: 'animated',
animated: true
},
{
id: 'not-selectable-edge',
source: '4',
target: '6',
label: 'not-selectable',
selectable: false
},
{
id: 'not-deletable',
source: '5',
target: '7',
label: 'not-deletable',
deletable: false
},
{
id: 'z-index',
source: '6',
target: '8',
label: 'z-index',
zIndex: 3141592
},
{
id: 'aria-label',
source: '7',
target: '9',
label: 'aria-label',
ariaLabel: 'aria-label-test'
},
{
id: 'interaction-width',
source: '8',
target: '10',
label: 'interaction-width',
interactionWidth: 42
},
{
id: 'markers',
source: '9',
target: '11',
label: 'markers',
markerEnd: { type: MarkerType.Arrow },
markerStart: { type: MarkerType.ArrowClosed }
}
// {
// id: 'updatable',
// source: '9',
// target: '11',
// label: 'focusable',
// updatable: true
// },
// {
// id: 'not-focusable',
//
// source: '5',
// target: '7',
// label: 'not-focusable',
// focusable: false
// },
];
examples/svelte/src/routes/tests/edges/+page.svelte → examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte
+3 -1
View File
@@ -2,8 +2,10 @@
import { SvelteFlowProvider } from '@xyflow/svelte'; import { SvelteFlowProvider } from '@xyflow/svelte';
import Flow from './Flow.svelte'; import Flow from './Flow.svelte';
export let data;
</script> </script>
<SvelteFlowProvider> <SvelteFlowProvider>
<Flow /> <Flow generic={data.generic} />
</SvelteFlowProvider> </SvelteFlowProvider>
examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.ts
+22
View File
@@ -0,0 +1,22 @@
import { error } from '@sveltejs/kit';
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
try {
const genericTestCases = import.meta.glob<GenericTestCase>('/src/generic-tests/**/*.ts', {
eager: true,
import: 'default'
});
const generic = genericTestCases[`/src/generic-tests/${params.topic}/${params.example}.ts`];
if (generic) {
return {
generic
};
}
} catch (e) {
console.error(e);
}
throw error(404, 'Not found');
}
examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
+16
View File
@@ -0,0 +1,16 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { SvelteFlow } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
export let generic: GenericTestCase;
// Create writables here so it is easier to create test cases
const nodes = writable(generic.svelteFlowProps.nodes);
const edges = writable(generic.svelteFlowProps.edges);
const svelteFlowPropsWithWritables = { ...generic.svelteFlowProps, nodes, edges };
</script>
<SvelteFlow {...svelteFlowPropsWithWritables} />
examples/svelte/src/routes/tests/nodes/+page.svelte
-9
View File
@@ -1,9 +0,0 @@
<script lang="ts">
import { SvelteFlowProvider } from '@xyflow/svelte';
import Flow from './Flow.svelte';
</script>
<SvelteFlowProvider>
<Flow />
</SvelteFlowProvider>
examples/svelte/src/routes/tests/nodes/Flow.svelte
-18
View File
@@ -1,18 +0,0 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { initialNodes, initialEdges } from './nodesAndEdges';
import { SvelteFlow } from '@xyflow/svelte';
import DragHandleNode from './DragHandleNode.svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable(initialNodes);
const edges = writable(initialEdges);
const nodeTypes = {
DragHandleNode
};
</script>
<SvelteFlow {nodes} {nodeTypes} {edges} fitView />
examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts
-84
View File
@@ -1,84 +0,0 @@
import type { Edge, Node } from '@xyflow/svelte';
export const initialNodes: Node[] = [
{
id: 'Node-1',
data: { label: 'Node-1' },
position: { x: 0, y: 0 },
type: 'input',
class: 'playwright-test-class-123',
style: 'background-color: 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
}
];
export const initialEdges: Edge[] = [
{
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'
}
];
examples/svelte/src/routes/tests/pane/default/+page.svelte
-9
View File
@@ -1,9 +0,0 @@
<script lang="ts">
import { SvelteFlowProvider } from '@xyflow/svelte';
import Flow from './Flow.svelte';
</script>
<SvelteFlowProvider>
<Flow />
</SvelteFlowProvider>
examples/svelte/src/routes/tests/pane/default/Flow.svelte
-12
View File
@@ -1,12 +0,0 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { initialNodes, initialEdges } from './nodesAndEdges';
import { SvelteFlow } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable(initialNodes);
const edges = writable(initialEdges);
</script>
<SvelteFlow {nodes} {edges} fitView minZoom={0.25} maxZoom={4} />
examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts
-33
View File
@@ -1,33 +0,0 @@
import type { Edge, Node } from '@xyflow/svelte';
export const initialNodes: Node[] = [
{
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 }
}
];
export const initialEdges: Edge[] = [
{
id: 'first-edge',
source: '1',
target: '2'
},
{
id: 'second-edge',
source: '1',
target: '3'
}
];
examples/svelte/src/routes/tests/pane/non-default/+page.svelte
-9
View File
@@ -1,9 +0,0 @@
<script lang="ts">
import { SvelteFlowProvider } from '@xyflow/svelte';
import Flow from './Flow.svelte';
</script>
<SvelteFlowProvider>
<Flow />
</SvelteFlowProvider>
examples/svelte/src/routes/tests/pane/non-default/Flow.svelte
-19
View File
@@ -1,19 +0,0 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { initialNodes, initialEdges } from './nodesAndEdges';
import { SvelteFlow } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
const nodes = writable(initialNodes);
const edges = writable(initialEdges);
</script>
<SvelteFlow
{nodes}
{edges}
panOnScroll={true}
initialViewport={{ x: 1.23, y: 9.87, zoom: 1.234 }}
autoPanOnConnect={false}
autoPanOnNodeDrag={false}
/>
examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts
-33
View File
@@ -1,33 +0,0 @@
import type { Edge, Node } from '@xyflow/svelte';
export const initialNodes: Node[] = [
{
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 }
}
];
export const initialEdges: Edge[] = [
{
id: 'first-edge',
source: '1',
target: '2'
},
{
id: 'second-edge',
source: '1',
target: '3'
}
];