diff --git a/packages/fossflow-lib/src/components/Label/Label.tsx b/packages/fossflow-lib/src/components/Label/Label.tsx index de2e589d..32a74e75 100644 --- a/packages/fossflow-lib/src/components/Label/Label.tsx +++ b/packages/fossflow-lib/src/components/Label/Label.tsx @@ -39,7 +39,8 @@ export const Label = ({ sx={{ position: 'absolute', top: -labelHeight, - left: -CONNECTOR_DOT_SIZE / 2 + left: -CONNECTOR_DOT_SIZE / 2, + pointerEvents: 'none' }} > { + describe('dotted line', () => { + it('should render dotted line with pointerEvents none to not block clicks', () => { + const { container } = render( + + ); + + // Find the SVG element (the dotted line container) + const svg = container.querySelector('svg'); + expect(svg).toBeTruthy(); + + // Check that the SVG has pointerEvents set to none + const svgStyles = window.getComputedStyle(svg!); + expect(svgStyles.pointerEvents).toBe('none'); + }); + + it('should not render dotted line when labelHeight is 0', () => { + const { container } = render( + + ); + + const svg = container.querySelector('svg'); + expect(svg).toBeNull(); + }); + + it('should not render dotted line when showLine is false', () => { + const { container } = render( + + ); + + const svg = container.querySelector('svg'); + expect(svg).toBeNull(); + }); + + it('should render children correctly', () => { + render( + + ); + + expect(screen.getByTestId('label-content')).toHaveTextContent( + 'Test Label Content' + ); + }); + }); +});