basil/.wip/MealCard.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import MealCard from './MealCard';
import { Meal, MealType } from '@basil/shared';

const mockNavigate = vi.fn();

vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return {
    ...actual,
    useNavigate: () => mockNavigate,
  };
});

const renderWithRouter = (component: React.ReactElement) => {
  return render(<BrowserRouter>{component}</BrowserRouter>);
};

describe('MealCard', () => {
  const mockMeal: Meal = {
    id: 'm1',
    mealPlanId: 'mp1',
    mealType: MealType.BREAKFAST,
    order: 0,
    servings: 4,
    notes: 'Extra syrup',
    recipe: {
      mealId: 'm1',
      recipeId: 'r1',
      recipe: {
        id: 'r1',
        title: 'Pancakes',
        description: 'Delicious fluffy pancakes with maple syrup and butter',
        servings: 4,
        totalTime: 30,
        imageUrl: '/uploads/pancakes.jpg',
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    },
    createdAt: new Date(),
    updatedAt: new Date(),
  };

  const mockOnRemove = vi.fn();

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

  it('should render in compact mode', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={true} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.getByAltText('Pancakes')).toBeInTheDocument();
    // Should not show description in compact mode
    expect(screen.queryByText(/Delicious fluffy/)).not.toBeInTheDocument();
  });

  it('should render in full mode', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.getByText(/Delicious fluffy pancakes/)).toBeInTheDocument();
    expect(screen.getByText(/30 min/)).toBeInTheDocument();
    expect(screen.getByText(/4 servings/)).toBeInTheDocument();
  });

  it('should display recipe image', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    const image = screen.getByAltText('Pancakes') as HTMLImageElement;
    expect(image).toBeInTheDocument();
    expect(image.src).toContain('/uploads/pancakes.jpg');
  });

  it('should display servings if overridden', () => {
    const mealWithServings = {
      ...mockMeal,
      servings: 8,
    };

    renderWithRouter(
      <MealCard meal={mealWithServings} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText(/8 servings/)).toBeInTheDocument();
  });

  it('should display notes if present', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText(/Notes:/)).toBeInTheDocument();
    expect(screen.getByText(/Extra syrup/)).toBeInTheDocument();
  });

  it('should call onRemove when delete button clicked', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    const removeButton = screen.getByTitle('Remove meal');
    fireEvent.click(removeButton);

    expect(mockOnRemove).toHaveBeenCalled();
  });

  it('should navigate to recipe on click', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    const card = screen.getByText('Pancakes').closest('.meal-card-content');
    if (card) {
      fireEvent.click(card);
    }

    expect(mockNavigate).toHaveBeenCalledWith('/recipes/r1');
  });

  it('should handle missing recipe data gracefully', () => {
    const mealWithoutRecipe = {
      ...mockMeal,
      recipe: undefined,
    } as Meal;

    const { container } = renderWithRouter(
      <MealCard meal={mealWithoutRecipe} compact={false} onRemove={mockOnRemove} />
    );

    expect(container.firstChild).toBeNull();
  });

  it('should handle recipe without image', () => {
    const mealWithoutImage = {
      ...mockMeal,
      recipe: {
        ...mockMeal.recipe!,
        recipe: {
          ...mockMeal.recipe!.recipe,
          imageUrl: undefined,
        },
      },
    };

    renderWithRouter(
      <MealCard meal={mealWithoutImage} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.queryByRole('img')).not.toBeInTheDocument();
  });

  it('should handle recipe without description', () => {
    const mealWithoutDescription = {
      ...mockMeal,
      recipe: {
        ...mockMeal.recipe!,
        recipe: {
          ...mockMeal.recipe!.recipe,
          description: undefined,
        },
      },
    };

    renderWithRouter(
      <MealCard meal={mealWithoutDescription} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.queryByClassName('meal-card-description')).not.toBeInTheDocument();
  });

  it('should handle recipe without total time', () => {
    const mealWithoutTime = {
      ...mockMeal,
      recipe: {
        ...mockMeal.recipe!,
        recipe: {
          ...mockMeal.recipe!.recipe,
          totalTime: undefined,
        },
      },
    };

    renderWithRouter(
      <MealCard meal={mealWithoutTime} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.queryByText(/min/)).not.toBeInTheDocument();
  });

  it('should handle meal without notes', () => {
    const mealWithoutNotes = {
      ...mockMeal,
      notes: undefined,
    };

    renderWithRouter(
      <MealCard meal={mealWithoutNotes} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.queryByText(/Notes:/)).not.toBeInTheDocument();
  });

  it('should handle meal without servings', () => {
    const mealWithoutServings = {
      ...mockMeal,
      servings: undefined,
    };

    renderWithRouter(
      <MealCard meal={mealWithoutServings} compact={false} onRemove={mockOnRemove} />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.queryByText(/servings/)).not.toBeInTheDocument();
  });

  it('should truncate long description', () => {
    const longDescription = 'A'.repeat(150);
    const mealWithLongDescription = {
      ...mockMeal,
      recipe: {
        ...mockMeal.recipe!,
        recipe: {
          ...mockMeal.recipe!.recipe,
          description: longDescription,
        },
      },
    };

    renderWithRouter(
      <MealCard meal={mealWithLongDescription} compact={false} onRemove={mockOnRemove} />
    );

    const description = screen.getByText(/A+\.\.\./);
    expect(description.textContent?.length).toBeLessThanOrEqual(104); // 100 chars + "..."
  });

  it('should stop propagation when clicking remove button', () => {
    renderWithRouter(
      <MealCard meal={mockMeal} compact={false} onRemove={mockOnRemove} />
    );

    const removeButton = screen.getByTitle('Remove meal');
    fireEvent.click(removeButton);

    // Should not navigate when clicking remove button
    expect(mockNavigate).not.toHaveBeenCalled();
    expect(mockOnRemove).toHaveBeenCalled();
  });
});