goodgo-platform/apps/web/components/design-system/__tests__/status-chip.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { StatusChip, type PropertyStatus } from '../status-chip';

const statuses: PropertyStatus[] = ['active', 'pending', 'sold', 'rented', 'rejected', 'draft'];

describe('StatusChip', () => {
  it.each(statuses)('renders label for status "%s"', (status) => {
    const { container } = render(<StatusChip status={status} />);
    expect(container.firstChild).toBeInTheDocument();
  });

  it('renders Vietnamese label for active', () => {
    render(<StatusChip status="active" />);
    expect(screen.getByText('Đang bán')).toBeInTheDocument();
  });

  it('renders Vietnamese label for pending', () => {
    render(<StatusChip status="pending" />);
    expect(screen.getByText('Chờ duyệt')).toBeInTheDocument();
  });

  it('renders Vietnamese label for sold', () => {
    render(<StatusChip status="sold" />);
    expect(screen.getByText('Đã bán')).toBeInTheDocument();
  });

  it('renders Vietnamese label for rented', () => {
    render(<StatusChip status="rented" />);
    expect(screen.getByText('Đã thuê')).toBeInTheDocument();
  });

  it('renders Vietnamese label for rejected', () => {
    render(<StatusChip status="rejected" />);
    expect(screen.getByText('Từ chối')).toBeInTheDocument();
  });

  it('renders Vietnamese label for draft', () => {
    render(<StatusChip status="draft" />);
    expect(screen.getByText('Bản nháp')).toBeInTheDocument();
  });

  it('renders dot by default', () => {
    const { container } = render(<StatusChip status="active" />);
    // dot is aria-hidden span
    const dot = container.querySelector('[aria-hidden]');
    expect(dot).toBeInTheDocument();
  });

  it('hides dot when hideDot=true', () => {
    const { container } = render(<StatusChip status="active" hideDot />);
    const dot = container.querySelector('[aria-hidden]');
    expect(dot).not.toBeInTheDocument();
  });
});