syndarix/frontend/tests/components/projects/wizard/steps/AgentChatStep.test.tsx

/**
 * AgentChatStep Component Tests
 *
 * Tests for the agent chat placeholder/preview step.
 */

import { render, screen } from '@testing-library/react';
import { AgentChatStep } from '@/components/projects/wizard/steps/AgentChatStep';

describe('AgentChatStep', () => {
  describe('Rendering', () => {
    it('renders the step title', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('Requirements Discovery')).toBeInTheDocument();
    });

    it('renders the Coming in Phase 4 badge', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('Coming in Phase 4')).toBeInTheDocument();
    });

    it('renders the description text', () => {
      render(<AgentChatStep />);
      expect(screen.getByText(/chat with our product owner agent/i)).toBeInTheDocument();
    });

    it('renders the Preview Only badge', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('Preview Only')).toBeInTheDocument();
    });
  });

  describe('Agent Info', () => {
    it('displays Product Owner Agent title', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('Product Owner Agent')).toBeInTheDocument();
    });

    it('displays agent description', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('Requirements discovery and sprint planning')).toBeInTheDocument();
    });
  });

  describe('Mock Chat Messages', () => {
    it('renders the chat log area', () => {
      render(<AgentChatStep />);
      expect(screen.getByRole('log', { name: /chat preview messages/i })).toBeInTheDocument();
    });

    it('renders agent messages', () => {
      render(<AgentChatStep />);
      expect(screen.getByText(/i'm your product owner agent/i)).toBeInTheDocument();
      expect(screen.getByText(/let me break this down into user stories/i)).toBeInTheDocument();
    });

    it('renders user messages', () => {
      render(<AgentChatStep />);
      expect(screen.getByText(/i want to build an e-commerce platform/i)).toBeInTheDocument();
    });

    it('displays message timestamps', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('10:00 AM')).toBeInTheDocument();
      expect(screen.getByText('10:02 AM')).toBeInTheDocument();
      expect(screen.getByText('10:03 AM')).toBeInTheDocument();
    });
  });

  describe('Chat Input', () => {
    it('renders disabled chat input', () => {
      render(<AgentChatStep />);
      const input = screen.getByRole('textbox', { name: /chat input/i });
      expect(input).toBeDisabled();
    });

    it('shows placeholder text', () => {
      render(<AgentChatStep />);
      expect(screen.getByPlaceholderText(/disabled in preview/i)).toBeInTheDocument();
    });

    it('renders disabled send button', () => {
      render(<AgentChatStep />);
      const sendButton = screen.getByRole('button', { name: /send message/i });
      expect(sendButton).toBeDisabled();
    });

    it('shows preview disclaimer', () => {
      render(<AgentChatStep />);
      expect(screen.getByText(/this chat interface is a preview/i)).toBeInTheDocument();
    });
  });

  describe('Full Version Preview Card', () => {
    it('renders the preview card title', () => {
      render(<AgentChatStep />);
      expect(screen.getByText('What to Expect in the Full Version')).toBeInTheDocument();
    });

    it('lists expected features', () => {
      render(<AgentChatStep />);
      expect(screen.getByText(/interactive requirements gathering/i)).toBeInTheDocument();
      expect(screen.getByText(/architecture spike/i)).toBeInTheDocument();
      expect(screen.getByText(/collaborative backlog creation/i)).toBeInTheDocument();
      expect(screen.getByText(/real-time refinement/i)).toBeInTheDocument();
    });
  });

  describe('Accessibility', () => {
    it('icons have aria-hidden attribute', () => {
      render(<AgentChatStep />);
      const hiddenIcons = document.querySelectorAll('[aria-hidden="true"]');
      expect(hiddenIcons.length).toBeGreaterThan(0);
    });

    it('chat log has appropriate role', () => {
      render(<AgentChatStep />);
      expect(screen.getByRole('log')).toBeInTheDocument();
    });

    it('disabled input has accessible label', () => {
      render(<AgentChatStep />);
      expect(screen.getByRole('textbox', { name: /chat input/i })).toBeInTheDocument();
    });

    it('disabled button has accessible label', () => {
      render(<AgentChatStep />);
      expect(screen.getByRole('button', { name: /send message/i })).toBeInTheDocument();
    });
  });

  describe('Visual elements', () => {
    it('renders bot icons for agent messages', () => {
      render(<AgentChatStep />);
      const botIcons = document.querySelectorAll('.lucide-bot');
      // Should have multiple bot icons (header + messages)
      expect(botIcons.length).toBeGreaterThan(1);
    });

    it('renders user icon for user messages', () => {
      render(<AgentChatStep />);
      const userIcons = document.querySelectorAll('.lucide-user');
      expect(userIcons.length).toBeGreaterThan(0);
    });

    it('renders sparkles icon for features preview', () => {
      render(<AgentChatStep />);
      const sparklesIcons = document.querySelectorAll('.lucide-sparkles');
      expect(sparklesIcons.length).toBeGreaterThan(0);
    });
  });
});