alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix tests

Browse Source
This commit is contained in:
peterkogo
2025-04-16 17:36:05 +02:00
parent 13fdd15f59
commit 2474c8be14
7 changed files with 746 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/svelte/src/routes/examples/color-mode/+page.svelte
View File

@@ -35,18 +35,18 @@
{ id: 'A-D', source: 'A', target: 'D' } { id: 'A-D', source: 'A', target: 'D' }
]); ]);
let colorMode: ColorMode = $state('system'); let colorMode: ColorMode = $state('light');
</script> </script>
<SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'dark'} fitView> <SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'light'} fitView>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
<MiniMap /> <MiniMap />
<Panel> <Panel>
<select bind:value={colorMode} data-testid="colormode-select"> <select bind:value={colorMode} data-testid="colormode-select">
<option value="dark">dark</option>
<option value="light">light</option> <option value="light">light</option>
<option value="dark">dark</option>
<option value="system">system</option> <option value="system">system</option>
</select> </select>
</Panel> </Panel>

4
packages/svelte/src/lib/components/Handle/Handle.svelte
View File

@@ -25,7 +25,7 @@
position = Position.Top, position = Position.Top,
style, style,
class: className, class: className,
isConnectable: isConnectableProp = true, isConnectable: isConnectableProp,
isConnectableStart = true, isConnectableStart = true,
isConnectableEnd = true, isConnectableEnd = true,
isValidConnection, isValidConnection,
@@ -198,7 +198,7 @@
The Handle component is the part of a node that can be used to connect nodes. The Handle component is the part of a node that can be used to connect nodes.
--> -->
<div <div
data-handleid={handleId ?? 'null'} data-handleid={handleId}
data-nodeid={nodeId} data-nodeid={nodeId}
data-handlepos={position} data-handlepos={position}
data-id="{store.flowId}-{nodeId}-{handleId ?? 'null'}-{type}" data-id="{store.flowId}-{nodeId}-{handleId ?? 'null'}-{type}"

1
packages/svelte/src/lib/store/index.ts
View File

@@ -43,6 +43,7 @@ export function createStore(signals: StoreSignals): SvelteFlowStore {
} }
function addEdge(edgeParams: Edge | Connection) { function addEdge(edgeParams: Edge | Connection) {
console.log(edgeParams);
store.edges = addEdgeUtil(edgeParams, store.edges); store.edges = addEdgeUtil(edgeParams, store.edges);
} }

10
tests/playwright/e2e/nodes.spec.ts
View File

@@ -47,7 +47,7 @@ test.describe('Nodes', () => {
test('selectable=false prevents selection', async ({ page }) => { test('selectable=false prevents selection', async ({ page }) => {
const locator = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="notSelectable"]')); const locator = page.locator(`.${FRAMEWORK}-flow__node`).and(page.locator('[data-id="notSelectable"]'));
await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await locator.click(); await locator.click();
await expect(locator).not.toHaveClass(/selected/); await expect(locator).not.toHaveClass(/selected/);
@@ -165,7 +165,7 @@ test.describe('Nodes', () => {
const outputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-1"]')); const outputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-1"]'));
const inputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]')); const inputSourceHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]'));
await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await expect(outputSourceHandle).toBeInViewport(); await expect(outputSourceHandle).toBeInViewport();
await expect(inputSourceHandle).toBeInViewport(); await expect(inputSourceHandle).toBeInViewport();
@@ -189,7 +189,7 @@ test.describe('Nodes', () => {
const firstOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-2"]')); const firstOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-2"]'));
const secondOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]')); const secondOutputHandle = page.locator(`.${FRAMEWORK}-flow__handle`).and(page.locator('[data-nodeid="Node-4"]'));
await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await expect(firstOutputHandle).toBeInViewport(); await expect(firstOutputHandle).toBeInViewport();
await expect(secondOutputHandle).toBeInViewport(); await expect(secondOutputHandle).toBeInViewport();
@@ -220,7 +220,7 @@ test.describe('Nodes', () => {
.and(page.locator('[data-nodeid="Node-3"]')) .and(page.locator('[data-nodeid="Node-3"]'))
.and(page.locator('.source')); .and(page.locator('.source'));
await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await expect(firstInputHandle).toBeInViewport(); await expect(firstInputHandle).toBeInViewport();
await expect(secondInputHandle).toBeInViewport(); await expect(secondInputHandle).toBeInViewport();
@@ -251,7 +251,7 @@ test.describe('Nodes', () => {
const notConnectableBox = await notConnectableHandle.boundingBox(); const notConnectableBox = await notConnectableHandle.boundingBox();
await expect(page.locator(`.${FRAMEWORK}-flow__nodes`).first()).toHaveCSS('visibility', 'visible'); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await expect(outputHandle).toBeInViewport(); await expect(outputHandle).toBeInViewport();
await expect(notConnectableHandle).toBeInViewport(); await expect(notConnectableHandle).toBeInViewport();

10
tests/playwright/e2e/props.spec.ts
View File

@@ -6,17 +6,19 @@ test.describe('Props', () => {
test.describe('colorMode', async () => { test.describe('colorMode', async () => {
test('render default light color mode', async ({ page }) => { test('render default light color mode', async ({ page }) => {
await page.goto('/examples/color-mode'); await page.goto('/examples/color-mode');
const locator = page.locator(`.${FRAMEWORK}-flow`);
await expect(locator).not.toHaveClass(/dark/); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await expect(page.locator(`.${FRAMEWORK}-flow`)).not.toHaveClass(/dark/);
}); });
test('render dark color mode', async ({ page }) => { test('render dark color mode', async ({ page }) => {
await page.goto('/examples/color-mode'); await page.goto('/examples/color-mode');
const locator = page.locator(`.${FRAMEWORK}-flow`); await expect(page.locator(`.${FRAMEWORK}-flow__node`).first()).toHaveCSS('visibility', 'visible');
await page.getByTestId('colormode-select').selectOption({ label: 'dark' }); await page.getByTestId('colormode-select').selectOption({ label: 'dark' });
await expect(locator).toHaveClass(/dark/); await expect(page.locator(`.${FRAMEWORK}-flow`)).toHaveClass(/dark/);
}); });
}); });
}); });

837
tests/playwright/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
tests/playwright/package.json
View File

@@ -14,11 +14,11 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.49.1", "@playwright/test": "^1.51.1",
"@types/node": "^20.14.6" "@types/node": "^20.14.6"
}, },
"dependencies": { "dependencies": {
"@playwright/experimental-ct-react": "^1.49.1", "@playwright/experimental-ct-react": "^1.51.1",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0", "@types/react-dom": "^18.3.0",
"react": "^18.3.1", "react": "^18.3.1",