the-tip-top-frontend/__tests__/components/ui/EmptyState.test.tsx

/**
 * Tests for the EmptyState component
 * @jest-environment jsdom
 */

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { EmptyState } from '@/components/ui/EmptyState';

describe('EmptyState', () => {
  it('should render message', () => {
    render(<EmptyState message="No items found" />);
    expect(screen.getByText('No items found')).toBeInTheDocument();
  });

  it('should render default icon', () => {
    render(<EmptyState message="No items" />);
    expect(screen.getByText('📝')).toBeInTheDocument();
  });

  it('should render custom icon', () => {
    render(<EmptyState message="No items" icon="🔍" />);
    expect(screen.getByText('🔍')).toBeInTheDocument();
  });

  it('should render title when provided', () => {
    render(<EmptyState message="No items found" title="Empty List" />);
    expect(screen.getByText('Empty List')).toBeInTheDocument();
  });

  it('should not render title when not provided', () => {
    render(<EmptyState message="No items found" />);
    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
  });

  it('should render action button when action is provided', () => {
    const mockClick = jest.fn();
    render(
      <EmptyState
        message="No items"
        action={{ label: 'Add Item', onClick: mockClick }}
      />
    );
    expect(screen.getByText('Add Item')).toBeInTheDocument();
  });

  it('should call action onClick when button is clicked', () => {
    const mockClick = jest.fn();
    render(
      <EmptyState
        message="No items"
        action={{ label: 'Add Item', onClick: mockClick }}
      />
    );
    fireEvent.click(screen.getByText('Add Item'));
    expect(mockClick).toHaveBeenCalledTimes(1);
  });

  it('should not render action button when action is not provided', () => {
    render(<EmptyState message="No items" />);
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  it('should have centered layout', () => {
    const { container } = render(<EmptyState message="No items" />);
    expect(container.firstChild).toHaveClass('text-center');
    expect(container.firstChild).toHaveClass('py-16');
  });

  it('should style title correctly', () => {
    render(<EmptyState message="No items" title="Empty" />);
    const title = screen.getByText('Empty');
    expect(title).toHaveClass('text-lg');
    expect(title).toHaveClass('font-semibold');
  });

  it('should style message correctly', () => {
    render(<EmptyState message="No items found" />);
    const message = screen.getByText('No items found');
    expect(message).toHaveClass('text-gray-600');
  });

  it('should style action button correctly', () => {
    const mockClick = jest.fn();
    render(
      <EmptyState
        message="No items"
        action={{ label: 'Click Me', onClick: mockClick }}
      />
    );
    const button = screen.getByText('Click Me');
    expect(button).toHaveClass('bg-blue-600');
    expect(button).toHaveClass('text-white');
  });
});