goodgo-platform/apps/web/components/inquiries/__tests__/inquiry-row.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 { InquiryReadDto } from '@/lib/inquiries-api';
import { InquiryStatusBadge, InquiryRow } from '../inquiry-row';

describe('InquiryStatusBadge', () => {
  it('renders "Đã đọc" when isRead is true', () => {
    render(<InquiryStatusBadge isRead={true} />);
    expect(screen.getByText('Đã đọc')).toBeInTheDocument();
  });

  it('renders "Chưa đọc" when isRead is false', () => {
    render(<InquiryStatusBadge isRead={false} />);
    expect(screen.getByText('Chưa đọc')).toBeInTheDocument();
  });
});

const mockInquiry: InquiryReadDto = {
  id: 'inq-1',
  listingId: 'listing-1',
  listingTitle: 'Căn hộ 2PN Quận 7',
  userId: 'user-1',
  userName: 'Nguyễn Văn A',
  userPhone: '0912345678',
  message: 'Tôi muốn xem nhà vào cuối tuần',
  phone: null,
  isRead: false,
  createdAt: '2026-01-15T10:30:00Z',
};

describe('InquiryRow', () => {
  it('renders inquiry user name', () => {
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('Nguyễn Văn A')).toBeInTheDocument();
  });

  it('renders inquiry user phone', () => {
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('0912345678')).toBeInTheDocument();
  });

  it('renders listing title', () => {
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('Căn hộ 2PN Quận 7')).toBeInTheDocument();
  });

  it('renders inquiry message', () => {
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('Tôi muốn xem nhà vào cuối tuần')).toBeInTheDocument();
  });

  it('renders unread status badge', () => {
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('Chưa đọc')).toBeInTheDocument();
  });

  it('renders read status badge when isRead is true', () => {
    const readInquiry = { ...mockInquiry, isRead: true };
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={readInquiry} onSelect={vi.fn()} />
        </tbody>
      </table>,
    );
    expect(screen.getByText('Đã đọc')).toBeInTheDocument();
  });

  it('calls onSelect when row is clicked', async () => {
    const onSelect = vi.fn();
    render(
      <table>
        <tbody>
          <InquiryRow inquiry={mockInquiry} onSelect={onSelect} />
        </tbody>
      </table>,
    );
    await userEvent.click(screen.getByText('Nguyễn Văn A'));
    expect(onSelect).toHaveBeenCalledWith(mockInquiry);
  });
});