stack/apps/web/src/components/chat/ChatEmptyState.test.tsx

/**
 * @file ChatEmptyState.test.tsx
 * @description Tests for ChatEmptyState component: greeting, suggestions, click handling
 */

import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { ChatEmptyState } from "./ChatEmptyState";

describe("ChatEmptyState", () => {
  it("should render the greeting heading", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByRole("heading", { name: /how can i help/i })).toBeDefined();
  });

  it("should render the empty state container", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByTestId("chat-empty-state")).toBeDefined();
  });

  it("should render four suggestion buttons", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    // Four suggestions
    const buttons = screen.getAllByRole("button");
    expect(buttons.length).toBe(4);
  });

  it("should render 'Explain this project' suggestion", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByText("Explain this project")).toBeDefined();
  });

  it("should render 'Help me debug' suggestion", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByText("Help me debug")).toBeDefined();
  });

  it("should render 'Write a test for' suggestion", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByText("Write a test for")).toBeDefined();
  });

  it("should render 'Refactor this code' suggestion", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    expect(screen.getByText("Refactor this code")).toBeDefined();
  });

  it("should call onSuggestionClick with the correct prompt when a suggestion is clicked", () => {
    const onSuggestionClick = vi.fn();
    render(<ChatEmptyState onSuggestionClick={onSuggestionClick} />);

    const explainButton = screen.getByTestId("suggestion-explain-this-project");
    fireEvent.click(explainButton);

    expect(onSuggestionClick).toHaveBeenCalledOnce();
    const [calledWith] = onSuggestionClick.mock.calls[0] as [string];
    expect(calledWith).toContain("overview of this project");
  });

  it("should call onSuggestionClick for 'Help me debug' prompt", () => {
    const onSuggestionClick = vi.fn();
    render(<ChatEmptyState onSuggestionClick={onSuggestionClick} />);

    const debugButton = screen.getByTestId("suggestion-help-me-debug");
    fireEvent.click(debugButton);

    expect(onSuggestionClick).toHaveBeenCalledOnce();
    const [calledWith] = onSuggestionClick.mock.calls[0] as [string];
    expect(calledWith).toContain("debugging");
  });

  it("should call onSuggestionClick for 'Write a test for' prompt", () => {
    const onSuggestionClick = vi.fn();
    render(<ChatEmptyState onSuggestionClick={onSuggestionClick} />);

    const testButton = screen.getByTestId("suggestion-write-a-test-for");
    fireEvent.click(testButton);

    expect(onSuggestionClick).toHaveBeenCalledOnce();
  });

  it("should call onSuggestionClick for 'Refactor this code' prompt", () => {
    const onSuggestionClick = vi.fn();
    render(<ChatEmptyState onSuggestionClick={onSuggestionClick} />);

    const refactorButton = screen.getByTestId("suggestion-refactor-this-code");
    fireEvent.click(refactorButton);

    expect(onSuggestionClick).toHaveBeenCalledOnce();
    const [calledWith] = onSuggestionClick.mock.calls[0] as [string];
    expect(calledWith).toContain("refactor");
  });

  it("should have accessible aria-label on each suggestion button", () => {
    render(<ChatEmptyState onSuggestionClick={vi.fn()} />);
    const buttons = screen.getAllByRole("button");
    for (const button of buttons) {
      const label = button.getAttribute("aria-label");
      expect(label).toBeTruthy();
      expect(label).toMatch(/suggestion:/i);
    }
  });
});