import { describe, it, expect, beforeEach, jest } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { TestimonialsSection } from './testimonials-section';

jest.mock('@/components/ui/testimonial-card', () => ({
  TestimonialCard: ({ author, quote }: any) => (
    <div data-testid="testimonial-card">
      <div>{author}</div>
      <div>{quote}</div>
    </div>
  ),
}));

describe('TestimonialsSection', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render testimonials section', () => {
      render(<TestimonialsSection />);
      const section = document.querySelector('section#testimonials');
      expect(section).toBeInTheDocument();
    });

    it('should render section heading', () => {
      render(<TestimonialsSection />);
      expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
    });

    it('should render section description', () => {
      render(<TestimonialsSection />);
      expect(screen.getByText(/听听我们的客户怎么说/)).toBeInTheDocument();
    });

    it('should render testimonial cards', () => {
      render(<TestimonialsSection />);
      const cards = screen.getAllByTestId('testimonial-card');
      expect(cards.length).toBeGreaterThan(0);
    });

    it('should render testimonial authors', () => {
      render(<TestimonialsSection />);
      expect(screen.getByText('张总')).toBeInTheDocument();
    });

    it('should render testimonial quotes', () => {
      render(<TestimonialsSection />);
      expect(screen.getByText(/睿新致远的团队非常专业/)).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('should have section id', () => {
      render(<TestimonialsSection />);
      const section = document.querySelector('section#testimonials');
      expect(section).toBeInTheDocument();
    });
  });

  describe('Styling', () => {
    it('should have correct background', () => {
      render(<TestimonialsSection />);
      const section = document.querySelector('section.bg-white');
      expect(section).toBeInTheDocument();
    });

    it('should have container', () => {
      render(<TestimonialsSection />);
      const container = document.querySelector('.container-wide');
      expect(container).toBeInTheDocument();
    });

    it('should have grid layout', () => {
      render(<TestimonialsSection />);
      const grid = document.querySelector('.grid');
      expect(grid).toBeInTheDocument();
    });
  });
});