goodgo-platform/apps/web/components/leads/__tests__/create-lead-dialog.spec.tsx

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { CreateLeadDialog } from '../create-lead-dialog';

// Mock the hook
const mockMutate = vi.fn();
vi.mock('@/lib/hooks/use-leads', () => ({
  useCreateLead: () => ({
    mutate: mockMutate,
    isPending: false,
  }),
}));

// Mock Dialog components with simplified versions
vi.mock('@/components/ui/dialog', () => ({
  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
    open ? <div data-testid="dialog">{children}</div> : null,
  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
    <div data-testid="dialog-content" className={className}>{children}</div>
  ),
  DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogTitle: ({ children }: { children: React.ReactNode }) => <h2>{children}</h2>,
  DialogDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,
  DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

describe('CreateLeadDialog', () => {
  beforeEach(() => {
    mockMutate.mockClear();
  });

  it('renders dialog when open', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Thêm lead mới')).toBeInTheDocument();
  });

  it('does not render when closed', () => {
    render(<CreateLeadDialog open={false} onOpenChange={vi.fn()} />);
    expect(screen.queryByText('Thêm lead mới')).not.toBeInTheDocument();
  });

  it('renders customer name input', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Tên khách hàng *')).toBeInTheDocument();
  });

  it('renders phone input', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Số điện thoại *')).toBeInTheDocument();
  });

  it('renders email input', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Email')).toBeInTheDocument();
  });

  it('renders source select', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Nguồn')).toBeInTheDocument();
  });

  it('renders score input', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Điểm (0-100)')).toBeInTheDocument();
  });

  it('renders notes textarea', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByLabelText('Ghi chú')).toBeInTheDocument();
  });

  it('renders cancel and submit buttons', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Hủy')).toBeInTheDocument();
    expect(screen.getByText('Tạo lead')).toBeInTheDocument();
  });

  it('calls onOpenChange when cancel clicked', async () => {
    const user = userEvent.setup();
    const onOpenChange = vi.fn();
    render(<CreateLeadDialog open={true} onOpenChange={onOpenChange} />);

    await user.click(screen.getByText('Hủy'));
    expect(onOpenChange).toHaveBeenCalledWith(false);
  });

  it('calls mutate when form is submitted', async () => {
    const user = userEvent.setup();
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);

    await user.type(screen.getByLabelText('Tên khách hàng *'), 'Nguyễn Văn Test');
    await user.type(screen.getByLabelText('Số điện thoại *'), '0901234567');
    await user.click(screen.getByText('Tạo lead'));

    expect(mockMutate).toHaveBeenCalled();
  });

  it('renders description text', () => {
    render(<CreateLeadDialog open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Nhập thông tin khách hàng tiềm năng')).toBeInTheDocument();
  });
});