portfolio/app/__tests__/projects/[slug]/page.test.tsx

import { render, screen, waitFor } from '@testing-library/react';
import ProjectDetails from '@/app/projects/[slug]/page';
import '@testing-library/jest-dom';
import { useRouter, useSearchParams, useParams, usePathname } from 'next/navigation';
import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';

jest.mock('next/navigation', () => ({
  useRouter: jest.fn(),
  useSearchParams: jest.fn(),
  useParams: jest.fn(),
  usePathname: jest.fn(),
}));

describe('ProjectDetails', () => {
  beforeAll(() => {
    process.env.NEXT_PUBLIC_GHOST_API_URL = 'http://localhost:2368';
    process.env.NEXT_PUBLIC_GHOST_API_KEY = 'some-key';
    global.fetch = mockFetch({
      posts: [
        {
          id: '67aaffc3709c60000117d2d9',
          title: 'Blockchain Based Voting System',
          description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
          html: '<p>This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.</p>',
          slug: 'blockchain-based-voting-system',
          updated_at: '2025-02-13T16:54:42.000+00:00',
        },
      ],
    });
  });

  it('renders the project details page', async () => {
    (useRouter as jest.Mock).mockReturnValue({});
    (useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams());
    (useParams as jest.Mock).mockReturnValue({ slug: 'blockchain-based-voting-system' });
    (usePathname as jest.Mock).mockReturnValue('/projects/blockchain-based-voting-system');

    render(<ProjectDetails />);

    await waitFor(() => {
      expect(screen.getByText('Blockchain Based Voting System')).toBeInTheDocument();
      expect(screen.getByText('This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.')).toBeInTheDocument();
    });
  });
});