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' }
]);
let colorMode: ColorMode = $state('system');
let colorMode: ColorMode = $state('light');
</script>
<SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'dark'} fitView>
<SvelteFlow bind:nodes bind:edges {colorMode} colorModeSSR={'light'} fitView>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
<Panel>
<select bind:value={colorMode} data-testid="colormode-select">
<option value="dark">dark</option>
<option value="light">light</option>
<option value="dark">dark</option>
<option value="system">system</option>
</select>
</Panel>

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

@@ -25,7 +25,7 @@
position = Position.Top,
style,
class: className,
isConnectable: isConnectableProp = true,
isConnectable: isConnectableProp,
isConnectableStart = true,
isConnectableEnd = true,
isValidConnection,
@@ -198,7 +198,7 @@
The Handle component is the part of a node that can be used to connect nodes.
-->
<div
data-handleid={handleId ?? 'null'}
data-handleid={handleId}
data-nodeid={nodeId}
data-handlepos={position}
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) {
console.log(edgeParams);
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 }) => {
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 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 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(inputSourceHandle).toBeInViewport();
@@ -189,7 +189,7 @@ test.describe('Nodes', () => {
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"]'));
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(secondOutputHandle).toBeInViewport();
@@ -220,7 +220,7 @@ test.describe('Nodes', () => {
.and(page.locator('[data-nodeid="Node-3"]'))
.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(secondInputHandle).toBeInViewport();
@@ -251,7 +251,7 @@ test.describe('Nodes', () => {
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(notConnectableHandle).toBeInViewport();

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

@@ -6,17 +6,19 @@ test.describe('Props', () => {
test.describe('colorMode', async () => {
test('render default light color mode', async ({ page }) => {
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 }) => {
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 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": "",
"license": "ISC",
"devDependencies": {
"@playwright/test": "^1.49.1",
"@playwright/test": "^1.51.1",
"@types/node": "^20.14.6"
},
"dependencies": {
"@playwright/experimental-ct-react": "^1.49.1",
"@playwright/experimental-ct-react": "^1.51.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"react": "^18.3.1",