import { describe, it, expect, afterEach } from 'vitest';
import { render, screen, cleanup } from '@testing-library/svelte';
import TrendChart from './TrendChart.svelte';

afterEach(() => cleanup());

describe('TrendChart', () => {
    it('renders an empty state when there is no data', () => {
        render(TrendChart, {
            props: {
                points: [
                    { t: '2026-06-18T09:00:00Z', value: null },
                    { t: '2026-06-18T10:00:00Z', value: null }
                ],
                label: 'Throughput'
            }
        });
        expect(screen.getByTestId('trend-empty')).toBeTruthy();
    });

    it('draws a path and labels peak/latest when data is present', () => {
        const { container } = render(TrendChart, {
            props: {
                points: [
                    { t: '2026-06-18T09:00:00Z', value: 2 },
                    { t: '2026-06-18T10:00:00Z', value: 6 },
                    { t: '2026-06-18T11:00:00Z', value: 4 }
                ],
                label: 'Throughput'
            }
        });
        const line = container.querySelector('path.line') as SVGPathElement;
        expect(line).toBeTruthy();
        expect(line.getAttribute('d')).toMatch(/^M /);
        // Header summarizes peak + latest.
        expect(screen.getByText(/peak 6 · latest 4/)).toBeTruthy();
    });

    it('breaks the line across null gaps into separate paths', () => {
        const { container } = render(TrendChart, {
            props: {
                points: [
                    { t: '2026-06-18T09:00:00Z', value: 2 },
                    { t: '2026-06-18T10:00:00Z', value: null },
                    { t: '2026-06-18T11:00:00Z', value: 4 }
                ],
                label: 'Success'
            }
        });
        // Two runs → two line paths (and two area paths).
        expect(container.querySelectorAll('path.line').length).toBe(2);
    });
});
