kandev/apps/web/components/task/task-top-bar.test.tsx

import { cleanup, render, screen, within } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { StateProvider } from "@/components/state-provider";
import { ToastProvider } from "@/components/toast-provider";
import { TaskTopBar } from "./task-top-bar";

afterEach(() => cleanup());

vi.mock("@kandev/ui/tooltip", () => ({
  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  TooltipTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  TooltipContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}));

vi.mock("@/hooks/domains/session/use-session-git", () => ({
  useSessionGit: () => ({ branch: "", renameBranch: vi.fn() }),
}));

vi.mock("@/components/task/executor-settings-button", () => ({
  ExecutorSettingsButton: () => <button data-testid="executor-settings-button">executor</button>,
}));

vi.mock("@/components/task/task-unarchive-button", () => ({
  TaskUnarchiveButton: ({ taskId }: { taskId?: string | null }) => (
    <button data-testid="task-unarchive-button">{taskId}</button>
  ),
}));

vi.mock("@/components/task/port-forward-dialog", () => ({
  PortForwardButton: () => <button>ports</button>,
}));

vi.mock("@/components/task/document/document-controls", () => ({
  DocumentControls: () => null,
}));

vi.mock("@/components/vcs-split-button", () => ({
  VcsSplitButton: () => <button>vcs</button>,
}));

vi.mock("@/components/github/pr-topbar-button", () => ({
  PRTopbarButton: () => <button data-testid="pr-topbar-button">#1472</button>,
}));

vi.mock("@/components/gitlab/mr-topbar-button", () => ({
  MRTopbarButton: () => null,
}));

vi.mock("@/components/integrations/registered-change-request-status", () => ({
  RegisteredChangeRequestStatus: ({
    taskId,
    sessionId,
    surface,
  }: {
    taskId: string | null;
    sessionId?: string | null;
    surface: string;
  }) => (
    <span data-testid={`registered-change-request-${surface}`}>
      {taskId}:{sessionId}
    </span>
  ),
}));

vi.mock("@/components/jira/jira-ticket-button", () => ({
  JiraTicketButton: () => null,
  extractJiraKey: () => null,
}));

vi.mock("@/components/linear/linear-issue-button", () => ({
  LinearIssueButton: () => null,
  extractLinearKey: () => null,
}));

vi.mock("@/hooks/domains/jira/use-jira-availability", () => ({
  useJiraAvailable: () => false,
}));

vi.mock("@/hooks/domains/linear/use-linear-availability", () => ({
  useLinearAvailable: () => false,
}));

vi.mock("@/components/task/workflow-stepper", () => ({
  WorkflowStepper: () => null,
}));

vi.mock("@/components/task/layout-preset-selector", () => ({
  LayoutPresetSelector: () => null,
}));

vi.mock("@/components/task/editors-menu", () => ({
  EditorsMenu: () => null,
}));

vi.mock("@/components/task/quick-chat-button", () => ({
  QuickChatButton: () => null,
}));

vi.mock("@/components/integrations/integrations-menu", () => ({
  IntegrationsMenu: () => null,
}));

vi.mock("@/components/task/branch-path-popover", () => ({
  BranchPathPopover: () => null,
}));

describe("TaskTopBar executor environment controls", () => {
  it("hides the executor environment button for filesystem executors", () => {
    renderTopBar(<TaskTopBar taskId="task-1" remoteExecutorType="worktree" />);

    expect(screen.queryByTestId("executor-settings-button")).toBeNull();
  });

  it("shows the executor environment button for Docker executors", () => {
    renderTopBar(<TaskTopBar taskId="task-1" remoteExecutorType="local_docker" />);

    expect(screen.getByTestId("executor-settings-button")).toBeTruthy();
  });

  it("shows the executor environment button for Kubernetes executors", () => {
    renderTopBar(<TaskTopBar taskId="task-1" remoteExecutorType="k8s" />);

    expect(screen.getByTestId("executor-settings-button")).toBeTruthy();
  });
});

describe("TaskTopBar GitHub issue link", () => {
  it("shows the linked issue before linked pull requests", () => {
    renderTopBar(
      <TaskTopBar
        taskId="task-1"
        issueUrl="https://github.com/kdlbs/kandev/issues/1470"
        issueNumber={1470}
      />,
    );

    const issue = screen.getByTestId("issue-topbar-button");
    const pr = screen.getByTestId("pr-topbar-button");

    expect(issue.textContent).toContain("#1470");
    expect(screen.getByLabelText("Task status and attention").className).toContain(
      "[&_[data-testid=issue-topbar-button]]:h-7",
    );
    expect(screen.getByLabelText("Task status and attention").className).not.toContain("[&_a]");
    expect(issue.compareDocumentPosition(pr) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
  });
});

describe("TaskTopBar registered change requests", () => {
  it("mounts plugin status beside native review controls", () => {
    renderTopBar(<TaskTopBar taskId="task-1" activeSessionId="session-1" />);

    const native = screen.getByTestId("pr-topbar-button");
    const plugin = screen.getByTestId("registered-change-request-topbar");

    expect(plugin.textContent).toBe("task-1:session-1");
    expect(native.compareDocumentPosition(plugin) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
  });
});

describe("TaskTopBar repository crumb", () => {
  function repositoryCrumb(label: string) {
    return within(screen.getByRole("navigation", { name: "breadcrumb" })).queryByText(label);
  }

  it("names the task's repository so an open task says which project it belongs to", () => {
    renderTopBar(
      <TaskTopBar taskId="task-1" taskTitle="Fix the sidebar" repositoryLabel="kdlbs/kandev" />,
    );

    const crumb = repositoryCrumb("kdlbs/kandev");
    expect(crumb).toBeTruthy();
    // Orientation, not navigation: there is no repository route to land on.
    expect(crumb!.closest("a")).toBeNull();
    // Truncation is what protects the title, so the full name lives in `title`.
    expect(crumb!.getAttribute("title")).toBe("kdlbs/kandev");
  });

  it("renders no repository crumb for a task with no repository", () => {
    renderTopBar(<TaskTopBar taskId="task-1" taskTitle="Fix the sidebar" />);

    // Any static crumb, not just a slug-shaped one: a repository with no
    // provider falls back to a bare name like "scratchpad", which a
    // slash-matching query would happily miss.
    const breadcrumb = screen.getByRole("navigation", { name: "breadcrumb" });
    expect(breadcrumb.querySelector("[title]")).toBeNull();
  });
});

describe("TaskTopBar archived task controls", () => {
  it("passes the task ID to the unarchive button", () => {
    renderTopBar(<TaskTopBar taskId="task-1" isArchived />);

    expect(screen.getByTestId("task-unarchive-button").textContent).toBe("task-1");
  });
});

function renderTopBar(ui: React.ReactNode) {
  return render(
    <StateProvider>
      <ToastProvider>{ui}</ToastProvider>
    </StateProvider>,
  );
}