@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/tu-do/boards/boardId/menus/__tests__/task-menus.test.tsx

@@ -1,708 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import type { Task } from '@tuturuuu/types/primitives/Task';
-import type { TaskList } from '@tuturuuu/types/primitives/TaskList';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-const taskSchedulingApiMock = vi.hoisted(() => ({
-  getCurrentUserTaskSchedule: vi.fn(),
-  updateCurrentUserTaskSchedulingSettings: vi.fn(),
-}));
-
-vi.mock('@tuturuuu/internal-api', () => taskSchedulingApiMock);
-
-vi.mock('@tuturuuu/ui/sonner', () => ({
-  toast: {
-    error: vi.fn(),
-    success: vi.fn(),
-  },
-}));
-
-vi.mock('@tuturuuu/ui/switch', () => ({
-  Switch: ({ checked, disabled, onCheckedChange }: any) => (
-    <button
-      aria-checked={checked}
-      disabled={disabled}
-      onClick={() => onCheckedChange?.(!checked)}
-      role="switch"
-      type="button"
-    />
-  ),
-}));
-
-vi.mock('next-intl', () => ({
-  useTranslations: () => (key: string) => {
-    const map: Record<string, string> = {
-      'common.list_name_to_do': 'To Do',
-      'common.list_name_in_progress': 'In Progress',
-      'common.list_name_done': 'Done',
-      'common.list_name_closed': 'Closed',
-      'common.documents': 'Documents',
-      'ws-task-boards.layout_settings.add_new_list': 'Add New List',
-      'ws-task-boards.select_or_create_list': 'Select or create a list',
-      'ws-task-boards.dialog.no_lists_found': 'No lists',
-    };
-    return map[key] ?? key;
-  },
-}));
-
-vi.mock('../../../../shared/create-list-dialog', () => ({
-  CreateListDialog: () => null,
-}));
-
-import { TaskDueDateMenu } from '../task-due-date-menu';
-import { TaskEstimationMenu } from '../task-estimation-menu';
-import { TaskLabelsMenu } from '../task-labels-menu';
-import { TaskMoveMenu } from '../task-move-menu';
-import { TaskPriorityMenu } from '../task-priority-menu';
-import { TaskProjectsMenu } from '../task-projects-menu';
-import { TaskSchedulingMenu } from '../task-scheduling-menu';
-import {
-  formatTaskDurationLabel,
-  formatTaskSchedulingBadgeTitle,
-} from '../task-scheduling-utils';
-
-// Mock dropdown components to avoid Radix UI context issues in tests
-vi.mock('@tuturuuu/ui/dropdown-menu', () => ({
-  DropdownMenuSub: ({ children }: any) => (
-    <div data-testid="dropdown-sub">{children}</div>
-  ),
-  DropdownMenuSubTrigger: ({ children, className }: any) => (
-    <button type="button" className={className} data-testid="dropdown-trigger">
-      {children}
-    </button>
-  ),
-  DropdownMenuSubContent: ({ children }: any) => (
-    <div data-testid="dropdown-content">{children}</div>
-  ),
-  DropdownMenuItem: ({ children, disabled, onSelect }: any) => (
-    <div
-      data-testid="dropdown-item"
-      data-disabled={disabled}
-      onClick={onSelect}
-    >
-      {children}
-    </div>
-  ),
-  DropdownMenuSeparator: () => <hr data-testid="dropdown-separator" />,
-}));
-
-vi.mock('@tuturuuu/ui/scroll-area', () => ({
-  ScrollArea: ({ children }: any) => (
-    <div data-testid="scroll-area">{children}</div>
-  ),
-}));
-
-describe('TaskPriorityMenu', () => {
-  const mockOnPriorityChange = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-  const mockOnClose = vi.fn();
-
-  it('should render priority menu with current priority', () => {
-    render(
-      <TaskPriorityMenu
-        currentPriority="high"
-        isLoading={false}
-        onPriorityChange={mockOnPriorityChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getByText('Priority')).toBeInTheDocument();
-    expect(screen.getAllByText('High').length).toBeGreaterThan(0);
-  });
-
-  it('should show "None" when no priority is set', () => {
-    render(
-      <TaskPriorityMenu
-        currentPriority={null}
-        isLoading={false}
-        onPriorityChange={mockOnPriorityChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getAllByText('None').length).toBeGreaterThan(0);
-  });
-
-  it('should render all priority options', () => {
-    render(
-      <TaskPriorityMenu
-        currentPriority={null}
-        isLoading={false}
-        onPriorityChange={mockOnPriorityChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getByText('Urgent')).toBeInTheDocument();
-    expect(screen.getByText('High')).toBeInTheDocument();
-    expect(screen.getByText('Medium')).toBeInTheDocument();
-    expect(screen.getByText('Low')).toBeInTheDocument();
-  });
-});
-
-describe('TaskDueDateMenu', () => {
-  const mockOnDueDateChange = vi.fn();
-  const mockOnCustomDateClick = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-  const mockOnClose = vi.fn();
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should render due date menu', () => {
-    render(
-      <TaskDueDateMenu
-        endDate={null}
-        isLoading={false}
-        onDueDateChange={mockOnDueDateChange}
-        onCustomDateClick={mockOnCustomDateClick}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getByText('Due Date')).toBeInTheDocument();
-    expect(screen.getByText('None')).toBeInTheDocument();
-  });
-
-  it('should render all date options', () => {
-    render(
-      <TaskDueDateMenu
-        endDate={null}
-        isLoading={false}
-        onDueDateChange={mockOnDueDateChange}
-        onCustomDateClick={mockOnCustomDateClick}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getByText('Today')).toBeInTheDocument();
-    expect(screen.getByText('Tomorrow')).toBeInTheDocument();
-    expect(screen.getByText('This Week')).toBeInTheDocument();
-    expect(screen.getByText('Next Week')).toBeInTheDocument();
-    expect(screen.getByText('Custom Date')).toBeInTheDocument();
-  });
-
-  it('should show remove option when date is set', () => {
-    render(
-      <TaskDueDateMenu
-        endDate={new Date().toISOString()}
-        isLoading={false}
-        onDueDateChange={mockOnDueDateChange}
-        onCustomDateClick={mockOnCustomDateClick}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    expect(screen.getByText('Remove Due Date')).toBeInTheDocument();
-  });
-
-  it('should render compact due date summaries without wrapping the trigger label', () => {
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date('2026-01-15T12:00:00.000Z'));
-
-    render(
-      <TaskDueDateMenu
-        endDate="2026-03-16T12:00:00.000Z"
-        isLoading={false}
-        onDueDateChange={mockOnDueDateChange}
-        onCustomDateClick={mockOnCustomDateClick}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onClose={mockOnClose}
-      />
-    );
-
-    const triggerLabel = screen.getByText('Due Date');
-    const compactDate = screen.getByText('in 2mo');
-
-    expect(screen.getByTestId('dropdown-trigger')).toHaveClass('min-w-0');
-    expect(triggerLabel).toHaveClass(
-      'min-w-0',
-      'flex-1',
-      'truncate',
-      'whitespace-nowrap'
-    );
-    expect(compactDate).toHaveClass(
-      'shrink-0',
-      'truncate',
-      'whitespace-nowrap',
-      'text-right'
-    );
-    expect(screen.queryByText('in about 2 months')).not.toBeInTheDocument();
-  });
-});
-
-describe('task scheduling utilities', () => {
-  it('formats compact task duration labels', () => {
-    expect(formatTaskDurationLabel(null)).toBeNull();
-    expect(formatTaskDurationLabel(0)).toBeNull();
-    expect(formatTaskDurationLabel(0.75)).toBe('45m');
-    expect(formatTaskDurationLabel(2)).toBe('2h');
-    expect(formatTaskDurationLabel(1.5)).toBe('1h 30m');
-  });
-
-  it('formats compact scheduling badge titles with split and auto-schedule details', () => {
-    expect(
-      formatTaskSchedulingBadgeTitle({
-        autoSchedule: true,
-        calendarHours: 'work_hours',
-        durationLabel: '2h',
-        isSplittable: true,
-        labels: {
-          autoSchedule: 'Auto-schedule',
-          estimatedDuration: 'Estimated Duration',
-          meetingHours: 'Meeting Hours',
-          personalHours: 'Personal Hours',
-          splittable: 'Splittable',
-          workHours: 'Work Hours',
-        },
-        maxSplitDurationMinutes: 90,
-        minSplitDurationMinutes: 30,
-      })
-    ).toBe(
-      'Estimated Duration: 2h | Work Hours | Splittable: 30m-1h 30m | Auto-schedule'
-    );
-  });
-});
-
-describe('TaskSchedulingMenu', () => {
-  beforeEach(() => {
-    taskSchedulingApiMock.getCurrentUserTaskSchedule.mockReset();
-    taskSchedulingApiMock.updateCurrentUserTaskSchedulingSettings.mockReset();
-  });
-
-  function renderSchedulingMenu(taskOverrides: Partial<Task> = {}) {
-    const queryClient = new QueryClient({
-      defaultOptions: {
-        mutations: { retry: false },
-        queries: { retry: false },
-      },
-    });
-    const task: Task = {
-      created_at: '2026-06-04T00:00:00.000Z',
-      display_number: 1,
-      id: 'task-1',
-      list_id: 'list-1',
-      name: 'Schedulable task',
-      total_duration: 1.5,
-      calendar_hours: 'work_hours',
-      auto_schedule: true,
-      ...taskOverrides,
-    };
-    const onUpdate = vi.fn();
-
-    render(
-      <QueryClientProvider client={queryClient}>
-        <TaskSchedulingMenu
-          boardId="board-1"
-          onUpdate={onUpdate}
-          task={task}
-          translations={{
-            autoSchedule: 'Auto-schedule',
-            clear: 'Clear',
-            estimatedDuration: 'Estimated Duration',
-            error: 'Error',
-            h: 'h',
-            hourType: 'Hour Type',
-            m: 'm',
-            maxSplit: 'Max split',
-            meetingHours: 'Meeting Hours',
-            minSplit: 'Min split',
-            personalHours: 'Personal Hours',
-            save: 'Save',
-            saved: 'Saved',
-            schedule: 'Schedule',
-            splittable: 'Splittable',
-            workHours: 'Work Hours',
-          }}
-        />
-      </QueryClientProvider>
-    );
-
-    return { onUpdate, queryClient };
-  }
-
-  it('saves personal scheduling settings from the menu', async () => {
-    taskSchedulingApiMock.updateCurrentUserTaskSchedulingSettings.mockResolvedValue(
-      { ok: true, task_ws_id: 'workspace-1' }
-    );
-    const { onUpdate } = renderSchedulingMenu();
-
-    fireEvent.click(screen.getByRole('button', { name: 'Save' }));
-
-    await waitFor(() =>
-      expect(
-        taskSchedulingApiMock.updateCurrentUserTaskSchedulingSettings
-      ).toHaveBeenCalledWith(
-        'task-1',
-        expect.objectContaining({
-          auto_schedule: true,
-          calendar_hours: 'work_hours',
-          is_splittable: false,
-          max_split_duration_minutes: null,
-          min_split_duration_minutes: null,
-          total_duration: 1.5,
-        })
-      )
-    );
-    expect(onUpdate).toHaveBeenCalledTimes(1);
-  });
-
-  it('clears personal scheduling settings from the menu', async () => {
-    taskSchedulingApiMock.updateCurrentUserTaskSchedulingSettings.mockResolvedValue(
-      { ok: true, task_ws_id: 'workspace-1' }
-    );
-    renderSchedulingMenu({
-      is_splittable: true,
-      max_split_duration_minutes: 90,
-      min_split_duration_minutes: 30,
-    });
-
-    fireEvent.click(screen.getByRole('button', { name: 'Clear' }));
-
-    await waitFor(() =>
-      expect(
-        taskSchedulingApiMock.updateCurrentUserTaskSchedulingSettings
-      ).toHaveBeenCalledWith(
-        'task-1',
-        expect.objectContaining({
-          auto_schedule: false,
-          calendar_hours: null,
-          is_splittable: false,
-          max_split_duration_minutes: null,
-          min_split_duration_minutes: null,
-          total_duration: null,
-        })
-      )
-    );
-  });
-});
-
-describe('TaskEstimationMenu', () => {
-  const mockOnEstimationChange = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-
-  it('should not render when no estimation type is set', () => {
-    const { container } = render(
-      <TaskEstimationMenu
-        currentPoints={null}
-        estimationType={undefined}
-        extendedEstimation={false}
-        allowZeroEstimates={false}
-        isLoading={false}
-        onEstimationChange={mockOnEstimationChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render estimation menu with fibonacci points', () => {
-    render(
-      <TaskEstimationMenu
-        currentPoints={null}
-        estimationType="fibonacci"
-        extendedEstimation={false}
-        allowZeroEstimates={false}
-        isLoading={false}
-        onEstimationChange={mockOnEstimationChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Estimation')).toBeInTheDocument();
-  });
-
-  it('should show upgrade hint for extended options when not enabled', () => {
-    render(
-      <TaskEstimationMenu
-        currentPoints={null}
-        estimationType="fibonacci"
-        extendedEstimation={false}
-        allowZeroEstimates={false}
-        isLoading={false}
-        onEstimationChange={mockOnEstimationChange}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    // Component should render without errors
-    expect(screen.getByText('Estimation')).toBeInTheDocument();
-
-    // Check for upgrade hints (they may or may not be present depending on implementation)
-    const upgradeTexts = screen.queryAllByText(/\(upgrade\)/i);
-    // If upgrade hints are shown, verify they exist, otherwise just pass
-    if (upgradeTexts.length > 0) {
-      expect(upgradeTexts.length).toBeGreaterThan(0);
-    }
-  });
-});
-
-describe('TaskLabelsMenu', () => {
-  const mockLabels = [
-    { id: 'label-1', name: 'Bug', color: '#ff0000' },
-    { id: 'label-2', name: 'Feature', color: '#00ff00' },
-  ];
-
-  const mockOnToggleLabel = vi.fn();
-  const mockOnCreateNewLabel = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-
-  it('should render labels menu', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[]}
-        availableLabels={mockLabels}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Labels')).toBeInTheDocument();
-  });
-
-  it('should show all available labels', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[]}
-        availableLabels={mockLabels}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Bug')).toBeInTheDocument();
-    expect(screen.getByText('Feature')).toBeInTheDocument();
-  });
-
-  it('should show create new label option', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[]}
-        availableLabels={mockLabels}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Create New Label')).toBeInTheDocument();
-  });
-
-  it('should show applied count when labels are selected', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[mockLabels[0]!]}
-        availableLabels={mockLabels}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('1 applied')).toBeInTheDocument();
-  });
-
-  it('should show empty state when no labels available', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[]}
-        availableLabels={[]}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('No labels available')).toBeInTheDocument();
-  });
-
-  it('should ignore labels with missing names without crashing', () => {
-    render(
-      <TaskLabelsMenu
-        taskLabels={[]}
-        availableLabels={[
-          ...mockLabels,
-          { id: 'label-3', color: '#0000ff' } as any,
-        ]}
-        isLoading={false}
-        onToggleLabel={mockOnToggleLabel}
-        onCreateNewLabel={mockOnCreateNewLabel}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Bug')).toBeInTheDocument();
-    expect(screen.getByText('Feature')).toBeInTheDocument();
-  });
-});
-
-describe('TaskProjectsMenu', () => {
-  const mockProjects = [
-    { id: 'project-1', name: 'Project Alpha', status: 'active' },
-    { id: 'project-2', name: 'Project Beta', status: null },
-  ];
-
-  const mockOnToggleProject = vi.fn();
-  const mockOnCreateNewProject = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-
-  it('should render projects menu', () => {
-    render(
-      <TaskProjectsMenu
-        taskProjects={[]}
-        availableProjects={mockProjects}
-        isLoading={false}
-        onToggleProject={mockOnToggleProject}
-        onCreateNewProject={mockOnCreateNewProject}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Projects')).toBeInTheDocument();
-  });
-
-  it('should show all available projects', () => {
-    render(
-      <TaskProjectsMenu
-        taskProjects={[]}
-        availableProjects={mockProjects}
-        isLoading={false}
-        onToggleProject={mockOnToggleProject}
-        onCreateNewProject={mockOnCreateNewProject}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Project Alpha')).toBeInTheDocument();
-    expect(screen.getByText('Project Beta')).toBeInTheDocument();
-  });
-
-  it('should show assigned count when projects are selected', () => {
-    render(
-      <TaskProjectsMenu
-        taskProjects={[mockProjects[0]!]}
-        availableProjects={mockProjects}
-        isLoading={false}
-        onToggleProject={mockOnToggleProject}
-        onCreateNewProject={mockOnCreateNewProject}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('1 assigned')).toBeInTheDocument();
-  });
-
-  it('should show empty state when no projects available', () => {
-    render(
-      <TaskProjectsMenu
-        taskProjects={[]}
-        availableProjects={[]}
-        isLoading={false}
-        onToggleProject={mockOnToggleProject}
-        onCreateNewProject={mockOnCreateNewProject}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('No projects available')).toBeInTheDocument();
-  });
-
-  it('should ignore projects with missing names without crashing', () => {
-    render(
-      <TaskProjectsMenu
-        taskProjects={[]}
-        availableProjects={[
-          ...mockProjects,
-          { id: 'project-3', status: 'active' } as any,
-        ]}
-        isLoading={false}
-        onToggleProject={mockOnToggleProject}
-        onCreateNewProject={mockOnCreateNewProject}
-        onMenuItemSelect={mockOnMenuItemSelect}
-      />
-    );
-
-    expect(screen.getByText('Project Alpha')).toBeInTheDocument();
-    expect(screen.getByText('Project Beta')).toBeInTheDocument();
-  });
-});
-
-describe('TaskMoveMenu', () => {
-  const mockLists: TaskList[] = [
-    { id: 'list-1', name: 'Backlog A', status: 'not_started' } as TaskList,
-    { id: 'list-2', name: 'Sprint lane', status: 'active' } as TaskList,
-    { id: 'list-3', name: 'Shipped', status: 'done' } as TaskList,
-  ];
-
-  const mockOnMoveToList = vi.fn();
-  const mockOnMenuItemSelect = vi.fn((_, action) => action());
-
-  it('should not render when no lists available', () => {
-    const { container } = render(
-      <TaskMoveMenu
-        currentListId="list-1"
-        availableLists={[]}
-        isLoading={false}
-        onMoveToList={mockOnMoveToList}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onRequestOpenCreateDialog={vi.fn()}
-      />
-    );
-
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('should render move menu with grouped lists (includes current list)', () => {
-    render(
-      <TaskMoveMenu
-        currentListId="list-1"
-        availableLists={mockLists}
-        isLoading={false}
-        onMoveToList={mockOnMoveToList}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onRequestOpenCreateDialog={vi.fn()}
-      />
-    );
-
-    expect(screen.getByText('Move')).toBeInTheDocument();
-    expect(screen.getByText('Backlog A')).toBeInTheDocument();
-    expect(screen.getByText('Sprint lane')).toBeInTheDocument();
-    expect(screen.getByText('Shipped')).toBeInTheDocument();
-    expect(screen.getByText('Add New List')).toBeInTheDocument();
-  });
-
-  it('should render move menu when only one list (create flow)', () => {
-    const singleList: TaskList[] = [mockLists[0]!];
-    render(
-      <TaskMoveMenu
-        currentListId="list-1"
-        availableLists={singleList}
-        isLoading={false}
-        onMoveToList={mockOnMoveToList}
-        onMenuItemSelect={mockOnMenuItemSelect}
-        onRequestOpenCreateDialog={vi.fn()}
-      />
-    );
-
-    expect(screen.getByText('Move')).toBeInTheDocument();
-    expect(screen.getByText('Backlog A')).toBeInTheDocument();
-    expect(screen.getByText('Add New List')).toBeInTheDocument();
-  });
-});