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

jest.mock('@/components/ui/insight-card', () => ({
  InsightCard: ({ title, category }: any) => (
    <div data-testid="insight-card">
      <div>{title}</div>
      <div>{category}</div>
    </div>
  ),
}));

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

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

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

    it('should render section description', () => {
      render(<InsightsSection />);
      expect(screen.getByText(/分享前沿技术趋势/)).toBeInTheDocument();
    });

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

    it('should render insight titles', () => {
      render(<InsightsSection />);
      expect(screen.getByText('2025年技术趋势：AI驱动的数字化转型')).toBeInTheDocument();
    });

    it('should render insight categories', () => {
      render(<InsightsSection />);
      expect(screen.getByText('技术趋势')).toBeInTheDocument();
    });

    it('should render view all button', () => {
      render(<InsightsSection />);
      expect(screen.getByText('查看全部洞察')).toBeInTheDocument();
    });
  });

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

  describe('Styling', () => {
    it('should have correct background', () => {
      render(<InsightsSection />);
      const section = document.querySelector('section.bg-\\[\\#FAFAFA\\]');
      expect(section).toBeInTheDocument();
    });

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

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