wehub-resource-sync
122 lines
4.7 KiB
TypeScript
122 lines
4.7 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: () => {
|
|
const messages: Record<string, string> = {
|
|
"comparison.thisPage": "This page",
|
|
"comparison.open": "Open →",
|
|
"comparison.code.title": "Code tool",
|
|
"comparison.agent.title": "Broad autonomous agent",
|
|
"comparison.acp.title": "CLI used as backend by Omni",
|
|
};
|
|
return (key: string) => messages[key] ?? key;
|
|
},
|
|
}));
|
|
|
|
// ── Import after mocks ────────────────────────────────────────────────────────
|
|
|
|
const { default: CliComparisonCard } = await import("@/shared/components/cli/CliComparisonCard");
|
|
|
|
// ── 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(<CliComparisonCard 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("CliComparisonCard", () => {
|
|
it("renders 3 columns for all types", () => {
|
|
const container = renderCard("code");
|
|
expect(container.textContent).toContain("Code tool");
|
|
expect(container.textContent).toContain("Broad autonomous agent");
|
|
expect(container.textContent).toContain("CLI used as backend by Omni");
|
|
});
|
|
|
|
it("shows current page badge for currentType=code column", () => {
|
|
const container = renderCard("code");
|
|
expect(container.textContent).toContain("This page");
|
|
expect(container.textContent).toContain("✓");
|
|
});
|
|
|
|
it("shows current page badge for currentType=agent column", () => {
|
|
const container = renderCard("agent");
|
|
expect(container.textContent).toContain("This page");
|
|
expect(container.textContent).toContain("✓");
|
|
});
|
|
|
|
it("shows current page badge for currentType=acp column", () => {
|
|
const container = renderCard("acp");
|
|
expect(container.textContent).toContain("This page");
|
|
expect(container.textContent).toContain("✓");
|
|
});
|
|
|
|
it("renders Open → links for the non-current columns", () => {
|
|
const container = renderCard("code");
|
|
const links = container.querySelectorAll("a");
|
|
const texts = Array.from(links).map((a) => a.textContent);
|
|
const verLinks = texts.filter((t) => t?.includes("Open →"));
|
|
// 2 non-current columns → 2 links
|
|
expect(verLinks).toHaveLength(2);
|
|
});
|
|
|
|
it("for currentType=code, Ver → links point to agent and acp hrefs", () => {
|
|
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");
|
|
});
|
|
|
|
it("current column has primary styling class", () => {
|
|
const container = renderCard("code");
|
|
// The current column div has bg-primary/10 class
|
|
const currentCol = container.querySelector('[class*="primary"]');
|
|
expect(currentCol).not.toBeNull();
|
|
});
|
|
});
|