import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

import { Hero } from '../../src/components/landing';
import { NewSpoonForm } from '../../src/components/spoons/new-spoon-form';

vi.mock('convex/react', () => ({
  useConvexAuth: () => ({ isAuthenticated: false }),
  useMutation: () => vi.fn(),
}));

vi.mock('next/navigation', () => ({
  useRouter: () => ({ push: vi.fn() }),
}));

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

describe('component test harness', () => {
  it('renders the Spoon landing headline', () => {
    render(<Hero />);
    expect(
      screen.getByRole('heading', {
        name: /fork freely & keep them all intimately close to upstream\./i,
      }),
    ).toBeInTheDocument();
  });

  it('renders the new Spoon form fields', () => {
    render(<NewSpoonForm />);
    expect(screen.getByLabelText(/spoon name/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/upstream owner/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/upstream repository/i)).toBeInTheDocument();
  });
});