chore(tests) added README and added plugins to generic tests

examples/react/src/app.d.ts

@@ -1,7 +1,11 @@
-import { Edge, Node, ReactFlowProps } from '@xyflow/react';
+import { BackgroundProps, ControlProps, Edge, MiniMapProps, Node, PanelProps, ReactFlowProps } from '@xyflow/react';
 
 declare global {
   interface FlowConfig {
     flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
+    panelProps: PanelProps;
+    backgroundProps: BackgroundProps;
+    controlsProps: ControlProps;
+    minimapProps: MiniMapProps;
   }
 }

examples/react/src/generic-tests/Flow.tsx

@@ -7,6 +7,10 @@ import {
   OnNodesChange,
   OnEdgesChange,
   OnConnect,
+  Controls,
+  Panel,
+  MiniMap,
+  Background,
 } from '@xyflow/react';
 
 type FlowProps = {
@@ -24,7 +28,12 @@ export default ({ flowConfig }: FlowProps) => {
 
   return (
     <div style={{ height: '100%' }}>
-      <ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />
+      <ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect}>
+        {flowConfig.controlsProps && <Controls {...flowConfig.controlsProps} />}
+        {flowConfig.panelProps && <Panel {...flowConfig.panelProps} />}
+        {flowConfig.minimapProps && <MiniMap {...flowConfig.minimapProps} />}
+        {flowConfig.backgroundProps && <Background {...flowConfig.backgroundProps} />}
+      </ReactFlow>
     </div>
   );
 };

examples/svelte/src/app.d.ts

@@ -1,6 +1,14 @@
 // See https://kit.svelte.dev/docs/types#app
 
-import type { Edge, Node, SvelteFlowProps } from '@xyflow/svelte';
+import type {
+	BackgroundProps,
+	Edge,
+	MiniMap,
+	MiniMapProps,
+	Node,
+	PanelProps,
+	SvelteFlowProps
+} from '@xyflow/svelte';
 
 // for information about these interfaces
 declare global {
@@ -13,6 +21,10 @@ declare global {
 
 	interface FlowConfig {
 		flowProps: Omit<SvelteFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
+		panelProps: PanelProps;
+		backgroundProps: BackgroundProps;
+		controlsProps: ControlsProps;
+		minimapProps: MiniMapProps;
 	}
 }
 

examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
-	import { SvelteFlow } from '@xyflow/svelte';
+	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -10,7 +10,20 @@
 	const nodes = writable(flowConfig.flowProps.nodes);
 	const edges = writable(flowConfig.flowProps.edges);
 
-	const props = { ...flowConfig.flowProps, nodes, edges };
+	const flowProps = { ...flowConfig.flowProps, nodes, edges };
 </script>
 
-<SvelteFlow {...props} />
+<SvelteFlow {...flowProps}>
+	{#if flowConfig.panelProps}
+		<Panel {...flowConfig.panelProps} />
+	{/if}
+	{#if flowConfig.minimapProps}
+		<MiniMap {...flowConfig.minimapProps} />
+	{/if}
+	{#if flowConfig.controlsProps}
+		<Controls {...flowConfig.controlsProps} />
+	{/if}
+	{#if flowConfig.backgroundProps}
+		<Background {...flowConfig.backgroundProps} />
+	{/if}
+</SvelteFlow>

tests/playwright/README.md

@@ -0,0 +1,76 @@
+# End-to-End with Playwright
+Here you can find our framework independant E2E tests written with [playwright](https://playwright.dev/).
+
+## Installation
+```bash
+cd tests/playwright # check if you are in the correct directory 
+
+pnpm install # install node dependencies
+npx playwright install # follow the instructions to install browsers
+```
+
+## Running the tests
+```bash
+pnpm run test:react # runs all the tests headless for react
+pnpm run test:react:ui # runs tests for react in UI mode, good for debugging
+
+pnpm run test:svelte # runs all the tests headless for svelte
+pnpm run test:svelte:ui # runs tests for svelte in UI mode, good for debugging 
+```
+
+## Creating new tests
+You can find all test implementations in the respective example projects under `/examples/react` and `/examples/svelte`. These example projects are also used for active development, so you can ignore most of the code in them. 
+
+### Create new example or use an existing one
+You will find all of the flows currently implemented for E2E testing at `/examples/{framework}/src/generic-tests`. Here you can create a new flow you want to write you test on by creating a new file and defining all of the props that will be applied to the components like this:
+```javascript
+// NewFolder/NewTest.ts
+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',
+      },
+    ],
+  },
+  backgroundProps: { /*... */},
+  panelProps: { /*... */},
+  minimapProps:  { /*... */},
+  controlsProps:  { /*... */},
+} satisfies FlowConfig;
+```
+
+:warning: The directory and filename you choose will determine the route of the test case. Here it will reachable under `http://localhost:3000/tests/generic/newDirectory/newTest`. (3000 is the port of the react examples, it might differ for other frameworks)
+
+### Create new E2E test case
+Now you can start writing you new test case under `/tests/playwright/e2e`
+
+