basil/.wip/ShoppingListModal.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor, fireEvent } from '@testing-library/react';
import ShoppingListModal from './ShoppingListModal';
import { mealPlansApi } from '../../services/api';

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

describe('ShoppingListModal', () => {
  const mockOnClose = vi.fn();
  const mockDateRange = {
    startDate: new Date('2025-01-01'),
    endDate: new Date('2025-01-31'),
  };

  const mockShoppingList = {
    items: [
      {
        ingredientName: 'flour',
        totalAmount: 2,
        unit: 'cups',
        recipes: ['Pancakes', 'Cookies'],
      },
      {
        ingredientName: 'sugar',
        totalAmount: 1.5,
        unit: 'cups',
        recipes: ['Cookies'],
      },
    ],
    dateRange: {
      start: '2025-01-01',
      end: '2025-01-31',
    },
    recipeCount: 2,
  };

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

  it('should render when open', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

  it('should fetch shopping list on mount', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(mealPlansApi.generateShoppingList).toHaveBeenCalledWith({
        startDate: '2025-01-01',
        endDate: '2025-01-31',
      });
    });
  });

  it('should display ingredients grouped by name and unit', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText('flour')).toBeInTheDocument();
      expect(screen.getByText('sugar')).toBeInTheDocument();
      expect(screen.getByText(/2 cups/)).toBeInTheDocument();
      expect(screen.getByText(/1.5 cups/)).toBeInTheDocument();
    });
  });

  it('should show recipe sources per ingredient', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText(/Used in: Pancakes, Cookies/)).toBeInTheDocument();
      expect(screen.getByText(/Used in: Cookies/)).toBeInTheDocument();
    });
  });

  it('should allow checking/unchecking items', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const checkboxes = screen.getAllByRole('checkbox');
    expect(checkboxes.length).toBe(2);

    fireEvent.click(checkboxes[0]);
    expect(checkboxes[0]).toBeChecked();

    fireEvent.click(checkboxes[0]);
    expect(checkboxes[0]).not.toBeChecked();
  });

  it('should copy to clipboard when clicked', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    // Mock clipboard API
    const writeTextMock = vi.fn();
    Object.assign(navigator, {
      clipboard: {
        writeText: writeTextMock,
      },
    });

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

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const copyButton = screen.getByText('Copy to Clipboard');
    fireEvent.click(copyButton);

    expect(writeTextMock).toHaveBeenCalledWith(
      'flour: 2 cups\nsugar: 1.5 cups'
    );
    expect(alertMock).toHaveBeenCalledWith('Shopping list copied to clipboard!');

    alertMock.mockRestore();
  });

  it('should handle print functionality', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    // Mock window.print
    const printMock = vi.fn();
    window.print = printMock;

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const printButton = screen.getByText('Print');
    fireEvent.click(printButton);

    expect(printMock).toHaveBeenCalled();
  });

  it('should display loading state while generating', () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockImplementation(
      () => new Promise(() => {}) // Never resolves
    );

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    expect(screen.getByText(/Generating shopping list/i)).toBeInTheDocument();
  });

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

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

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(alertMock).toHaveBeenCalledWith('Failed to generate shopping list');
    });

    alertMock.mockRestore();
  });

  it('should display empty state when no items', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: {
        items: [],
        dateRange: { start: '2025-01-01', end: '2025-01-31' },
        recipeCount: 0,
      },
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText(/No meals planned for this date range/)).toBeInTheDocument();
    });
  });

  it('should display recipe count and date range', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText(/2/)).toBeInTheDocument(); // recipe count
      expect(screen.getByText(/1\/1\/2025/)).toBeInTheDocument();
      expect(screen.getByText(/1\/31\/2025/)).toBeInTheDocument();
    });
  });

  it('should close modal when close button clicked', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const closeButton = screen.getByText('✕');
    fireEvent.click(closeButton);

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

  it('should close modal when clicking overlay', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const overlay = document.querySelector('.modal-overlay');
    if (overlay) {
      fireEvent.click(overlay);
    }

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

  it('should not close modal when clicking content', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const modalContent = document.querySelector('.modal-content');
    if (modalContent) {
      fireEvent.click(modalContent);
    }

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

  it('should allow changing date range', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

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

    const startDateInput = screen.getByLabelText('From') as HTMLInputElement;
    const endDateInput = screen.getByLabelText('To') as HTMLInputElement;

    expect(startDateInput.value).toBe('2025-01-01');
    expect(endDateInput.value).toBe('2025-01-31');

    fireEvent.change(startDateInput, { target: { value: '2025-01-15' } });
    fireEvent.change(endDateInput, { target: { value: '2025-01-20' } });

    expect(startDateInput.value).toBe('2025-01-15');
    expect(endDateInput.value).toBe('2025-01-20');
  });

  it('should regenerate list when regenerate button clicked', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: mockShoppingList,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(mealPlansApi.generateShoppingList).toHaveBeenCalledTimes(1);
    });

    // Change dates
    const startDateInput = screen.getByLabelText('From');
    fireEvent.change(startDateInput, { target: { value: '2025-01-10' } });

    // Click regenerate
    const regenerateButton = screen.getByText('Regenerate');
    fireEvent.click(regenerateButton);

    await waitFor(() => {
      expect(mealPlansApi.generateShoppingList).toHaveBeenCalledTimes(2);
      expect(mealPlansApi.generateShoppingList).toHaveBeenLastCalledWith({
        startDate: '2025-01-10',
        endDate: '2025-01-31',
      });
    });
  });

  it('should handle null shopping list data', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: null,
    } as any);

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText(/No meals planned for this date range/)).toBeInTheDocument();
    });
  });

  it('should not copy to clipboard when no shopping list', async () => {
    vi.mocked(mealPlansApi.generateShoppingList).mockResolvedValue({
      data: null,
    } as any);

    // Mock clipboard API
    const writeTextMock = vi.fn();
    Object.assign(navigator, {
      clipboard: {
        writeText: writeTextMock,
      },
    });

    render(
      <ShoppingListModal dateRange={mockDateRange} onClose={mockOnClose} />
    );

    await waitFor(() => {
      expect(screen.getByText(/No meals planned/)).toBeInTheDocument();
    });

    // Copy button should not be visible
    expect(screen.queryByText('Copy to Clipboard')).not.toBeInTheDocument();
  });
});