basil/.wip/AddMealModal.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import AddMealModal from './AddMealModal';
import { mealPlansApi, recipesApi } from '../../services/api';
import { MealType } from '@basil/shared';

// Mock API
vi.mock('../../services/api', () => ({
  mealPlansApi: {
    getByDate: vi.fn(),
    create: vi.fn(),
    addMeal: vi.fn(),
  },
  recipesApi: {
    getAll: vi.fn(),
  },
}));

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

describe('AddMealModal', () => {
  const mockDate = new Date('2025-01-15');
  const mockOnClose = vi.fn();
  const mockOnMealAdded = vi.fn();

  const mockRecipes = [
    {
      id: 'r1',
      title: 'Pancakes',
      description: 'Delicious pancakes',
      servings: 4,
      images: [],
      createdAt: new Date(),
      updatedAt: new Date(),
    },
    {
      id: 'r2',
      title: 'Sandwich',
      description: 'Classic sandwich',
      servings: 2,
      images: [],
      createdAt: new Date(),
      updatedAt: new Date(),
    },
  ];

  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(recipesApi.getAll).mockResolvedValue({
      data: mockRecipes,
      pagination: { total: 2, page: 1, limit: 100, pages: 1 },
    } as any);
  });

  it('should render modal when open', async () => {
    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Add Meal')).toBeInTheDocument();
    });
  });

  it('should fetch and display recipes', async () => {
    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(recipesApi.getAll).toHaveBeenCalled();
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
      expect(screen.getByText('Sandwich')).toBeInTheDocument();
    });
  });

  it('should filter recipes based on search input', async () => {
    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    const searchInput = screen.getByPlaceholderText(/search for a recipe/i);
    fireEvent.change(searchInput, { target: { value: 'Sandwich' } });

    await waitFor(() => {
      expect(screen.queryByText('Pancakes')).not.toBeInTheDocument();
      expect(screen.getByText('Sandwich')).toBeInTheDocument();
    });
  });

  it('should select recipe on click', async () => {
    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    const recipeItem = screen.getByText('Pancakes').closest('.recipe-item');
    if (recipeItem) {
      fireEvent.click(recipeItem);

      await waitFor(() => {
        expect(recipeItem).toHaveClass('selected');
      });
    }
  });

  it('should create new meal plan and add meal', async () => {
    vi.mocked(mealPlansApi.getByDate).mockResolvedValue({ data: null });
    vi.mocked(mealPlansApi.create).mockResolvedValue({
      data: { id: 'mp1', date: mockDate, meals: [] },
    } as any);
    vi.mocked(mealPlansApi.addMeal).mockResolvedValue({ data: {} } as any);

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.BREAKFAST}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    // Select recipe
    const recipeItem = screen.getByText('Pancakes').closest('.recipe-item');
    if (recipeItem) {
      fireEvent.click(recipeItem);
    }

    // Set servings
    const servingsInput = screen.getByLabelText(/servings/i);
    fireEvent.change(servingsInput, { target: { value: '6' } });

    // Submit form
    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(mealPlansApi.getByDate).toHaveBeenCalledWith('2025-01-15');
      expect(mealPlansApi.create).toHaveBeenCalledWith({ date: '2025-01-15' });
      expect(mealPlansApi.addMeal).toHaveBeenCalledWith('mp1', {
        mealType: MealType.BREAKFAST,
        recipeId: 'r1',
        servings: 6,
        notes: undefined,
      });
      expect(mockOnMealAdded).toHaveBeenCalled();
    });
  });

  it('should add meal to existing meal plan', async () => {
    vi.mocked(mealPlansApi.getByDate).mockResolvedValue({
      data: { id: 'mp1', date: mockDate, meals: [] },
    } as any);
    vi.mocked(mealPlansApi.addMeal).mockResolvedValue({ data: {} } as any);

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.LUNCH}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    // Select recipe
    const recipeCard = screen.getByText('Sandwich').closest('.recipe-item');
    if (recipeCard) {
      fireEvent.click(recipeCard);
    }

    // Submit form
    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(mealPlansApi.getByDate).toHaveBeenCalledWith('2025-01-15');
      expect(mealPlansApi.create).not.toHaveBeenCalled();
      expect(mealPlansApi.addMeal).toHaveBeenCalledWith('mp1', {
        mealType: MealType.LUNCH,
        recipeId: 'r2',
        servings: 2,
        notes: undefined,
      });
    });
  });

  it('should include notes when provided', async () => {
    vi.mocked(mealPlansApi.getByDate).mockResolvedValue({
      data: { id: 'mp1', date: mockDate, meals: [] },
    } as any);
    vi.mocked(mealPlansApi.addMeal).mockResolvedValue({ data: {} } as any);

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    // Select recipe
    const recipeCard = screen.getByText('Pancakes').closest('.recipe-item');
    if (recipeCard) {
      fireEvent.click(recipeCard);
    }

    // Add notes
    const notesInput = screen.getByLabelText(/notes \(optional\)/i);
    fireEvent.change(notesInput, { target: { value: 'Extra syrup please' } });

    // Submit form
    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(mealPlansApi.addMeal).toHaveBeenCalledWith('mp1', {
        mealType: MealType.DINNER,
        recipeId: 'r1',
        servings: 4,
        notes: 'Extra syrup please',
      });
    });
  });

  it('should close modal on cancel', async () => {
    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText(/add meal/i)).toBeInTheDocument();
    });

    const cancelButton = screen.getByRole('button', { name: /cancel/i });
    fireEvent.click(cancelButton);

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

  it('should display error message on save failure', async () => {
    vi.mocked(mealPlansApi.getByDate).mockRejectedValue(new Error('Network error'));

    // Mock window.alert
    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    // Select recipe
    const recipeCard = screen.getByText('Pancakes').closest('.recipe-item');
    if (recipeCard) {
      fireEvent.click(recipeCard);
    }

    // Submit form
    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(alertMock).toHaveBeenCalledWith('Failed to add meal');
    });

    alertMock.mockRestore();
  });

  it('should show alert if no recipe selected', async () => {
    // Mock window.alert
    const alertMock = vi.spyOn(window, 'alert').mockImplementation(() => {});

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Add Meal')).toBeInTheDocument();
    });

    // Submit form without selecting recipe
    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(alertMock).toHaveBeenCalledWith('Please select a recipe');
    });

    alertMock.mockRestore();
  });

  it('should handle empty recipe list', async () => {
    vi.mocked(recipesApi.getAll).mockResolvedValue({
      data: [],
      pagination: { total: 0, page: 1, limit: 100, pages: 0 },
    } as any);

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText(/no recipes found/i)).toBeInTheDocument();
    });
  });

  it('should change meal type via dropdown', async () => {
    vi.mocked(mealPlansApi.getByDate).mockResolvedValue({
      data: { id: 'mp1', date: mockDate, meals: [] },
    } as any);
    vi.mocked(mealPlansApi.addMeal).mockResolvedValue({ data: {} } as any);

    renderWithRouter(
      <AddMealModal
        date={mockDate}
        initialMealType={MealType.DINNER}
        onClose={mockOnClose}
        onMealAdded={mockOnMealAdded}
      />
    );

    await waitFor(() => {
      expect(screen.getByText('Pancakes')).toBeInTheDocument();
    });

    // Change meal type
    const mealTypeSelect = screen.getByLabelText(/meal type/i);
    fireEvent.change(mealTypeSelect, { target: { value: MealType.BREAKFAST } });

    // Select recipe and submit
    const recipeCard = screen.getByText('Pancakes').closest('.recipe-item');
    if (recipeCard) {
      fireEvent.click(recipeCard);
    }

    const submitButton = screen.getByRole('button', { name: 'Add Meal' });
    fireEvent.click(submitButton);

    await waitFor(() => {
      expect(mealPlansApi.addMeal).toHaveBeenCalledWith('mp1', {
        mealType: MealType.BREAKFAST,
        recipeId: 'r1',
        servings: 4,
        notes: undefined,
      });
    });
  });
});