Alfred/tests/web/components/chat/CodeBlockWithCopy.test.tsx

import { screen } from "@testing-library/react";
import { describe, expect, mock, test } from "bun:test";
import { createElement } from "react";

import { CodeBlockWithCopy } from "../../../../src/web/features/chat/parts/CodeBlockWithCopy";
import { renderWithProviders } from "../../test-utils";

const mockWriteText = mock(() => Promise.resolve());

Object.defineProperty(navigator, "clipboard", {
  configurable: true,
  get: () => ({ writeText: mockWriteText }),
});

describe("CodeBlockWithCopy", () => {
  test("block 模式渲染 CodeHighlighter 和语言标签", () => {
    renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: true,
        children: "const x = 1;",
        lang: "typescript",
        streamStatus: "done",
      }),
    );

    expect(screen.getByText("typescript")).toBeTruthy();
  });

  test("block 模式渲染复制按钮", () => {
    renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: true,
        children: "hello world",
        lang: "python",
        streamStatus: "done",
      }),
    );

    const copyBtn = screen.getByRole("button");
    expect(copyBtn).toBeTruthy();
  });

  test("block 模式语言为空时显示 plaintext", () => {
    renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: true,
        children: "some code",
        lang: "",
        streamStatus: "done",
      }),
    );

    expect(screen.getByText("plaintext")).toBeTruthy();
  });

  test("block 模式语言为 undefined 时显示 plaintext", () => {
    renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: true,
        children: "some code",
        streamStatus: "done",
      }),
    );

    expect(screen.getByText("plaintext")).toBeTruthy();
  });

  test("inline 模式返回 code 元素", () => {
    const { container } = renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: false,
        children: "inline code",
        className: "language-ts",
      }),
    );

    const code = container.querySelector("code.language-ts");
    expect(code).toBeTruthy();
    expect(code?.textContent).toBe("inline code");
  });

  test("点击复制按钮调用 clipboard.writeText", () => {
    mockWriteText.mockClear();

    renderWithProviders(
      createElement(CodeBlockWithCopy, {
        block: true,
        children: "copy me",
        lang: "javascript",
        streamStatus: "done",
      }),
    );

    const copyBtn = screen.getByRole("button");
    copyBtn.click();

    expect(mockWriteText).toHaveBeenCalledWith("copy me");
  });
});