Initial tests

src/Line/Line.spec.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Line from './index';
+
+describe('Line', () => {
+    const mockData = [
+        { name: 'Page A', value: 400 },
+        { name: 'Page B', value: 300 },
+        { name: 'Page C', value: 200 }
+    ];
+
+    const mockScales = {
+        xScale: (value: number) => value * 100,
+        yScale: (value: number) => value
+    };
+
+    it('renders without crashing', () => {
+        const { container } = render(
+            <svg>
+                <Line
+                    data={mockData}
+                    dataKey="value"
+                    stroke="#000"
+                    xScale={mockScales.xScale}
+                    yScale={mockScales.yScale}
+                />
+            </svg>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders correct number of points', () => {
+        const { container } = render(
+            <svg>
+                <Line
+                    data={mockData}
+                    dataKey="value"
+                    stroke="#000"
+                    xScale={mockScales.xScale}
+                    yScale={mockScales.yScale}
+                />
+            </svg>
+        );
+        const points = container.querySelectorAll('circle');
+        expect(points).toHaveLength(3);
+    });
+
+    it('handles mouse events', () => {
+        const mockMouseOver = jest.fn();
+        const mockMouseOut = jest.fn();
+
+        const { container } = render(
+            <svg>
+                <Line
+                    data={mockData}
+                    dataKey="value"
+                    stroke="#000"
+                    xScale={mockScales.xScale}
+                    yScale={mockScales.yScale}
+                    onMouseOver={mockMouseOver}
+                    onMouseOut={mockMouseOut}
+                />
+            </svg>
+        );
+
+        const point = container.querySelector('circle');
+        if (point) {
+            fireEvent.mouseOver(point);
+            expect(mockMouseOver).toHaveBeenCalled();
+
+            fireEvent.mouseOut(point);
+            expect(mockMouseOut).toHaveBeenCalled();
+        }
+    });
+
+    it('renders labels when enabled', () => {
+        const { container } = render(
+            <svg>
+                <Line
+                    data={mockData}
+                    dataKey="value"
+                    stroke="#000"
+                    xScale={mockScales.xScale}
+                    yScale={mockScales.yScale}
+                    label={true}
+                />
+            </svg>
+        );
+        const labels = container.querySelectorAll('text');
+        expect(labels).toHaveLength(3);
+    });
+});

src/LineChart/LineChart.spec.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import LineChart from './index';
+import Line from '../Line';
+import XAxis from '../XAxis';
+import YAxis from '../YAxis';
+
+describe('LineChart', () => {
+    const mockData = [
+        { name: 'Page A', uv: 400, pv: 200 },
+        { name: 'Page B', uv: 300, pv: 100 },
+        { name: 'Page C', uv: 200, pv: 300 }
+    ];
+
+    it('renders without crashing', () => {
+        const { container } = render(
+            <LineChart width={500} height={300} data={mockData}>
+                <Line dataKey="uv" stroke="#8884d8" />
+            </LineChart>
+        );
+        expect(container).toBeInTheDocument();
+    });
+
+    it('renders multiple lines correctly', () => {
+        const { container } = render(
+            <LineChart width={500} height={300} data={mockData}>
+                <Line dataKey="uv" stroke="#8884d8" />
+                <Line dataKey="pv" stroke="#82ca9d" />
+            </LineChart>
+        );
+        const paths = container.querySelectorAll('path');
+        expect(paths.length).toBeGreaterThan(1);
+    });
+
+    it('handles mouse movement for tooltip', () => {
+        const { container } = render(
+            <LineChart width={500} height={300} data={mockData}>
+                <Line dataKey="uv" stroke="#8884d8" />
+            </LineChart>
+        );
+        const svg = container.querySelector('svg');
+        if (svg) {
+            fireEvent.mouseMove(svg, { clientX: 250, clientY: 150 });
+            fireEvent.mouseLeave(svg);
+        }
+    });
+
+    it('renders with axes', () => {
+        const { container } = render(
+            <LineChart width={500} height={300} data={mockData}>
+                <XAxis />
+                <YAxis />
+                <Line dataKey="uv" stroke="#8884d8" />
+            </LineChart>
+        );
+        expect(container.querySelector('.y-axis')).toBeInTheDocument();
+    });
+});

src/ReferenceLine/ReferenceLine.spec.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ReferenceLine from './index';
+
+describe('ReferenceLine', () => {
+    const mockProps = {
+        chartWidth: 500,
+        chartHeight: 300,
+        xScale: (value: number | string) => typeof value === 'number' ? value * 100 : 0,
+        yScale: (value: number) => value * 2
+    };
+
+    it('renders vertical line when x is provided', () => {
+        const { container } = render(
+            <svg>
+                <ReferenceLine x={2} {...mockProps} />
+            </svg>
+        );
+        const line = container.querySelector('line');
+        expect(line).toHaveAttribute('x1', '200');
+        expect(line).toHaveAttribute('x2', '200');
+    });
+
+    it('renders horizontal line when y is provided', () => {
+        const { container } = render(
+            <svg>
+                <ReferenceLine y={100} {...mockProps} />
+            </svg>
+        );
+        const line = container.querySelector('line');
+        expect(line).toHaveAttribute('y1', '200');
+        expect(line).toHaveAttribute('y2', '200');
+    });
+
+    it('renders label when provided', () => {
+        const { container } = render(
+            <svg>
+                <ReferenceLine x={2} label="Test Label" {...mockProps} />
+            </svg>
+        );
+        const text = container.querySelector('text');
+        expect(text).toHaveTextContent('Test Label');
+    });
+
+    it('applies custom stroke color', () => {
+        const { container } = render(
+            <svg>
+                <ReferenceLine x={2} stroke="#ff0000" {...mockProps} />
+            </svg>
+        );
+        const line = container.querySelector('line');
+        expect(line).toHaveAttribute('stroke', '#ff0000');
+    });
+});