11import { ReactNode } from 'react'
22import { Position } from 'reactflow'
33
4- import { render } from '@testing-library/react'
4+ import { render , RenderOptions } from '@testing-library/react'
55
66import { ConnectionLine } from './ConnectionLine'
77
88const SvgWrapper = ( { children } : { children : ReactNode } ) => < svg > { children } </ svg >
99
10+ const renderInSvg = ( ui : React . ReactElement , options ?: Omit < RenderOptions , 'wrapper' > ) => render ( ui , { wrapper : SvgWrapper , ...options } )
11+
1012// --- Mocks ---
1113let mockConnectionHandleId : string | null = null
1214
@@ -42,72 +44,72 @@ describe('ConnectionLine', () => {
4244 describe ( 'edge label visibility' , ( ) => {
4345 it ( 'should not render edge label for regular nodes' , ( ) => {
4446 mockConnectionHandleId = 'llmAgentflow_output_0'
45- const { queryByTestId } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
47+ const { queryByTestId } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
4648 expect ( queryByTestId ( 'edge-label-renderer' ) ) . not . toBeInTheDocument ( )
4749 } )
4850
4951 it ( 'should render edge label for conditionAgentflow nodes' , ( ) => {
5052 mockConnectionHandleId = 'conditionAgentflow_output-0'
51- const { getByTestId } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
53+ const { getByTestId } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
5254 expect ( getByTestId ( 'edge-label-renderer' ) ) . toBeInTheDocument ( )
5355 } )
5456
5557 it ( 'should render edge label for conditionAgentAgentflow nodes' , ( ) => {
5658 mockConnectionHandleId = 'conditionAgentAgentflow_output-0'
57- const { getByTestId } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
59+ const { getByTestId } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
5860 expect ( getByTestId ( 'edge-label-renderer' ) ) . toBeInTheDocument ( )
5961 } )
6062
6163 it ( 'should render edge label for humanInputAgentflow nodes' , ( ) => {
6264 mockConnectionHandleId = 'humanInputAgentflow_output-0'
63- const { getByTestId } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
65+ const { getByTestId } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
6466 expect ( getByTestId ( 'edge-label-renderer' ) ) . toBeInTheDocument ( )
6567 } )
6668 } )
6769
6870 describe ( 'edge label content' , ( ) => {
6971 it ( 'should show numeric label for condition nodes' , ( ) => {
7072 mockConnectionHandleId = 'conditionAgentflow_output-2'
71- const { getByText } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
73+ const { getByText } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
7274 expect ( getByText ( '2' ) ) . toBeInTheDocument ( )
7375 } )
7476
7577 it ( 'should show "0" when condition handle has no numeric suffix' , ( ) => {
7678 mockConnectionHandleId = 'conditionAgentflow_output-0'
77- const { getByText } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
79+ const { getByText } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
7880 expect ( getByText ( '0' ) ) . toBeInTheDocument ( )
7981 } )
8082
8183 it ( 'should show "proceed" for humanInput first output (index 0)' , ( ) => {
8284 mockConnectionHandleId = 'humanInputAgentflow_output-0'
83- const { getByText } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
85+ const { getByText } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
8486 expect ( getByText ( 'proceed' ) ) . toBeInTheDocument ( )
8587 } )
8688
8789 it ( 'should show "reject" for humanInput second output (index 1)' , ( ) => {
8890 mockConnectionHandleId = 'humanInputAgentflow_output-1'
89- const { getByText } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
91+ const { getByText } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
9092 expect ( getByText ( 'reject' ) ) . toBeInTheDocument ( )
9193 } )
9294
9395 it ( 'should handle NaN suffix by defaulting to "0"' , ( ) => {
9496 mockConnectionHandleId = 'conditionAgentflow_output-notanumber'
95- const { getByText } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
97+ const { getByText } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
9698 expect ( getByText ( '0' ) ) . toBeInTheDocument ( )
9799 } )
98100 } )
99101
100102 describe ( 'edge color' , ( ) => {
101103 it ( 'should use the color from AGENTFLOW_ICONS for known nodes' , ( ) => {
102104 mockConnectionHandleId = 'conditionAgentflow_output-0'
103- const { container } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
105+ const { container } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
104106 const path = container . querySelector ( 'path.animated' )
105107 expect ( path ) . toHaveAttribute ( 'stroke' , '#FF6B6B' )
106108 } )
107109
108110 it ( 'should render path element for any connection' , ( ) => {
109111 mockConnectionHandleId = 'llmAgentflow_output_0'
110- const { container } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
112+ const { container } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
111113 const path = container . querySelector ( 'path.animated' )
112114 expect ( path ) . toBeInTheDocument ( )
113115 expect ( path ) . toHaveAttribute ( 'stroke' , '#45B7D1' )
@@ -116,7 +118,7 @@ describe('ConnectionLine', () => {
116118
117119 it ( 'should handle null connectionHandleId gracefully' , ( ) => {
118120 mockConnectionHandleId = null
119- const { container } = render ( < ConnectionLine { ...defaultProps } /> , { wrapper : SvgWrapper } )
121+ const { container } = renderInSvg ( < ConnectionLine { ...defaultProps } /> )
120122 expect ( container . querySelector ( 'g' ) ) . toBeInTheDocument ( )
121123 } )
122124} )
0 commit comments