file-starter/tests/unit/client/home/pages/SupplyChainDashboards/components/SupplyChainMap.test.tsx

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import SupplyChainMap from '@/client/home/pages/SupplyChainDashboards/components/SupplyChainMap';

describe('SupplyChainMap', () => {
  it('should render the map with default points and connections', () => {
    render(<SupplyChainMap />);

    // Check if map container is rendered
    const mapContainer = screen.getByRole('generic');
    expect(mapContainer).toBeInTheDocument();

    // Check if legend is rendered
    expect(screen.getByText('基地')).toBeInTheDocument();
    expect(screen.getByText('产业链')).toBeInTheDocument();
  });

  it('should render custom points when provided', () => {
    const customPoints = [
      { id: 'custom1', type: 'base' as const, position: { x: 100, y: 100 }, name: 'Custom Base' },
      { id: 'custom2', type: 'industryChain' as const, position: { x: 200, y: 200 }, name: 'Custom Chain' }
    ];

    render(<SupplyChainMap points={customPoints} />);

    // Check if custom point names are rendered
    expect(screen.getByText('Custom Base')).toBeInTheDocument();
    expect(screen.getByText('Custom Chain')).toBeInTheDocument();
  });

  it('should handle point clicks', () => {
    const mockOnPointClick = vi.fn();
    const customPoints = [
      { id: 'test-point', type: 'base' as const, position: { x: 100, y: 100 }, name: 'Test Point' }
    ];

    render(<SupplyChainMap points={customPoints} onPointClick={mockOnPointClick} />);

    // Find and click the point
    const point = screen.getByText('Test Point').closest('div[class*="cursor-pointer"]');
    expect(point).toBeInTheDocument();

    if (point) {
      fireEvent.click(point);
      expect(mockOnPointClick).toHaveBeenCalledWith(customPoints[0]);
    }
  });

  it('should render with correct positioning', () => {
    render(<SupplyChainMap />);

    const mapContainer = screen.getByRole('generic');

    // Check positioning classes
    expect(mapContainer).toHaveClass('absolute');
    expect(mapContainer).toHaveClass('contents');
    expect(mapContainer).toHaveClass('left-[529.88px]');
  });

  it('should render map border and legend', () => {
    render(<SupplyChainMap />);

    // Check if legend containers are rendered
    const baseLegend = screen.getByText('基地').closest('div[class*="rounded-[10px]"]');
    const chainLegend = screen.getByText('产业链').closest('div[class*="rounded-[10px]"]');

    expect(baseLegend).toBeInTheDocument();
    expect(chainLegend).toBeInTheDocument();
  });

  it('should handle empty points array', () => {
    render(<SupplyChainMap points={[]} />);

    // Should still render with default points
    expect(screen.getByText('基地')).toBeInTheDocument();
    expect(screen.getByText('产业链')).toBeInTheDocument();
  });

  it('should handle empty connections array', () => {
    render(<SupplyChainMap connections={[]} />);

    // Should still render with default connections
    expect(screen.getByText('基地')).toBeInTheDocument();
    expect(screen.getByText('产业链')).toBeInTheDocument();
  });
});