update test

Author: aozisik

src/SankeyPanel.test.tsx

@@ -108,14 +108,20 @@ describe('SankeyPanel', () => {
   });
 
   it('should call parseData with correct parameters', () => {
-    render(<SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />);
+    render(
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
+    );
 
     expect(parseData).toHaveBeenCalledWith(mockData, defaultOptions, defaultOptions.monochrome, defaultOptions.color);
   });
 
   it('should pass correct props to Sankey component', () => {
     const { getByTestId } = render(
-      <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
     );
 
     const sankeyMock = getByTestId('sankey-mock');
@@ -127,7 +133,11 @@ describe('SankeyPanel', () => {
 
   it('should handle monochrome option', () => {
     const monochromeOptions = { ...defaultOptions, monochrome: true, color: 'dark-red' };
-    render(<SankeyPanel data={mockData} options={monochromeOptions} width={800} height={600} id="test-panel" />);
+    render(
+      <svg>
+        <SankeyPanel data={mockData} options={monochromeOptions} width={800} height={600} id="test-panel" />
+      </svg>
+    );
 
     expect(parseData).toHaveBeenCalledWith(mockData, monochromeOptions, true, 'dark-red');
   });
@@ -139,25 +149,33 @@ describe('SankeyPanel', () => {
     });
 
     const { container } = render(
-      <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
     );
 
     expect(consoleErrorSpy).toHaveBeenCalledWith('parsing error: ', expect.any(Error));
-    expect(container.querySelector('g')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
 
     consoleErrorSpy.mockRestore();
   });
 
   it('should handle different panel dimensions', () => {
     const { getByTestId, rerender } = render(
-      <SankeyPanel data={mockData} options={defaultOptions} width={400} height={300} id="test-panel" />
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={400} height={300} id="test-panel" />
+      </svg>
     );
 
     let sankeyMock = getByTestId('sankey-mock');
     expect(sankeyMock.getAttribute('data-width')).toBe('400');
     expect(sankeyMock.getAttribute('data-height')).toBe('300');
 
-    rerender(<SankeyPanel data={mockData} options={defaultOptions} width={1200} height={800} id="test-panel" />);
+    rerender(
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={1200} height={800} id="test-panel" />
+      </svg>
+    );
 
     sankeyMock = getByTestId('sankey-mock');
     expect(sankeyMock.getAttribute('data-width')).toBe('1200');
@@ -166,13 +184,19 @@ describe('SankeyPanel', () => {
 
   it('should update when options change', () => {
     const { rerender } = render(
-      <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
     );
 
     expect(parseData).toHaveBeenCalledTimes(1);
 
     const newOptions = { ...defaultOptions, nodeWidth: 50 };
-    rerender(<SankeyPanel data={mockData} options={newOptions} width={800} height={600} id="test-panel" />);
+    rerender(
+      <svg>
+        <SankeyPanel data={mockData} options={newOptions} width={800} height={600} id="test-panel" />
+      </svg>
+    );
 
     expect(parseData).toHaveBeenCalledTimes(2);
   });
@@ -201,14 +225,20 @@ describe('SankeyPanel', () => {
     ]);
 
     const { container } = render(
-      <SankeyPanel data={emptyData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      <svg>
+        <SankeyPanel data={emptyData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
     );
 
-    expect(container.querySelector('g')).toBeInTheDocument();
+    expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
   it('should apply theme text color', () => {
-    render(<SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />);
+    render(
+      <svg>
+        <SankeyPanel data={mockData} options={defaultOptions} width={800} height={600} id="test-panel" />
+      </svg>
+    );
 
     // The component should use theme.colors.text.primary for textColor
     // This is verified by the mock returning '#FFFFFF'
@@ -222,7 +252,11 @@ describe('SankeyPanel', () => {
       nodePadding: 40,
     };
 
-    render(<SankeyPanel data={customOptions} options={customOptions} width={800} height={600} id="test-panel" />);
+    render(
+      <svg>
+        <SankeyPanel data={customOptions} options={customOptions} width={800} height={600} id="test-panel" />
+      </svg>
+    );
 
     expect(parseData).toHaveBeenCalled();
   });