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

jest.mock('framer-motion', () => ({
  motion: {
    div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
  },
  useInView: () => true,
}));

jest.mock('next/link', () => {
  return ({ children, href }: any) => <a href={href}>{children}</a>;
});

jest.mock('@/lib/constants', () => ({
  CASES: [
    {
      id: 'case-1',
      client: '测试客户',
      title: '测试案例',
      description: '测试描述',
      industry: '制造业',
      results: [{ value: '40%', label: '效率提升' }],
    },
    {
      id: 'case-2',
      client: '测试客户2',
      title: '测试案例2',
      description: '测试描述2',
      industry: '零售业',
      results: [{ value: '50%', label: '成本降低' }],
    },
  ],
}));

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

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

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

    it('should render section description', () => {
      render(<CasesSection />);
      expect(screen.getByText(/我们与优秀的企业同行/)).toBeInTheDocument();
    });

    it('should render case cards', () => {
      render(<CasesSection />);
      expect(screen.getByText('测试案例')).toBeInTheDocument();
    });

    it('should render client names', () => {
      render(<CasesSection />);
      expect(screen.getByText('测试客户')).toBeInTheDocument();
    });

    it('should render industry badges', () => {
      render(<CasesSection />);
      expect(screen.getByText('制造业')).toBeInTheDocument();
    });

    it('should render results', () => {
      render(<CasesSection />);
      expect(screen.getByText('40%')).toBeInTheDocument();
    });

    it('should render view more button', () => {
      render(<CasesSection />);
      expect(screen.getByText('查看更多案例')).toBeInTheDocument();
    });
  });

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

    it('should have region role', () => {
      render(<CasesSection />);
      const section = document.querySelector('section[role="region"]');
      expect(section).toBeInTheDocument();
    });

    it('should have aria-labelledby', () => {
      render(<CasesSection />);
      const section = document.querySelector('section[aria-labelledby="cases-heading"]');
      expect(section).toBeInTheDocument();
    });
  });

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

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