kandev/apps/web/components/task/mobile/session-task-switcher-sheet.test.tsx

import { fireEvent, render, screen, within } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";

import { ToastProvider } from "@/components/toast-provider";
import { MobileTaskList } from "@/components/task/mobile/session-task-switcher-sheet";
import type { TaskSwitcherItem } from "@/components/task/task-switcher";

const mocks = vi.hoisted(() => ({
  toggleSidebarGroupCollapsed: vi.fn(),
  appState: {
    taskPRs: { byTaskId: {} },
    comments: { byTaskId: {} },
  },
}));

type MockAppState = typeof mocks.appState & {
  toggleSidebarGroupCollapsed: typeof mocks.toggleSidebarGroupCollapsed;
};

vi.mock("@/components/state-provider", () => ({
  useAppStore: (selector: (state: MockAppState) => unknown) =>
    selector({
      ...mocks.appState,
      toggleSidebarGroupCollapsed: mocks.toggleSidebarGroupCollapsed,
    }),
  // TaskNestContextMenuItems (rendered inside the shared context menu) reads
  // the store api via useNestTask; provide a minimal stub so it renders.
  useAppStoreApi: () => ({
    getState: () => ({ kanbanMulti: { snapshots: {} } }),
  }),
}));

vi.mock("@/hooks/domains/sidebar/use-effective-sidebar-view", () => ({
  useEffectiveSidebarView: () => ({
    id: "default",
    name: "Default",
    filters: [],
    sort: { key: "updatedAt", direction: "desc" },
    group: "workflowStep",
    collapsedGroups: [],
  }),
}));

vi.mock("@/hooks/domains/sidebar/use-sidebar-task-prefs", () => ({
  useSidebarTaskPrefs: () => ({
    pinnedTaskIds: [],
    orderedTaskIds: [],
    subtaskOrderByParentId: {},
    togglePinnedTask: vi.fn(),
    handleReorderGroup: vi.fn(),
    handleReorderSubtasks: vi.fn(),
  }),
}));

function task(id: string): TaskSwitcherItem {
  return {
    id,
    title: `Task ${id}`,
    state: "TODO",
    workflowId: "workflow-1",
    workflowName: "Workflow",
    workflowStepId: "step-1",
    workflowStepTitle: "Build",
  };
}

describe("MobileTaskList", () => {
  beforeEach(() => {
    mocks.toggleSidebarGroupCollapsed.mockClear();
  });

  it("toggles workflow-step groups from the mobile sidebar", () => {
    render(
      <ToastProvider>
        <MobileTaskList
          tasks={["1", "2", "3", "4", "5"].map(task)}
          workflows={[]}
          stepsByWorkflowId={{}}
          activeTaskId={null}
          selectedTaskId={null}
          onSelectTask={vi.fn()}
          onArchiveTask={vi.fn()}
          onDeleteTask={vi.fn()}
          onDetachTask={vi.fn()}
          deletingTaskId={null}
        />
      </ToastProvider>,
    );

    const header = screen.getByTestId("sidebar-group-header");
    expect(header.textContent).toContain("Build");
    expect(header.textContent).toContain("5");

    fireEvent.click(header);

    expect(mocks.toggleSidebarGroupCollapsed).toHaveBeenCalledWith("default", "step-1");
  });

  it("opens detach from the touch task actions button for a subtask", () => {
    const onDetachTask = vi.fn();
    render(
      <ToastProvider>
        <MobileTaskList
          tasks={[task("parent"), { ...task("child"), parentTaskId: "parent" }]}
          workflows={[]}
          stepsByWorkflowId={{}}
          activeTaskId={null}
          selectedTaskId={null}
          onSelectTask={vi.fn()}
          onArchiveTask={vi.fn()}
          onDeleteTask={vi.fn()}
          onDetachTask={onDetachTask}
          deletingTaskId={null}
        />
      </ToastProvider>,
    );

    const childRow = screen
      .getByText("Task child")
      .closest<HTMLElement>("[data-testid='sidebar-task-item']");
    expect(childRow).not.toBeNull();
    fireEvent.click(within(childRow!).getByRole("button", { name: "Task actions" }));
    fireEvent.click(screen.getByRole("menuitem", { name: "Detach from parent" }));

    expect(onDetachTask).toHaveBeenCalledWith("child");
  });

  it("opens edit from the touch task actions button", () => {
    const onEditTask = vi.fn();
    const editableTask = task("editable");
    render(
      <ToastProvider>
        <MobileTaskList
          tasks={[editableTask]}
          workflows={[]}
          stepsByWorkflowId={{}}
          activeTaskId={null}
          selectedTaskId={null}
          onSelectTask={vi.fn()}
          onEditTask={onEditTask}
          onArchiveTask={vi.fn()}
          onDeleteTask={vi.fn()}
          onDetachTask={vi.fn()}
          deletingTaskId={null}
        />
      </ToastProvider>,
    );

    const row = screen
      .getByText(editableTask.title)
      .closest<HTMLElement>("[data-testid='sidebar-task-item']");
    expect(row).not.toBeNull();
    fireEvent.click(within(row!).getByRole("button", { name: "Task actions" }));
    fireEvent.click(screen.getByRole("menuitem", { name: "Edit" }));

    expect(onEditTask).toHaveBeenCalledWith(editableTask);
  });
});