100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render } from "@testing-library/react";
|
|
import { TaskCard } from "../TaskCard";
|
|
import type { Task } from "@fusion/core";
|
|
import { loadAllAppCss } from "../../test/cssFixture";
|
|
|
|
vi.mock("lucide-react", () => ({
|
|
Link: () => null,
|
|
GitBranch: () => null,
|
|
Clock: () => null,
|
|
Pencil: () => null,
|
|
Layers: () => null,
|
|
ChevronDown: () => null,
|
|
Folder: () => null,
|
|
GitPullRequest: () => null,
|
|
CircleDot: () => null,
|
|
Target: () => null,
|
|
Bot: () => null,
|
|
Trash2: () => null,
|
|
RotateCw: () => null,
|
|
Zap: () => null,
|
|
}));
|
|
|
|
vi.mock("../ProviderIcon", () => ({
|
|
ProviderIcon: () => null,
|
|
}));
|
|
|
|
vi.mock("../../hooks/useTaskDiffStats", () => ({
|
|
useTaskDiffStats: () => ({ stats: null, loading: false }),
|
|
}));
|
|
|
|
const noop = () => {};
|
|
|
|
function makeTask(overrides: Partial<Task> = {}): Task {
|
|
return {
|
|
id: "FN-001",
|
|
title: "Badge height",
|
|
column: "in-progress",
|
|
status: "planning" as Task["status"],
|
|
steps: [],
|
|
dependencies: [],
|
|
description: "",
|
|
...overrides,
|
|
} as Task;
|
|
}
|
|
|
|
function mountCss() {
|
|
const style = document.createElement("style");
|
|
style.textContent = loadAllAppCss();
|
|
document.head.appendChild(style);
|
|
return () => style.remove();
|
|
}
|
|
|
|
describe("TaskCard badge heights (FN-4369)", () => {
|
|
it("keeps planning, merging, and priority pills at identical dimensions", () => {
|
|
const cleanupCss = mountCss();
|
|
|
|
const planning = render(
|
|
<TaskCard task={makeTask({ id: "FN-100", column: "in-progress", status: "planning" as Task["status"] })} onOpenDetail={noop} addToast={noop} />,
|
|
).container.querySelector(".card-status-badge");
|
|
|
|
const merging = render(
|
|
<TaskCard task={makeTask({ id: "FN-101", column: "in-review", status: "merging" as Task["status"] })} onOpenDetail={noop} addToast={noop} />,
|
|
).container.querySelector(".card-status-badge");
|
|
|
|
const urgent = render(
|
|
<TaskCard task={makeTask({ id: "FN-102", priority: "urgent" as Task["priority"] })} onOpenDetail={noop} addToast={noop} />,
|
|
).container.querySelector(".card-priority-badge--urgent");
|
|
|
|
const high = render(
|
|
<TaskCard task={makeTask({ id: "FN-103", priority: "high" as Task["priority"] })} onOpenDetail={noop} addToast={noop} />,
|
|
).container.querySelector(".card-priority-badge--high");
|
|
|
|
const low = render(
|
|
<TaskCard task={makeTask({ id: "FN-104", priority: "low" as Task["priority"] })} onOpenDetail={noop} addToast={noop} />,
|
|
).container.querySelector(".card-priority-badge--low");
|
|
|
|
expect(planning).toBeTruthy();
|
|
expect(merging).toBeTruthy();
|
|
expect(urgent).toBeTruthy();
|
|
expect(high).toBeTruthy();
|
|
expect(low).toBeTruthy();
|
|
|
|
const baseline = getComputedStyle(planning!);
|
|
|
|
for (const badge of [merging!, urgent!, high!, low!]) {
|
|
const styles = getComputedStyle(badge);
|
|
expect(styles.height).toBe(baseline.height);
|
|
expect(styles.paddingTop).toBe(baseline.paddingTop);
|
|
expect(styles.paddingBottom).toBe(baseline.paddingBottom);
|
|
expect(styles.borderTopWidth).toBe(baseline.borderTopWidth);
|
|
expect(styles.borderBottomWidth).toBe(baseline.borderBottomWidth);
|
|
expect(styles.fontSize).toBe(baseline.fontSize);
|
|
expect(styles.lineHeight).toBe(baseline.lineHeight);
|
|
}
|
|
|
|
cleanupCss();
|
|
});
|
|
});
|