basil/.wip/MealPlanner.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 MealPlanner from './MealPlanner';
import { mealPlansApi } from '../services/api';

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

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

describe('MealPlanner', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render loading state initially', () => {
    vi.mocked(mealPlansApi.getAll).mockImplementation(
      () => new Promise(() => {}) // Never resolves
    );

    renderWithRouter(<MealPlanner />);

    expect(screen.getByText(/loading/i)).toBeInTheDocument();
  });

  it('should fetch meal plans on mount', async () => {
    const mockMealPlans = [
      {
        id: 'mp1',
        date: '2025-01-15',
        notes: 'Test plan',
        meals: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: mockMealPlans });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalled();
    });
  });

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

    renderWithRouter(<MealPlanner />);

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

  it('should toggle between calendar and weekly views', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Find view toggle buttons
    const viewButtons = screen.getAllByRole('button');
    const weeklyButton = viewButtons.find(btn => btn.textContent?.includes('Weekly'));

    if (weeklyButton) {
      fireEvent.click(weeklyButton);

      await waitFor(() => {
        // Should now show weekly view
        expect(mealPlansApi.getAll).toHaveBeenCalledTimes(2); // Once for initial, once for view change
      });
    }
  });

  it('should navigate to previous month', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Find and click previous button
    const prevButton = screen.getByRole('button', { name: /previous/i });
    fireEvent.click(prevButton);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalledTimes(2);
    });
  });

  it('should navigate to next month', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Find and click next button
    const nextButton = screen.getByRole('button', { name: /next/i });
    fireEvent.click(nextButton);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalledTimes(2);
    });
  });

  it('should navigate to today', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Navigate to a different month first
    const nextButton = screen.getByRole('button', { name: /next/i });
    fireEvent.click(nextButton);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalledTimes(2);
    });

    // Then click "Today" button
    const todayButton = screen.getByRole('button', { name: /today/i });
    fireEvent.click(todayButton);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalledTimes(3);
    });
  });

  it('should display meal plans in calendar view', async () => {
    const mockMealPlans = [
      {
        id: 'mp1',
        date: '2025-01-15',
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: 'BREAKFAST',
            order: 0,
            servings: 4,
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Pancakes',
                description: 'Delicious pancakes',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: mockMealPlans });

    renderWithRouter(<MealPlanner />);

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

  it('should open add meal modal when clicking add meal button', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Find and click an "Add Meal" button
    const addButtons = screen.getAllByText(/add meal/i);
    if (addButtons.length > 0) {
      fireEvent.click(addButtons[0]);

      await waitFor(() => {
        // Modal should be visible
        expect(screen.getByRole('dialog') || screen.getByTestId('add-meal-modal')).toBeInTheDocument();
      });
    }
  });

  it('should open shopping list modal when clicking shopping list button', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Find and click shopping list button
    const shoppingListButton = screen.getByRole('button', { name: /shopping list/i });
    fireEvent.click(shoppingListButton);

    await waitFor(() => {
      // Modal should be visible
      expect(screen.getByRole('dialog') || screen.getByTestId('shopping-list-modal')).toBeInTheDocument();
    });
  });

  it('should refresh data after closing modal', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    const initialCallCount = vi.mocked(mealPlansApi.getAll).mock.calls.length;

    // Open and close add meal modal
    const addButtons = screen.getAllByText(/add meal/i);
    if (addButtons.length > 0) {
      fireEvent.click(addButtons[0]);

      // Find close button in modal
      const cancelButton = await screen.findByRole('button', { name: /cancel/i });
      fireEvent.click(cancelButton);

      await waitFor(() => {
        // Should fetch again after closing modal
        expect(mealPlansApi.getAll).toHaveBeenCalledTimes(initialCallCount + 1);
      });
    }
  });

  it('should handle empty state', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(screen.queryByText(/loading/i)).not.toBeInTheDocument();
    });

    // Should show calendar with no meals
    expect(screen.queryByText('Pancakes')).not.toBeInTheDocument();
  });

  it('should correctly calculate date range for current month', async () => {
    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: [] });

    renderWithRouter(<MealPlanner />);

    await waitFor(() => {
      expect(mealPlansApi.getAll).toHaveBeenCalled();
    });

    // Check that the API was called with dates from the current month
    const callArgs = vi.mocked(mealPlansApi.getAll).mock.calls[0][0];
    expect(callArgs).toHaveProperty('startDate');
    expect(callArgs).toHaveProperty('endDate');

    // startDate should be the first of the month
    const startDate = new Date(callArgs.startDate);
    expect(startDate.getDate()).toBe(1);

    // endDate should be the last day of the month
    const endDate = new Date(callArgs.endDate);
    expect(endDate.getDate()).toBeGreaterThan(27); // Last day is at least 28
  });

  it('should group meals by type', async () => {
    const mockMealPlans = [
      {
        id: 'mp1',
        date: '2025-01-15',
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: 'BREAKFAST',
            order: 0,
            servings: 4,
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Pancakes',
                description: 'Breakfast item',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
          {
            id: 'm2',
            mealPlanId: 'mp1',
            mealType: 'LUNCH',
            order: 0,
            servings: 4,
            recipe: {
              mealId: 'm2',
              recipeId: 'r2',
              recipe: {
                id: 'r2',
                title: 'Sandwich',
                description: 'Lunch item',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    vi.mocked(mealPlansApi.getAll).mockResolvedValue({ data: mockMealPlans });

    renderWithRouter(<MealPlanner />);

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