implemented generic tests for config based test flow creation
This commit is contained in:
Peter
@@ -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;
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import type { NodeProps } from '@xyflow/svelte';
|
||||
|
||||
type $$Props = NodeProps;
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="drag-handle custom-drag-handle" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.drag-handle {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user