Alfred/tests/web/components/ModelTable.test.tsx

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

import type { Model, ProviderOption } from "../../../src/shared/api";

import { ModelTable } from "../../../src/web/features/models/components/ModelTable";
import { renderWithProviders } from "../test-utils";

const OPENAI_PROVIDER: ProviderOption = {
  id: "pv1",
  name: "OpenAI",
  type: "openai",
};

const DEEPSEEK_PROVIDER: ProviderOption = {
  id: "pv2",
  name: "DeepSeek",
  type: "openai-compatible",
};

const ENABLED_MODEL: Model = {
  capabilities: ["text", "reasoning"],
  contextLength: 128000,
  createdAt: "2024-01-01T00:00:00.000Z",
  id: "m1",
  maxOutputTokens: 4096,
  modelId: "gpt-4o",
  name: "GPT-4o",
  providerId: "pv1",
  updatedAt: "2024-01-01T00:00:00.000Z",
};

const DISABLED_MODEL: Model = {
  capabilities: ["text"],
  contextLength: null,
  createdAt: "2024-01-01T00:00:00.000Z",
  id: "m2",
  maxOutputTokens: null,
  modelId: "deepseek-chat",
  name: "DeepSeek Chat",
  providerId: "pv2",
  updatedAt: "2024-01-01T00:00:00.000Z",
};

function clickLatestConfirmButton() {
  const buttons = screen.getAllByRole("button", { name: /OK|确定/ });
  fireEvent.click(buttons[buttons.length - 1]!);
}

describe("ModelTable", () => {
  test("渲染模型表格数据", () => {
    renderWithProviders(
      createElement(ModelTable, {
        data: { items: [ENABLED_MODEL, DISABLED_MODEL], page: 1, pageSize: 20, total: 2 },
        loading: false,
        onDelete: () => Promise.resolve(),
        onEdit: () => undefined,
        onPageChange: () => undefined,
        page: 1,
        pageSize: 20,
        providers: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER],
      }),
    );

    expect(screen.getByText("GPT-4o")).not.toBeNull();
    expect(screen.getByText("DeepSeek Chat")).not.toBeNull();
    expect(screen.getByText("OpenAI")).not.toBeNull();
    expect(screen.getByText("DeepSeek")).not.toBeNull();
    expect(screen.queryByText("状态")).toBeNull();
    expect(screen.queryByRole("button", { name: /启用|禁用/ })).toBeNull();
  });

  test("模型表格操作触发 edit/delete", async () => {
    const onDelete = mock(() => Promise.resolve());
    const onEdit = mock(() => undefined);

    renderWithProviders(
      createElement(ModelTable, {
        data: { items: [ENABLED_MODEL, DISABLED_MODEL], page: 1, pageSize: 20, total: 2 },
        loading: false,
        onDelete,
        onEdit,
        onPageChange: () => undefined,
        page: 1,
        pageSize: 20,
        providers: [OPENAI_PROVIDER, DEEPSEEK_PROVIDER],
      }),
    );

    fireEvent.click(screen.getAllByRole("button", { name: /编辑/ })[0]!);
    expect(onEdit).toHaveBeenCalledWith(ENABLED_MODEL);

    fireEvent.click(screen.getAllByRole("button", { name: /删除/ })[0]!);
    await waitFor(() => expect(screen.getByText("确认删除此模型？")).not.toBeNull());
    clickLatestConfirmButton();
    await waitFor(() => expect(onDelete).toHaveBeenCalledWith("m1"));
  });
});