web-page/src/pages/agent-office/components/AgentCard.test.jsx

// src/pages/agent-office/components/AgentCard.test.jsx
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import AgentCard from './AgentCard.jsx';

describe('AgentCard', () => {
  it('에이전트의 displayName을 표시', () => {
    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />);
    expect(screen.getByText('주식 트레이더')).toBeInTheDocument();
  });

  it('working 상태일 때 dot에 working 클래스 부여', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'working' }} notificationCount={0} onClick={() => {}} />
    );
    const dot = container.querySelector('.ao-card-dot');
    expect(dot).toHaveClass('working');
  });

  it('working 상태에서는 pulse 클래스도 부여', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'working' }} notificationCount={0} onClick={() => {}} />
    );
    const dot = container.querySelector('.ao-card-dot');
    expect(dot).toHaveClass('pulse');
  });

  it('idle 상태에는 pulse 클래스 부여하지 않음', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />
    );
    const dot = container.querySelector('.ao-card-dot');
    expect(dot).not.toHaveClass('pulse');
  });

  it('agentState 없으면 idle로 fallback', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={undefined} notificationCount={0} onClick={() => {}} />
    );
    const dot = container.querySelector('.ao-card-dot');
    expect(dot).toHaveClass('idle');
  });

  it('notificationCount > 0이면 뱃지 표시', () => {
    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={3} onClick={() => {}} />);
    expect(screen.getByText('3')).toBeInTheDocument();
  });

  it('notificationCount === 0이면 뱃지 없음', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={() => {}} />
    );
    expect(container.querySelector('.ao-card-badge')).toBeNull();
  });

  it('notificationCount > 9이면 9+ 표시', () => {
    render(<AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={15} onClick={() => {}} />);
    expect(screen.getByText('9+')).toBeInTheDocument();
  });

  it('클릭 시 onClick 호출', () => {
    const onClick = vi.fn();
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} onClick={onClick} />
    );
    fireEvent.click(container.querySelector('.ao-card'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('active prop 시 카드에 active 클래스 부여', () => {
    const { container } = render(
      <AgentCard agentId="stock" agentState={{ state: 'idle' }} notificationCount={0} active onClick={() => {}} />
    );
    expect(container.querySelector('.ao-card')).toHaveClass('active');
  });
});