Files
2026-07-13 13:39:12 +08:00

114 lines
4.4 KiB
TypeScript

// @vitest-environment jsdom
import React from "react";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { CliConceptType } from "@/shared/components/cli/CliConceptCard";
// ── Mocks ─────────────────────────────────────────────────────────────────────
vi.mock("next/link", () => ({
default: ({
href,
children,
...props
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) => (
<a href={href} {...props}>
{children}
</a>
),
}));
vi.mock("next-intl", () => ({
useTranslations: () => (key: string) => key,
}));
// ── Import after mocks ────────────────────────────────────────────────────────
const { default: CliConceptCard } = await import("@/shared/components/cli/CliConceptCard");
// ── Helpers ───────────────────────────────────────────────────────────────────
const containers: HTMLElement[] = [];
function renderCard(currentType: CliConceptType): HTMLElement {
const container = document.createElement("div");
document.body.appendChild(container);
containers.push(container);
const root = createRoot(container);
act(() => {
root.render(<CliConceptCard currentType={currentType} />);
});
return container;
}
// ── Lifecycle ─────────────────────────────────────────────────────────────────
beforeEach(() => {
(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT =
true;
});
afterEach(() => {
while (containers.length > 0) {
containers.pop()?.remove();
}
document.body.innerHTML = "";
});
// ── Tests ─────────────────────────────────────────────────────────────────────
describe("CliConceptCard", () => {
it("renders with currentType=code", () => {
const container = renderCard("code");
// The card renders (concept keys are shown as raw key strings from mock)
expect(container.textContent).toContain("concept.code.title");
});
it("renders with currentType=agent", () => {
const container = renderCard("agent");
expect(container.textContent).toContain("concept.agent.title");
});
it("renders with currentType=acp", () => {
const container = renderCard("acp");
expect(container.textContent).toContain("concept.acp.title");
});
it("for currentType=code, card has primary bg class", () => {
const container = renderCard("code");
// The root card div should have primary/5 styling
const card = container.firstElementChild as HTMLElement;
expect(card?.className ?? "").toContain("primary");
});
it("for currentType=code, renders chips for agent and acp (not code)", () => {
const container = renderCard("code");
const links = container.querySelectorAll("a");
const hrefs = Array.from(links).map((a) => a.getAttribute("href"));
expect(hrefs).toContain("/dashboard/cli-agents");
expect(hrefs).toContain("/dashboard/acp-agents");
// Should NOT link to itself
expect(hrefs).not.toContain("/dashboard/cli-code");
});
it("for currentType=agent, renders chips for code and acp", () => {
const container = renderCard("agent");
const links = container.querySelectorAll("a");
const hrefs = Array.from(links).map((a) => a.getAttribute("href"));
expect(hrefs).toContain("/dashboard/cli-code");
expect(hrefs).toContain("/dashboard/acp-agents");
expect(hrefs).not.toContain("/dashboard/cli-agents");
});
it("for currentType=acp, renders chips for code and agent", () => {
const container = renderCard("acp");
const links = container.querySelectorAll("a");
const hrefs = Array.from(links).map((a) => a.getAttribute("href"));
expect(hrefs).toContain("/dashboard/cli-code");
expect(hrefs).toContain("/dashboard/cli-agents");
expect(hrefs).not.toContain("/dashboard/acp-agents");
});
});