frontend/src/components/chat/ChatTranscript.test.tsx

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

describe("ChatTranscript", () => {
  it("renders transcript as an accessible log", () => {
    const bottomRef = createRef<HTMLDivElement>();
    render(
      <ChatTranscript
        turns={[{ role: "assistant", created_at: "2026-02-07T12:00:00Z", content: "Hello" }]}
        busy={false}
        bottomRef={bottomRef}
        renderMessage={(turn) => (turn as { content: string }).content}
      />
    );

    expect(screen.getByRole("log", { name: "Conversation transcript" })).toBeInTheDocument();
    expect(screen.getByLabelText("Assistant message")).toBeInTheDocument();
  });

  it("shows status region while busy", () => {
    const bottomRef = createRef<HTMLDivElement>();
    render(
      <ChatTranscript
        turns={[]}
        busy
        bottomRef={bottomRef}
        busyLabel="Thinking..."
        renderMessage={() => null}
      />
    );

    expect(screen.getByRole("status", { name: "Assistant is responding" })).toBeInTheDocument();
    expect(screen.getByText("Thinking...")).toBeInTheDocument();
  });

  it("renders toolbar with jump-to-latest action", () => {
    const bottomRef = createRef<HTMLDivElement>();
    render(
      <ChatTranscript
        turns={[
          { role: "user", content: "Hi" },
          { role: "assistant", content: "Hello" },
        ]}
        busy={false}
        bottomRef={bottomRef}
        renderMessage={(turn) => (turn as { content: string }).content}
      />
    );

    expect(screen.getByText("2 messages")).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Jump to latest" })).toBeInTheDocument();
  });
});