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

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

describe('SupplyChainModel', () => {
  it('should render the supply chain model with all elements', () => {
    render(<SupplyChainModel />);

    // Check main title elements
    expect(screen.getByText('省粮油集团+区域公司+新型农业经营主体')).toBeInTheDocument();
    expect(screen.getByText('1+1+N')).toBeInTheDocument();
    expect(screen.getByText('供应链合作模式')).toBeInTheDocument();
  });

  it('should render the three main entities', () => {
    render(<SupplyChainModel />);

    // Check entity titles
    expect(screen.getByText('省粮油集团')).toBeInTheDocument();
    expect(screen.getByText('区域公司')).toBeInTheDocument();
    expect(screen.getByText('新型农业经营主体')).toBeInTheDocument();

    // Check entity descriptions
    expect(screen.getByText('核心龙头企业')).toBeInTheDocument();
    expect(screen.getByText('资源整合平台')).toBeInTheDocument();
    expect(screen.getByText('标准制定者')).toBeInTheDocument();

    expect(screen.getByText('区域运营中心')).toBeInTheDocument();
    expect(screen.getByText('服务支撑平台')).toBeInTheDocument();
    expect(screen.getByText('市场对接桥梁')).toBeInTheDocument();

    expect(screen.getByText('家庭农场')).toBeInTheDocument();
    expect(screen.getByText('合作社')).toBeInTheDocument();
    expect(screen.getByText('农业企业')).toBeInTheDocument();
  });

  it('should render the cooperation process', () => {
    render(<SupplyChainModel />);

    // Check process title
    expect(screen.getByText('合作流程')).toBeInTheDocument();

    // Check process steps
    expect(screen.getByText('资源整合')).toBeInTheDocument();
    expect(screen.getByText('区域运营')).toBeInTheDocument();
    expect(screen.getByText('产业协同')).toBeInTheDocument();

    // Check process step numbers
    expect(screen.getByText('①')).toBeInTheDocument();
    expect(screen.getByText('②')).toBeInTheDocument();
    expect(screen.getByText('③')).toBeInTheDocument();
  });

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

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

    // Check positioning
    expect(container).toHaveClass('absolute');
    expect(container).toHaveClass('right-[80px]');
    expect(container).toHaveClass('top-[150px]');
  });

  it('should render with correct styling for main title', () => {
    render(<SupplyChainModel />);

    // Check 1+1+N styling
    const mainTitle = screen.getByText('1+1+N');
    expect(mainTitle).toHaveClass('text-[80px]');
    expect(mainTitle).toHaveClass('font-bold');

    // Check "供应链合作模式" styling
    const subTitle = screen.getByText('供应链合作模式');
    expect(subTitle).toHaveClass('text-[50px]');
    expect(subTitle).toHaveClass('text-[cyan]');
  });

  it('should render entity cards with correct styling', () => {
    render(<SupplyChainModel />);

    // Check entity card containers
    const entityCards = screen.getAllByText(/省粮油集团|区域公司|新型农业经营主体/);
    expect(entityCards).toHaveLength(3);

    // Check entity number indicators
    const numbers = screen.getAllByText(/1|N/);
    expect(numbers).toHaveLength(3);
  });

  it('should render process flow with correct styling', () => {
    render(<SupplyChainModel />);

    // Check process flow container
    const processContainer = screen.getByText('合作流程').closest('div');
    expect(processContainer).toHaveClass('border-t');
    expect(processContainer).toHaveClass('border-[rgba(255,255,255,0.1)]');

    // Check process step indicators
    const stepIndicators = screen.getAllByText(/①|②|③/);
    expect(stepIndicators).toHaveLength(3);

    stepIndicators.forEach(indicator => {
      expect(indicator).toHaveClass('text-white');
    });
  });
});