import { describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import type { Task } from "@fusion/core";
import { TaskCard } from "../TaskCard";
import { loadAllAppCss } from "../../test/cssFixture";
vi.mock("lucide-react", () => ({
Link: () => ,
GitBranch: () => ,
Clock: () => ,
Pencil: () => ,
Layers: () => ,
ChevronDown: () => ,
Folder: () => ,
GitPullRequest: () => ,
CircleDot: () => ,
Target: () => ,
Bot: () => ,
Trash2: () => ,
RotateCw: () => ,
Zap: () => ,
AlertTriangle: () => ,
}));
vi.mock("../../hooks/useTaskDiffStats", () => ({
useTaskDiffStats: () => ({ stats: null, loading: false }),
}));
vi.mock("../../hooks/useBadgeWebSocket", () => ({
useBadgeWebSocket: () => ({
badgeUpdates: new Map(),
isConnected: true,
subscribeToBadge: vi.fn(),
unsubscribeFromBadge: vi.fn(),
}),
}));
vi.mock("../../hooks/useBatchBadgeFetch", () => ({
getFreshBatchData: vi.fn(() => null),
}));
vi.mock("../../api", () => ({
fetchTaskDetail: vi.fn(),
uploadAttachment: vi.fn(),
fetchMission: vi.fn(),
fetchAgent: vi.fn(),
}));
vi.mock("../../hooks/useConfirm", () => ({
useConfirm: () => ({ confirm: vi.fn(async () => true) }),
}));
function makeTask(overrides: Partial = {}): Task {
return {
id: "FN-5314",
title: "Broad scope test",
description: "",
column: "todo",
status: undefined,
steps: [],
dependencies: [],
...overrides,
} as Task;
}
const noop = () => {};
function mountCss(): () => void {
const style = document.createElement("style");
style.textContent = loadAllAppCss();
document.head.appendChild(style);
return () => style.remove();
}
describe("TaskCard broad-scope advisory chip", () => {
it("renders chip for well-formed broadScopeFlag", () => {
render(
,
);
const label = "Broad-scope advisory (score 5): Size L, many steps";
const chip = screen.getByLabelText(label);
expect(chip).toBeInTheDocument();
expect(chip).toHaveAttribute("title", label);
expect(chip.tagName).toBe("SPAN");
});
it("uses warning color + pill radius tokenized styles", () => {
const unmountCss = mountCss();
document.documentElement.style.setProperty("--color-warning", "rgb(210, 120, 0)");
document.documentElement.style.setProperty("--radius-pill", "9999px");
render(
,
);
const chip = screen.getByLabelText("Broad-scope advisory (score 5): Size L");
const styles = window.getComputedStyle(chip);
expect(styles.borderRadius).toBe("var(--radius-pill)");
expect(styles.color).toBe("var(--color-warning)");
unmountCss();
document.documentElement.style.removeProperty("--color-warning");
document.documentElement.style.removeProperty("--radius-pill");
});
it.each([
["missing sourceMetadata", undefined],
["missing broadScopeFlag", {}],
["non-numeric score", { broadScopeFlag: { score: "5", reasons: ["size-l"] } }],
["non-array reasons", { broadScopeFlag: { score: 5, reasons: "size-l" } }],
])("does not render chip when %s", (_label, sourceMetadata) => {
render(
,
);
expect(screen.queryByText("Broad scope")).not.toBeInTheDocument();
});
});