import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { NewsDetailClient } from './NewsDetailClient';

jest.mock('next/navigation', () => ({
  useRouter: () => ({
    push: jest.fn(),
    back: jest.fn(),
  }),
}));

jest.mock('next/link', () => {
  const MockLink = ({ children, href }: { children: React.ReactNode; href: string }) => {
    return <a href={href}>{children}</a>;
  };
  MockLink.displayName = 'MockLink';
  return MockLink;
});

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

const mockNews = {
  id: 'test-news',
  title: '测试新闻标题',
  category: '公司新闻',
  date: '2024-01-01',
  excerpt: '这是测试新闻摘要',
  content: '这是测试新闻内容',
};

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

  describe('Rendering', () => {
    it('should render news detail page', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const titles = screen.getAllByText('测试新闻标题');
      expect(titles.length).toBeGreaterThan(0);
    });

    it('should render news title', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const title = screen.getByRole('heading', { level: 1 });
      expect(title).toBeInTheDocument();
      expect(title).toHaveTextContent('测试新闻标题');
    });

    it('should render news category', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const categories = screen.getAllByText('公司新闻');
      expect(categories.length).toBeGreaterThan(0);
    });

    it('should render news date', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const date = screen.getByText('2024-01-01');
      expect(date).toBeInTheDocument();
    });

    it('should render news excerpt', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const excerpt = screen.getByText('这是测试新闻摘要');
      expect(excerpt).toBeInTheDocument();
    });

    it('should render news content', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const content = screen.getByText('这是测试新闻内容');
      expect(content).toBeInTheDocument();
    });
  });

  describe('Navigation', () => {
    it('should have back button', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const backButtons = screen.getAllByRole('button', { name: /返回/i });
      expect(backButtons.length).toBeGreaterThan(0);
    });
  });

  describe('Accessibility', () => {
    it('should have proper heading hierarchy', () => {
      render(<NewsDetailClient news={mockNews as any} />);
      const h1 = screen.getByRole('heading', { level: 1 });
      expect(h1).toBeInTheDocument();
    });
  });
});