ss-tools/frontend/src/lib/components/assistant/__tests__/ToolCallCard.ux.test.ts

// #region Test.AgentChat.ToolCallCard.Ux [C:3] [TYPE Module] [SEMANTICS test,agent,tools,ux]
// @BRIEF L2 UX tests for ToolCallCard retrying/timeout/cancelled states — verifies visual indicators, action buttons, and callback wiring.
// @RELATION BINDS_TO -> [AgentChat.ToolCallCard]
// @TEST_EDGE: retrying_rendered -> status=retrying shows ⟳ spinner with retry count text
// @TEST_EDGE: read_timeout_rendered -> status=timeout (read tool) shows timeout message and retry button
// @TEST_EDGE: write_timeout_rendered -> status=timeout (write tool) shows Superset status message, NO retry button
// @TEST_EDGE: cancelled_rendered -> status=cancelled shows 🚫 icon and user-cancelled message
import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/svelte";
import ToolCallCard from "../ToolCallCard.svelte";

// #region Test.AgentChat.ToolCallCard.Ux.Retrying [C:2] [TYPE Test]
// @UX_STATE retrying — ⟳ spinner with retry count text.
describe("ToolCallCard — retrying state", () => {
  it("shows spinner icon and retry count", () => {
    const { container } = render(ToolCallCard, {
      props: {
        tool: "run_migration",
        status: "retrying",
        retryCount: 1,
        maxRetries: 2,
      },
    });
    // ⟳ spinner with animate-spin class
    const spinner = container.querySelector("span.animate-spin");
    expect(spinner).toBeTruthy();
    expect(spinner?.textContent?.trim()).toBe("⟳");
    // Retry count text
    expect(container.textContent).toContain("Повторная попытка...");
    expect(container.textContent).toMatch(/\(1\/2\)/);
  });

  it("shows tool name during retry", () => {
    render(ToolCallCard, {
      props: {
        tool: "run_migration",
        status: "retrying",
        retryCount: 1,
        maxRetries: 2,
      },
    });
    expect(screen.getByText("run_migration")).toBeTruthy();
  });
});
// #endregion Test.AgentChat.ToolCallCard.Ux.Retrying

// #region Test.AgentChat.ToolCallCard.Ux.ReadTimeout [C:2] [TYPE Test]
// @UX_STATE timeout (read tool) — ⏱️ icon, timeout message, retry button with onRetry callback.
describe("ToolCallCard — read timeout state", () => {
  it("shows timeout icon and message", () => {
    const { container } = render(ToolCallCard, {
      props: {
        tool: "search_dashboards",
        status: "timeout",
        timeoutSeconds: 30,
        isWriteTool: false,
      },
    });
    expect(container.textContent).toContain("⏱️");
    expect(container.textContent).toContain("Превышено время ожидания");
    expect(container.textContent).toContain("30с");
  });

  it("shows retry button", () => {
    render(ToolCallCard, {
      props: {
        tool: "search_dashboards",
        status: "timeout",
        timeoutSeconds: 30,
        isWriteTool: false,
      },
    });
    expect(screen.getByRole("button", { name: /Повторить/ })).toBeTruthy();
  });

  it("fires onRetry callback when retry button is clicked", async () => {
    const onRetry = vi.fn();
    render(ToolCallCard, {
      props: {
        tool: "search_dashboards",
        status: "timeout",
        timeoutSeconds: 30,
        isWriteTool: false,
        onRetry,
      },
    });
    const retryBtn = screen.getByRole("button", { name: /Повторить/ });
    await fireEvent.click(retryBtn);
    expect(onRetry).toHaveBeenCalledOnce();
  });
});
// #endregion Test.AgentChat.ToolCallCard.Ux.ReadTimeout

// #region Test.AgentChat.ToolCallCard.Ux.WriteTimeout [C:2] [TYPE Test]
// @UX_STATE timeout (write tool) — Superset status message, NO retry button.
describe("ToolCallCard — write timeout state", () => {
  it("shows Superset status message", () => {
    const { container } = render(ToolCallCard, {
      props: {
        tool: "migrate_dashboard",
        status: "timeout",
        timeoutSeconds: 30,
        isWriteTool: true,
      },
    });
    expect(container.textContent).toContain("Проверьте статус операции в Superset");
  });

  it("does NOT show retry button", () => {
    render(ToolCallCard, {
      props: {
        tool: "migrate_dashboard",
        status: "timeout",
        isWriteTool: true,
      },
    });
    expect(screen.queryByRole("button", { name: /Повторить/ })).toBeNull();
  });
});
// #endregion Test.AgentChat.ToolCallCard.Ux.WriteTimeout

// #region Test.AgentChat.ToolCallCard.Ux.Cancelled [C:2] [TYPE Test]
// @UX_STATE cancelled — 🚫 icon and user-cancelled message.
describe("ToolCallCard — cancelled state", () => {
  it("shows cancelled icon and message", () => {
    const { container } = render(ToolCallCard, {
      props: {
        tool: "search_dashboards",
        status: "cancelled",
      },
    });
    expect(container.textContent).toContain("🚫");
    expect(container.textContent).toContain("Отменено пользователем");
  });
});
// #endregion Test.AgentChat.ToolCallCard.Ux.Cancelled
// #endregion Test.AgentChat.ToolCallCard.Ux