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

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

  it('should render 7 days starting from Sunday', () => {
    renderWithRouter(
      <WeeklyListView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Should have 7 day sections
    const daySections = document.querySelectorAll('.day-section');
    expect(daySections.length).toBe(7);

    // First day should be Sunday (Jan 12, 2025)
    expect(screen.getByText(/Sunday, January 12/)).toBeInTheDocument();
  });

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

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

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

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

    // 7 days × 6 meal types = 42 buttons
    const addButtons = screen.getAllByText(/\+ Add/i);
    expect(addButtons.length).toBe(7 * 6);
  });

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

    const addBreakfastButton = screen.getAllByText(/\+ Add breakfast/i)[0];
    fireEvent.click(addBreakfastButton);

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

  it('should display full meal details', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: MealType.DINNER,
            order: 0,
            servings: 4,
            notes: 'Extra crispy',
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Fried Chicken',
                description: 'Crispy fried chicken with herbs',
                servings: 4,
                totalTime: 45,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

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

    // Full mode should show description, time, servings
    expect(screen.getByText(/Crispy fried chicken/)).toBeInTheDocument();
    expect(screen.getByText(/45 min/)).toBeInTheDocument();
    expect(screen.getByText(/4 servings/)).toBeInTheDocument();
    expect(screen.getByText(/Extra crispy/)).toBeInTheDocument();
  });

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

    // Should show "No meals planned" for each meal type
    const noMealsMessages = screen.getAllByText('No meals planned');
    expect(noMealsMessages.length).toBe(7 * 6); // 7 days × 6 meal types
  });

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

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

    const todayBadge = screen.getByText('Today');
    expect(todayBadge).toBeInTheDocument();

    const todaySections = document.querySelectorAll('.day-section.today');
    expect(todaySections.length).toBe(1);
  });

  it('should display day notes if present', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        notes: 'Important dinner party!',
        meals: [],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

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

    expect(screen.getByText(/Important dinner party!/)).toBeInTheDocument();
  });

  it('should call onRemoveMeal when meal card remove button clicked', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        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(
      <WeeklyListView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

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

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

  it('should display all meal type headers', () => {
    renderWithRouter(
      <WeeklyListView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    // Each day should have headers for all 6 meal types
    Object.values(MealType).forEach(mealType => {
      const headers = screen.getAllByText(mealType);
      expect(headers.length).toBe(7); // One per day
    });
  });

  it('should display multiple meals of same type', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        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(
      <WeeklyListView
        currentDate={currentDate}
        mealPlans={mockMealPlans}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    expect(screen.getByText('Steak')).toBeInTheDocument();
    expect(screen.getByText('Salad')).toBeInTheDocument();
  });

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

    // Should show full weekday name, month, and day
    expect(screen.getByText(/Wednesday, January 15/)).toBeInTheDocument();
  });

  it('should handle meals without descriptions', () => {
    const mockMealPlans: MealPlan[] = [
      {
        id: 'mp1',
        date: new Date('2025-01-15'),
        meals: [
          {
            id: 'm1',
            mealPlanId: 'mp1',
            mealType: MealType.BREAKFAST,
            order: 0,
            servings: 4,
            recipe: {
              mealId: 'm1',
              recipeId: 'r1',
              recipe: {
                id: 'r1',
                title: 'Simple Eggs',
                servings: 4,
                createdAt: new Date(),
                updatedAt: new Date(),
              },
            },
            createdAt: new Date(),
            updatedAt: new Date(),
          },
        ],
        createdAt: new Date(),
        updatedAt: new Date(),
      },
    ];

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

    expect(screen.getByText('Simple Eggs')).toBeInTheDocument();
  });

  it('should show correct meal type labels in add buttons', () => {
    renderWithRouter(
      <WeeklyListView
        currentDate={currentDate}
        mealPlans={[]}
        onAddMeal={mockOnAddMeal}
        onRemoveMeal={mockOnRemoveMeal}
      />
    );

    expect(screen.getAllByText(/\+ Add breakfast/i).length).toBe(7);
    expect(screen.getAllByText(/\+ Add lunch/i).length).toBe(7);
    expect(screen.getAllByText(/\+ Add dinner/i).length).toBe(7);
    expect(screen.getAllByText(/\+ Add snack/i).length).toBe(7);
    expect(screen.getAllByText(/\+ Add dessert/i).length).toBe(7);
    expect(screen.getAllByText(/\+ Add other/i).length).toBe(7);
  });
});