implemented generic tests for config based test flow creation
This commit is contained in:
Peter
@@ -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 />
|
||||
@@ -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
|
||||
// },
|
||||
];
|
||||
+3
-1
@@ -2,8 +2,10 @@
|
||||
import { SvelteFlowProvider } from '@xyflow/svelte';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
<Flow generic={data.generic} />
|
||||
</SvelteFlowProvider>
|
||||
@@ -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');
|
||||
}
|
||||
@@ -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} />
|
||||
@@ -1,9 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { SvelteFlowProvider } from '@xyflow/svelte';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
</SvelteFlowProvider>
|
||||
@@ -1,26 +0,0 @@
|
||||
<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>
|
||||
@@ -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 />
|
||||
@@ -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'
|
||||
}
|
||||
];
|
||||
@@ -1,9 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { SvelteFlowProvider } from '@xyflow/svelte';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
</SvelteFlowProvider>
|
||||
@@ -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} />
|
||||
@@ -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'
|
||||
}
|
||||
];
|
||||
@@ -1,9 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { SvelteFlowProvider } from '@xyflow/svelte';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
</SvelteFlowProvider>
|
||||
@@ -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}
|
||||
/>
|
||||
@@ -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'
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user