basil/.wip/CalendarView.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 CalendarView from './CalendarView';
import { MealPlan, 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('CalendarView', () => {
  const mockOnAddMeal = vi.fn();
  const mockOnRemoveMeal = vi.fn();
  const currentDate = new Date('2025-01-15'); // Middle of January 2025

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

  it('should render calendar grid with correct number of days', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Should have 7 weekday headers
    expect(screen.getByText('Sun')).toBeInTheDocument();
    expect(screen.getByText('Mon')).toBeInTheDocument();
    expect(screen.getByText('Sat')).toBeInTheDocument();

    // Calendar should have cells (31 days + overflow from prev/next months)
    const cells = document.querySelectorAll('.calendar-cell');
    expect(cells.length).toBeGreaterThanOrEqual(31);
  });

  it('should highlight current day', () => {
    // Set current date to today
    const today = new Date();

    renderWithRouter(
      <CalendarView
        currentDate={today}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    const todayCells = document.querySelectorAll('.calendar-cell.today');
    expect(todayCells.length).toBe(1);
  });

  it('should display meals for each day', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: 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(),
      },
    ];

    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.getByText(MealType.BREAKFAST)).toBeInTheDocument();
  });

  it('should group meals by type', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: 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: MealType.LUNCH,
            order: 0,
            servings: 2,
            recipe: {
              mealId: 'm2',
              recipeId: 'r2',
              recipe: {
                id: 'r2',
                title: 'Sandwich',
                description: 'Lunch item',
                servings: 2,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    expect(screen.getByText('Pancakes')).toBeInTheDocument();
    expect(screen.getByText('Sandwich')).toBeInTheDocument();
    expect(screen.getByText(MealType.BREAKFAST)).toBeInTheDocument();
    expect(screen.getByText(MealType.LUNCH)).toBeInTheDocument();
  });

  it('should show "Add Meal" button for each day', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    const addButtons = screen.getAllByText('+ Add Meal');
    expect(addButtons.length).toBeGreaterThan(0);
  });

  it('should call onAddMeal with correct date', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    const addButtons = screen.getAllByText('+ Add Meal');
    fireEvent.click(addButtons[0]);

    expect(mockOnAddMeal).toHaveBeenCalled();
    const calledDate = mockOnAddMeal.mock.calls[0][0];
    expect(calledDate).toBeInstanceOf(Date);
    expect(mockOnAddMeal.mock.calls[0][1]).toBe(MealType.DINNER);
  });

  it('should handle months with different day counts', () => {
    // February 2025 has 28 days
    const februaryDate = new Date('2025-02-15');

    renderWithRouter(
      <CalendarView
        currentDate={februaryDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    const cells = document.querySelectorAll('.calendar-cell');
    expect(cells.length).toBeGreaterThanOrEqual(28);
  });

  it('should render overflow days from previous/next months', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    const otherMonthCells = document.querySelectorAll('.calendar-cell.other-month');
    expect(otherMonthCells.length).toBeGreaterThan(0);
  });

  it('should display day numbers correctly', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Should find day 15 (current date)
    const dayNumbers = document.querySelectorAll('.date-number');
    const day15 = Array.from(dayNumbers).find(el => el.textContent === '15');
    expect(day15).toBeInTheDocument();
  });

  it('should handle empty meal plans', () => {
    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Should not find any meal cards
    expect(screen.queryByText('Pancakes')).not.toBeInTheDocument();

    // But should still show add buttons
    const addButtons = screen.getAllByText('+ Add Meal');
    expect(addButtons.length).toBeGreaterThan(0);
  });

  it('should call onRemoveMeal when meal card remove button clicked', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: 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(),
      },
    ];

    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

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

    expect(mockOnRemoveMeal).toHaveBeenCalledWith('m1');
  });

  it('should display multiple meals of same type', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: MealType.DINNER,
            order: 0,
            servings: 4,
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Steak',
                description: 'Main course',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
          {
            id: 'm2',
            mealPlanId: 'mp1',
            mealType: MealType.DINNER,
            order: 1,
            servings: 4,
            recipe: {
              mealId: 'm2',
              recipeId: 'r2',
              recipe: {
                id: 'r2',
                title: 'Salad',
                description: 'Side dish',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    expect(screen.getByText('Steak')).toBeInTheDocument();
    expect(screen.getByText('Salad')).toBeInTheDocument();
    // Should only show DINNER label once, not twice
    const dinnerLabels = screen.getAllByText(MealType.DINNER);
    expect(dinnerLabels.length).toBe(1);
  });

  it('should render meals in compact mode', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Test plan',
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: MealType.BREAKFAST,
            order: 0,
            servings: 4,
            notes: 'Special notes',
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Pancakes',
                description: 'Delicious pancakes with maple syrup',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

    renderWithRouter(
      <CalendarView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Compact mode should not show notes or description
    expect(screen.queryByText(/Special notes/)).not.toBeInTheDocument();
    expect(screen.queryByText(/Delicious pancakes with/)).not.toBeInTheDocument();
  });
});