veza/apps/web/src/components/ui/ImageViewerModal.test.tsx

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { ImageViewerModal } from './ImageViewerModal';

describe('ImageViewerModal Component', () => {
  const mockOnClose = vi.fn();
  const mockOnNext = vi.fn();
  const mockOnPrev = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders image', () => {
    render(
      <ImageViewerModal
        src="test.jpg"
        alt="Test image"
        onClose={mockOnClose}
      />,
    );

    const image = screen.getByAltText('Test image');
    expect(image).toBeInTheDocument();
    expect(image).toHaveAttribute('src', 'test.jpg');
  });

  it('calls onClose when close button is clicked', () => {
    render(
      <ImageViewerModal src="test.jpg" alt="Test" onClose={mockOnClose} />,
    );

    const closeButton = screen.getByTitle('Close');
    fireEvent.click(closeButton);

    expect(mockOnClose).toHaveBeenCalled();
  });

  it('shows next button when hasNext is true', () => {
    render(
      <ImageViewerModal
        src="test.jpg"
        alt="Test"
        onClose={mockOnClose}
        onNext={mockOnNext}
        hasNext={true}
      />,
    );

    const nextButton = screen.getByRole('button', { hidden: true });
    expect(nextButton).toBeInTheDocument();
  });

  it('calls onNext when next button is clicked', () => {
    render(
      <ImageViewerModal
        src="test.jpg"
        alt="Test"
        onClose={mockOnClose}
        onNext={mockOnNext}
        hasNext={true}
      />,
    );

    const buttons = screen.getAllByRole('button', { hidden: true });
    const nextButton = buttons.find((btn) => btn.querySelector('svg'));
    if (nextButton) {
      fireEvent.click(nextButton);
      expect(mockOnNext).toHaveBeenCalled();
    }
  });

  it('shows prev button when hasPrev is true', () => {
    render(
      <ImageViewerModal
        src="test.jpg"
        alt="Test"
        onClose={mockOnClose}
        onPrev={mockOnPrev}
        hasPrev={true}
      />,
    );

    const buttons = screen.getAllByRole('button', { hidden: true });
    expect(buttons.length).toBeGreaterThan(0);
  });

  it('uses default alt text when alt is not provided', () => {
    render(<ImageViewerModal src="test.jpg" onClose={mockOnClose} />);

    expect(screen.getByText('Image Preview')).toBeInTheDocument();
  });
});