From 6db6d957d3c92cfc6688a14fdf1bf519c3819901 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 13 Nov 2023 11:36:59 +0100 Subject: [PATCH] chore(tests) added README and added plugins to generic tests --- examples/react/src/app.d.ts | 6 +- examples/react/src/generic-tests/Flow.tsx | 11 ++- examples/svelte/src/app.d.ts | 14 +++- .../generic/[topic]/[example]/Flow.svelte | 19 ++++- tests/playwright/README.md | 76 +++++++++++++++++++ 5 files changed, 120 insertions(+), 6 deletions(-) create mode 100644 tests/playwright/README.md diff --git a/examples/react/src/app.d.ts b/examples/react/src/app.d.ts index da7d9f29..3c245231 100644 --- a/examples/react/src/app.d.ts +++ b/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 & { nodes: Node[]; edges: Edge[] }; + panelProps: PanelProps; + backgroundProps: BackgroundProps; + controlsProps: ControlProps; + minimapProps: MiniMapProps; } } diff --git a/examples/react/src/generic-tests/Flow.tsx b/examples/react/src/generic-tests/Flow.tsx index e5c9cd77..97691bd3 100644 --- a/examples/react/src/generic-tests/Flow.tsx +++ b/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 (
- + + {flowConfig.controlsProps && } + {flowConfig.panelProps && } + {flowConfig.minimapProps && } + {flowConfig.backgroundProps && } +
); }; diff --git a/examples/svelte/src/app.d.ts b/examples/svelte/src/app.d.ts index f1252a6d..3e18db2a 100644 --- a/examples/svelte/src/app.d.ts +++ b/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 & { nodes: Node[]; edges: Edge[] }; + panelProps: PanelProps; + backgroundProps: BackgroundProps; + controlsProps: ControlsProps; + minimapProps: MiniMapProps; } } diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte index 44965e2e..279005a0 100644 --- a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte +++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte @@ -1,6 +1,6 @@ - + + {#if flowConfig.panelProps} + + {/if} + {#if flowConfig.minimapProps} + + {/if} + {#if flowConfig.controlsProps} + + {/if} + {#if flowConfig.backgroundProps} + + {/if} + diff --git a/tests/playwright/README.md b/tests/playwright/README.md new file mode 100644 index 00000000..7b705968 --- /dev/null +++ b/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` + +