From b55084d96b6cd37adf17e5364d88c489fb686898 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 17 Dec 2024 15:46:32 +0200
Subject: [PATCH] test: add test to make sure connection line becomes visible

---
 .../elements/edges/CanvasConnectionLine.test.ts  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.test.ts b/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.test.ts
index 8b99a45090e37..85d8771109516 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.test.ts
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasConnectionLine.test.ts
@@ -5,6 +5,7 @@ import { setActivePinia } from 'pinia';
 import type { ConnectionLineProps } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
 import { createCanvasProvide } from '@/__tests__/data';
+import { waitFor } from '@testing-library/vue';
 
 const DEFAULT_PROPS = {
 	sourceX: 0,
@@ -63,4 +64,19 @@ describe('CanvasConnectionLine', () => {
 			'M-50 130L-90 130L -124,130Q -140,130 -140,114L -140,-84Q -140,-100 -124,-100L-100 -100',
 		);
 	});
+
+	it('should show the connection line after a short delay', async () => {
+		vi.useFakeTimers();
+		const { container } = renderComponent({
+			props: DEFAULT_PROPS,
+		});
+
+		const edge = container.querySelector('.vue-flow__edge-path');
+
+		expect(edge).not.toHaveClass('visible');
+
+		vi.advanceTimersByTime(300);
+
+		await waitFor(() => expect(edge).toHaveClass('visible'));
+	});
 });