From 3676670c4403a63dd4d3d18c2c66e591ff61655b Mon Sep 17 00:00:00 2001 From: Peter Date: Tue, 7 Nov 2023 13:04:44 +0100 Subject: [PATCH] implemented generic tests for config based test flow creation --- examples/svelte/src/app.d.ts | 7 + .../svelte/src/generic-tests/edges/general.ts | 161 ++++++++++++++++++ .../nodes/components}/DragHandleNode.svelte | 0 .../svelte/src/generic-tests/nodes/general.ts | 91 ++++++++++ .../svelte/src/generic-tests/pane/general.ts | 37 ++++ .../src/generic-tests/pane/non-defaults.ts | 38 +++++ .../svelte/src/routes/tests/edges/Flow.svelte | 12 -- .../src/routes/tests/edges/nodesAndEdges.ts | 157 ----------------- .../[topic]/[example]}/+page.svelte | 4 +- .../tests/generic/[topic]/[example]/+page.ts | 22 +++ .../generic/[topic]/[example]/Flow.svelte | 16 ++ .../src/routes/tests/nodes/+page.svelte | 9 - .../svelte/src/routes/tests/nodes/Flow.svelte | 18 -- .../src/routes/tests/nodes/nodesAndEdges.ts | 84 --------- .../routes/tests/pane/default/+page.svelte | 9 - .../src/routes/tests/pane/default/Flow.svelte | 12 -- .../tests/pane/default/nodesAndEdges.ts | 33 ---- .../tests/pane/non-default/+page.svelte | 9 - .../routes/tests/pane/non-default/Flow.svelte | 19 --- .../tests/pane/non-default/nodesAndEdges.ts | 33 ---- 20 files changed, 375 insertions(+), 396 deletions(-) create mode 100644 examples/svelte/src/generic-tests/edges/general.ts rename examples/svelte/src/{routes/tests/nodes => generic-tests/nodes/components}/DragHandleNode.svelte (100%) create mode 100644 examples/svelte/src/generic-tests/nodes/general.ts create mode 100644 examples/svelte/src/generic-tests/pane/general.ts create mode 100644 examples/svelte/src/generic-tests/pane/non-defaults.ts delete mode 100644 examples/svelte/src/routes/tests/edges/Flow.svelte delete mode 100644 examples/svelte/src/routes/tests/edges/nodesAndEdges.ts rename examples/svelte/src/routes/tests/{edges => generic/[topic]/[example]}/+page.svelte (75%) create mode 100644 examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.ts create mode 100644 examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte delete mode 100644 examples/svelte/src/routes/tests/nodes/+page.svelte delete mode 100644 examples/svelte/src/routes/tests/nodes/Flow.svelte delete mode 100644 examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts delete mode 100644 examples/svelte/src/routes/tests/pane/default/+page.svelte delete mode 100644 examples/svelte/src/routes/tests/pane/default/Flow.svelte delete mode 100644 examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts delete mode 100644 examples/svelte/src/routes/tests/pane/non-default/+page.svelte delete mode 100644 examples/svelte/src/routes/tests/pane/non-default/Flow.svelte delete mode 100644 examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts diff --git a/examples/svelte/src/app.d.ts b/examples/svelte/src/app.d.ts index f59b884c..343f3fd6 100644 --- a/examples/svelte/src/app.d.ts +++ b/examples/svelte/src/app.d.ts @@ -1,4 +1,7 @@ // See https://kit.svelte.dev/docs/types#app + +import type { Edge, Node, SvelteFlowProps } from '@xyflow/svelte'; + // for information about these interfaces declare global { namespace App { @@ -7,6 +10,10 @@ declare global { // interface PageData {} // interface Platform {} } + + interface GenericTestCase { + svelteFlowProps: Omit & { nodes: Node[]; edges: Edge[] }; + } } export {}; diff --git a/examples/svelte/src/generic-tests/edges/general.ts b/examples/svelte/src/generic-tests/edges/general.ts new file mode 100644 index 00000000..cc05aada --- /dev/null +++ b/examples/svelte/src/generic-tests/edges/general.ts @@ -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; diff --git a/examples/svelte/src/routes/tests/nodes/DragHandleNode.svelte b/examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte similarity index 100% rename from examples/svelte/src/routes/tests/nodes/DragHandleNode.svelte rename to examples/svelte/src/generic-tests/nodes/components/DragHandleNode.svelte diff --git a/examples/svelte/src/generic-tests/nodes/general.ts b/examples/svelte/src/generic-tests/nodes/general.ts new file mode 100644 index 00000000..b7707a08 --- /dev/null +++ b/examples/svelte/src/generic-tests/nodes/general.ts @@ -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; diff --git a/examples/svelte/src/generic-tests/pane/general.ts b/examples/svelte/src/generic-tests/pane/general.ts new file mode 100644 index 00000000..5caac003 --- /dev/null +++ b/examples/svelte/src/generic-tests/pane/general.ts @@ -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; diff --git a/examples/svelte/src/generic-tests/pane/non-defaults.ts b/examples/svelte/src/generic-tests/pane/non-defaults.ts new file mode 100644 index 00000000..0d17e954 --- /dev/null +++ b/examples/svelte/src/generic-tests/pane/non-defaults.ts @@ -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; diff --git a/examples/svelte/src/routes/tests/edges/Flow.svelte b/examples/svelte/src/routes/tests/edges/Flow.svelte deleted file mode 100644 index 6686c907..00000000 --- a/examples/svelte/src/routes/tests/edges/Flow.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts b/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts deleted file mode 100644 index b5452b8c..00000000 --- a/examples/svelte/src/routes/tests/edges/nodesAndEdges.ts +++ /dev/null @@ -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 - // }, -]; diff --git a/examples/svelte/src/routes/tests/edges/+page.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte similarity index 75% rename from examples/svelte/src/routes/tests/edges/+page.svelte rename to examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte index 12dec33c..2487d85a 100644 --- a/examples/svelte/src/routes/tests/edges/+page.svelte +++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte @@ -2,8 +2,10 @@ import { SvelteFlowProvider } from '@xyflow/svelte'; import Flow from './Flow.svelte'; + + export let data; - + diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.ts b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.ts new file mode 100644 index 00000000..65f62996 --- /dev/null +++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.ts @@ -0,0 +1,22 @@ +import { error } from '@sveltejs/kit'; + +/** @type {import('./$types').PageLoad} */ +export function load({ params }) { + try { + const genericTestCases = import.meta.glob('/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'); +} diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte new file mode 100644 index 00000000..40babf50 --- /dev/null +++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte @@ -0,0 +1,16 @@ + + + diff --git a/examples/svelte/src/routes/tests/nodes/+page.svelte b/examples/svelte/src/routes/tests/nodes/+page.svelte deleted file mode 100644 index 12dec33c..00000000 --- a/examples/svelte/src/routes/tests/nodes/+page.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/examples/svelte/src/routes/tests/nodes/Flow.svelte b/examples/svelte/src/routes/tests/nodes/Flow.svelte deleted file mode 100644 index 6f684cbf..00000000 --- a/examples/svelte/src/routes/tests/nodes/Flow.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts b/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts deleted file mode 100644 index bd382bef..00000000 --- a/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts +++ /dev/null @@ -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' - } -]; diff --git a/examples/svelte/src/routes/tests/pane/default/+page.svelte b/examples/svelte/src/routes/tests/pane/default/+page.svelte deleted file mode 100644 index 12dec33c..00000000 --- a/examples/svelte/src/routes/tests/pane/default/+page.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/examples/svelte/src/routes/tests/pane/default/Flow.svelte b/examples/svelte/src/routes/tests/pane/default/Flow.svelte deleted file mode 100644 index ae2093ed..00000000 --- a/examples/svelte/src/routes/tests/pane/default/Flow.svelte +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts b/examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts deleted file mode 100644 index 7d2e0522..00000000 --- a/examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts +++ /dev/null @@ -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' - } -]; diff --git a/examples/svelte/src/routes/tests/pane/non-default/+page.svelte b/examples/svelte/src/routes/tests/pane/non-default/+page.svelte deleted file mode 100644 index 12dec33c..00000000 --- a/examples/svelte/src/routes/tests/pane/non-default/+page.svelte +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/examples/svelte/src/routes/tests/pane/non-default/Flow.svelte b/examples/svelte/src/routes/tests/pane/non-default/Flow.svelte deleted file mode 100644 index d06a8de3..00000000 --- a/examples/svelte/src/routes/tests/pane/non-default/Flow.svelte +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts b/examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts deleted file mode 100644 index 7d2e0522..00000000 --- a/examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts +++ /dev/null @@ -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' - } -];