goodgo-platform/apps/web/components/leads/__tests__/lead-detail-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 type { LeadReadDto } from '@/lib/leads-api';
import { LeadDetailDialog } from '../lead-detail-dialog';

// Mock hooks
const mockUpdateMutate = vi.fn();
const mockDeleteMutate = vi.fn();
vi.mock('@/lib/hooks/use-leads', () => ({
  useUpdateLeadStatus: () => ({
    mutate: mockUpdateMutate,
    isPending: false,
  }),
  useDeleteLead: () => ({
    mutate: mockDeleteMutate,
    isPending: false,
  }),
}));

// Mock Dialog components
vi.mock('@/components/ui/dialog', () => ({
  Dialog: ({ children, open }: { children: React.ReactNode; open: boolean }) =>
    open ? <div data-testid="dialog">{children}</div> : null,
  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{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>,
}));

const mockLead: LeadReadDto = {
  id: 'lead-1',
  agentId: 'agent-1',
  name: 'Trần Thị B',
  phone: '0987654321',
  email: 'tran@example.com',
  source: 'website',
  score: 75,
  notes: { text: 'Quan tâm căn hộ Quận 7' },
  status: 'NEW',
  createdAt: '2026-01-15T10:00:00Z',
  updatedAt: '2026-01-16T14:00:00Z',
};

describe('LeadDetailDialog', () => {
  beforeEach(() => {
    mockUpdateMutate.mockClear();
    mockDeleteMutate.mockClear();
  });

  it('returns null when lead is null', () => {
    const { container } = render(
      <LeadDetailDialog lead={null} open={true} onOpenChange={vi.fn()} />,
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders dialog title', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Chi tiết lead')).toBeInTheDocument();
  });

  it('renders lead name', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    // Name appears in both the description and the contact card
    expect(screen.getAllByText('Trần Thị B').length).toBeGreaterThanOrEqual(1);
  });

  it('renders phone number', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    // formatPhone formats VN numbers as "0xxx yyy zzz" — match with optional spaces
    expect(screen.getByText(/0987[\s]?654[\s]?321/)).toBeInTheDocument();
  });

  it('renders email when present', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText(/tran@example.com/)).toBeInTheDocument();
  });

  it('renders score', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('75/100')).toBeInTheDocument();
  });

  it('renders notes', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Quan tâm căn hộ Quận 7')).toBeInTheDocument();
  });

  it('renders quick contact links', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    // Emoji prefixed text
    const content = document.body.textContent;
    expect(content).toContain('Gọi điện');
    expect(content).toContain('Zalo');
  });

  it('renders Zalo link with correct phone format', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    const links = document.querySelectorAll('a[href*="zalo.me"]');
    expect(links.length).toBeGreaterThan(0);
    expect(links[0]).toHaveAttribute('href', 'https://zalo.me/84987654321');
  });

  it('renders delete button', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Xóa lead')).toBeInTheDocument();
  });

  it('shows confirmation on first delete click', async () => {
    const user = userEvent.setup();
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);

    await user.click(screen.getByText('Xóa lead'));
    expect(screen.getByText('Xác nhận xóa?')).toBeInTheDocument();
  });

  it('renders close button', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Đóng')).toBeInTheDocument();
  });

  it('renders status change select', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Chuyển trạng thái')).toBeInTheDocument();
  });

  it('renders timeline section', () => {
    render(<LeadDetailDialog lead={mockLead} open={true} onOpenChange={vi.fn()} />);
    expect(screen.getByText('Lịch sử')).toBeInTheDocument();
  });

  it('hides email contact when email is null', () => {
    const leadNoEmail = { ...mockLead, email: null };
    render(<LeadDetailDialog lead={leadNoEmail} open={true} onOpenChange={vi.fn()} />);
    const content = document.body.textContent;
    expect(content).not.toContain('tran@example.com');
  });
});