import React from 'react';
import { render, screen } from '@testing-library/react';
import { FunnelChart } from './funnel-chart';

const mockData = [
  { name: "تعداد کل", value: 250, label: "تعداد کل" },
  { name: "نمونه موفق", value: 130, label: "نمونه موفق" },
  { name: "محصولات موفق", value: 70, label: "محصولات موفق" },
  { name: "بهبود یا تغییر موفق", value: 80, label: "بهبود یا تغییر موفق" },
  { name: "محصول جدید", value: 50, label: "محصول جدید" },
];

describe('FunnelChart', () => {
  it('renders funnel chart with correct data', () => {
    render(<FunnelChart data={mockData} title="قيف فرآیند پروژه ها" />);
    
    expect(screen.getByText('قيف فرآیند پروژه ها')).toBeInTheDocument();
    expect(screen.getByText('۱۰۰%')).toBeInTheDocument();
    expect(screen.getByText('۲۵%')).toBeInTheDocument();
    expect(screen.getByText('ابتدا فرآیند')).toBeInTheDocument();
    expect(screen.getByText('انتها فرآیند')).toBeInTheDocument();
  });

  it('displays funnel data values correctly', () => {
    render(<FunnelChart data={mockData} />);
    
    expect(screen.getByText('۲۵۰')).toBeInTheDocument();
    expect(screen.getByText('۱۳۰')).toBeInTheDocument();
    expect(screen.getByText('۷۰')).toBeInTheDocument();
    expect(screen.getByText('۸۰')).toBeInTheDocument();
    expect(screen.getByText('۵۰')).toBeInTheDocument();
  });

  it('renders without title when not provided', () => {
    render(<FunnelChart data={mockData} />);
    
    expect(screen.queryByText('قيف فرآیند پروژه ها')).not.toBeInTheDocument();
  });
});