114 lines
4.4 KiB
TypeScript
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");
|
|
});
|
|
});
|