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

global.fetch = jest.fn();

describe('UsersPage', () => {
  beforeEach(() => {
    jest.clearAllMocks();
    (global.fetch as jest.Mock).mockResolvedValue({
      ok: true,
      json: async () => ({
        users: [
          {
            id: 'test-user',
            email: 'test@example.com',
            name: 'Test User',
            role: 'admin',
            createdAt: '2024-01-01',
          },
        ],
      }),
    });
  });

  describe('Rendering', () => {
    it('should render users page', () => {
      render(<UsersPage />);
      const container = document.body;
      expect(container).toBeTruthy();
    });

    it('should render page content', () => {
      render(<UsersPage />);
      const content = document.querySelector('main') || document.body.firstChild;
      expect(content).toBeTruthy();
    });

    it('should render add user button', () => {
      render(<UsersPage />);
      const container = document.body;
      expect(container).toBeTruthy();
    });
  });

  describe('Functionality', () => {
    it('should fetch users on mount', async () => {
      render(<UsersPage />);
      
      expect(global.fetch).toHaveBeenCalledWith('/api/admin/users');
    });
  });

  describe('Accessibility', () => {
    it('should have proper heading hierarchy', () => {
      render(<UsersPage />);
      
      const container = document.body;
      expect(container).toBeTruthy();
    });
  });
});