/**
 * DS-005: ComponentShowcase operator product patterns
 *
 * Asserts that the new operator-pattern sections exist in the showcase
 * so a new engineer can see live examples of hairline cell grids, editorial
 * page headers, empty state variants, and hub cells.
 */
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

// Stub Inertia Link so the component tree doesn't need a router context.
vi.mock('@inertiajs/react', () => ({
  Link: ({ href, children }: { href: string; children: React.ReactNode }) => (
    <a href={href}>{children}</a>
  ),
}));

// Stub recharts / LazyLineChart to avoid canvas-env issues in jsdom.
vi.mock('@/Components/ui/charts', () => ({
  LazyLineChart: () => <div data-testid="lazy-line-chart" />,
}));

// Stub sonner toast.
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));

import ComponentShowcase from './ComponentShowcase';

describe('ComponentShowcase — operator product patterns (DS-005)', () => {
  it('renders the Hairline Cell Grid section', () => {
    render(<ComponentShowcase />);
    expect(screen.getByText('Hairline Cell Grid')).toBeInTheDocument();
  });

  it('renders the Editorial Page Header section', () => {
    render(<ComponentShowcase />);
    expect(screen.getByText('Editorial Page Header')).toBeInTheDocument();
  });

  it('renders the Empty States section', () => {
    render(<ComponentShowcase />);
    expect(screen.getByText('Empty States')).toBeInTheDocument();
  });

  it('renders the Hub Cells section', () => {
    render(<ComponentShowcase />);
    expect(screen.getByText('Hub Cells')).toBeInTheDocument();
  });

  it('operator-patterns category label is present in the category filter', () => {
    render(<ComponentShowcase />);
    expect(screen.getByText('Operator Patterns')).toBeInTheDocument();
  });
});