@tuturuuu/ui 0.8.0 → 0.10.0

package/src/components/ui/tu-do/shared/__tests__/board-header.test.tsx

@@ -1,26 +1,32 @@
 import '@testing-library/jest-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import type React from 'react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BoardHeader } from '../board-header';
 
-let boardLayoutSettingsProps:
-  | React.ComponentProps<
-      typeof import('../board-layout-settings')['BoardLayoutSettings']
-    >
-  | undefined;
+const navigationMocks = vi.hoisted(() => ({
+  replace: vi.fn(),
+}));
+const internalApiMocks = vi.hoisted(() => ({
+  getWorkspaceTaskBoard: vi.fn(),
+}));
+const comboboxMocks = vi.hoisted(() => ({
+  seenOptions: [] as { description?: string; label: string; value: string }[][],
+}));
 
 vi.mock('next-intl', () => ({
   useTranslations: () => (key: string) => key,
 }));
 
 vi.mock('next/navigation', () => ({
+  usePathname: () => '/ws-1/tasks/boards/board-1',
   useRouter: () => ({
     push: vi.fn(),
-    replace: vi.fn(),
+    replace: navigationMocks.replace,
     refresh: vi.fn(),
   }),
+  useSearchParams: () => new URLSearchParams('existing=1'),
 }));
 
 vi.mock('next/link', () => ({
@@ -40,23 +46,95 @@ vi.mock('@tuturuuu/ui/hooks/use-board-actions', () => ({
   }),
 }));
 
-vi.mock('../tasks-route-context', () => ({
-  useTasksHref: () => '/tasks',
-}));
+vi.mock('@tuturuuu/ui/custom/combobox', () => ({
+  Combobox: function MockCombobox({
+    ariaLabel,
+    className,
+    colorizeTriggerIcon,
+    disabled,
+    hideTriggerLabel,
+    onChange,
+    options,
+    placeholder,
+    selected,
+    triggerIcon,
+    triggerTooltip,
+  }: {
+    ariaLabel?: string;
+    className?: string;
+    colorizeTriggerIcon?: boolean;
+    disabled?: boolean;
+    hideTriggerLabel?: boolean;
+    onChange?: (value: string) => void;
+    options: { description?: string; label: string; value: string }[];
+    placeholder?: string;
+    selected: string;
+    triggerIcon?: React.ReactNode;
+    triggerTooltip?: React.ReactNode;
+  }) {
+    comboboxMocks.seenOptions.push(options);
 
-vi.mock('../board-layout-settings', () => ({
-  BoardLayoutSettings: (props: any) => {
-    boardLayoutSettingsProps = props;
     return (
-      <div
-        data-testid="board-layout-settings"
-        data-board-id={props.boardId}
-        data-ws-id={props.wsId ?? ''}
-      />
+      <select
+        aria-label={
+          ariaLabel ??
+          (hideTriggerLabel
+            ? options.find((option) => option.value === selected)?.label
+            : placeholder)
+        }
+        className={className}
+        data-colorize-trigger-icon={String(colorizeTriggerIcon)}
+        data-has-trigger-icon={String(Boolean(triggerIcon))}
+        data-trigger-tooltip={
+          typeof triggerTooltip === 'string' ? triggerTooltip : undefined
+        }
+        disabled={disabled}
+        value={selected}
+        onChange={(event) => onChange?.(event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
     );
   },
 }));
 
+vi.mock('@tuturuuu/internal-api/tasks', () => ({
+  getWorkspaceTaskBoard: (
+    ...args: Parameters<typeof internalApiMocks.getWorkspaceTaskBoard>
+  ) => internalApiMocks.getWorkspaceTaskBoard(...args),
+}));
+
+vi.mock('@tuturuuu/ui/dropdown-menu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+  }) => (
+    <button onClick={onClick} type="button">
+      {children}
+    </button>
+  ),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}));
+
+vi.mock('../tasks-route-context', () => ({
+  useTasksHref: () => '/tasks',
+}));
+
 vi.mock('../board-switcher', () => ({
   BoardSwitcher: () => <div data-testid="board-switcher" />,
 }));
@@ -71,6 +149,16 @@ vi.mock('../boards/boardId/task-filter', () => ({
   TaskFilter: () => <div data-testid="task-filter" />,
 }));
 
+vi.mock('../boards/boardId/kanban/planner/kanban-planner-dialog', () => ({
+  KanbanPlannerDialog: ({ open }: { open: boolean }) =>
+    open ? <div role="dialog">planner-dialog</div> : null,
+}));
+
+vi.mock('../boards/board-share-dialog', () => ({
+  BoardShareDialog: ({ open }: { open: boolean }) =>
+    open ? <div role="dialog">share-dialog</div> : null,
+}));
+
 vi.mock('../boards/copy-board-dialog', () => ({
   CopyBoardDialog: () => <div data-testid="copy-board-dialog" />,
 }));
@@ -137,36 +225,289 @@ function renderBoardHeader(
 
 describe('BoardHeader', () => {
   beforeEach(() => {
-    boardLayoutSettingsProps = undefined;
+    comboboxMocks.seenOptions = [];
+    navigationMocks.replace.mockReset();
+    internalApiMocks.getWorkspaceTaskBoard.mockReset();
+    internalApiMocks.getWorkspaceTaskBoard.mockResolvedValue({
+      board: mockBoard,
+    });
   });
 
-  it('passes the workspace id to board layout settings', () => {
+  it('renders a direct board settings button with compact outline header styling', () => {
     renderBoardHeader();
 
-    expect(screen.getByTestId('board-layout-settings')).toHaveAttribute(
-      'data-ws-id',
-      'ws-1'
+    const settingsButton = screen.getByRole('button', {
+      name: 'ws-task-boards.actions.board_settings',
+    });
+
+    expect(settingsButton).toHaveClass('border', 'h-7', 'w-7', 'px-0');
+    expect(settingsButton).toHaveClass('sm:h-8', 'sm:w-8');
+    expect(settingsButton).not.toHaveTextContent(
+      'ws-task-boards.actions.board_settings'
     );
-    expect(boardLayoutSettingsProps?.boardId).toBe('board-1');
-    expect(boardLayoutSettingsProps?.wsId).toBe('ws-1');
   });
 
-  it('uses the explicit workspace id when the board payload omits ws_id', () => {
+  it('prefetches current board settings before opening the dialog', async () => {
+    renderBoardHeader();
+
+    fireEvent.mouseEnter(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
+    );
+
+    await waitFor(() => {
+      expect(internalApiMocks.getWorkspaceTaskBoard).toHaveBeenCalledWith(
+        'ws-1',
+        'board-1',
+        expect.objectContaining({ baseUrl: expect.any(String) })
+      );
+    });
+  });
+
+  it('calls the board settings intent hook before opening the dialog', () => {
+    const onBoardSettingsIntent = vi.fn();
+
+    renderBoardHeader({ onBoardSettingsIntent });
+
+    fireEvent.pointerDown(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
+    );
+
+    expect(onBoardSettingsIntent).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens contextual board settings through query state', () => {
+    renderBoardHeader();
+
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'ws-task-boards.actions.board_settings',
+      })
+    );
+
+    expect(navigationMocks.replace).toHaveBeenCalledWith(
+      '/ws-1/tasks/boards/board-1?existing=1&settingsDialog=open&settingsTab=task_board&settingsBoardId=board-1',
+      { scroll: false }
+    );
+  });
+
+  it('renders a natural public title and hides member-only controls in read-only mode', () => {
+    renderBoardHeader({
+      publicView: true,
+      readOnly: true,
+      titlePrefix: <span data-testid="public-title-prefix">Tuturuuu /</span>,
+    });
+
+    expect(screen.queryByTestId('board-switcher')).not.toBeInTheDocument();
+    expect(screen.getByTestId('public-title-prefix')).toBeInTheDocument();
+    expect(screen.getByText('Roadmap')).toBeInTheDocument();
+    expect(screen.queryByTestId('board-user-presence')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('task-filter')).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('ws-task-boards.share.action')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+  });
+
+  it('hides the board picker when showing My Tasks', () => {
+    renderBoardHeader({
+      currentView: 'my_tasks',
+    });
+
+    expect(screen.queryByTestId('board-switcher')).not.toBeInTheDocument();
+    expect(
+      screen.getByText('ws-task-boards.views.my_tasks')
+    ).toBeInTheDocument();
+  });
+
+  it('shows planner as a personal kanban toolbar button and opens the dialog', () => {
+    renderBoardHeader({
+      isPersonalWorkspace: true,
+    });
+
+    fireEvent.click(screen.getByLabelText('ws-task-plans.planner'));
+
+    expect(screen.getByRole('dialog')).toHaveTextContent('planner');
+  });
+
+  it('hides planner outside personal kanban editing', () => {
+    const { rerender } = renderBoardHeader({
+      currentView: 'list',
+      isPersonalWorkspace: true,
+    });
+
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+
+    rerender(
+      <QueryClientProvider client={new QueryClient()}>
+        <BoardHeader
+          workspaceId="ws-1"
+          board={mockBoard}
+          currentView="kanban"
+          filters={{
+            assignees: [],
+            dueDateRange: null,
+            estimationRange: null,
+            includeMyTasks: false,
+            includeUnassigned: false,
+            labels: [],
+            priorities: [],
+            projects: [],
+            sourceBoardIds: [],
+            sourceScope: 'all_visible',
+            sourceWorkspaceIds: [],
+          }}
+          isMultiSelectMode={false}
+          isPersonalWorkspace
+          listStatusFilter="all"
+          onFiltersChange={vi.fn()}
+          onListStatusFilterChange={vi.fn()}
+          onUpdate={vi.fn()}
+          onViewChange={vi.fn()}
+          publicView
+          setIsMultiSelectMode={vi.fn()}
+        />
+      </QueryClientProvider>
+    );
+
+    expect(
+      screen.queryByLabelText('ws-task-plans.planner')
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows presence avatars for workspace boards', () => {
+    renderBoardHeader();
+
+    expect(screen.getByTestId('board-user-presence')).toBeInTheDocument();
+  });
+
+  it('hides presence avatars for unshared personal boards', () => {
+    renderBoardHeader({
+      isPersonalWorkspace: true,
+    });
+
+    expect(screen.queryByTestId('board-user-presence')).not.toBeInTheDocument();
+  });
+
+  it('shows presence avatars for personal boards shared with guests', () => {
+    renderBoardHeader({
+      board: {
+        ...mockBoard,
+        has_guest_access: true,
+      },
+      isPersonalWorkspace: true,
+    });
+
+    expect(screen.getByTestId('board-user-presence')).toBeInTheDocument();
+  });
+
+  it('shows presence avatars for direct board guest access', () => {
     renderBoardHeader({
-      workspaceId: 'ws-fallback',
       board: {
-        archived_at: null,
-        id: 'board-1',
-        name: 'Roadmap',
-        ticket_prefix: 'RD',
-        ws_id: null,
+        ...mockBoard,
+        access_type: 'guest',
       },
+      isPersonalWorkspace: true,
+    });
+
+    expect(screen.getByTestId('board-user-presence')).toBeInTheDocument();
+  });
+
+  it('updates status, view, and sort through combobox controls', () => {
+    const onFiltersChange = vi.fn();
+    const onListStatusFilterChange = vi.fn();
+    const onViewChange = vi.fn();
+
+    renderBoardHeader({
+      onFiltersChange,
+      onListStatusFilterChange,
+      onViewChange,
     });
 
-    expect(screen.getByTestId('board-layout-settings')).toHaveAttribute(
-      'data-ws-id',
-      'ws-fallback'
+    fireEvent.change(screen.getByLabelText('common.all'), {
+      target: { value: 'active' },
+    });
+    expect(onListStatusFilterChange).toHaveBeenCalledWith('active');
+
+    fireEvent.change(screen.getByLabelText('ws-task-boards.views.kanban'), {
+      target: { value: 'list' },
+    });
+    expect(onViewChange).toHaveBeenCalledWith('list');
+
+    fireEvent.change(screen.getByLabelText('common.sort'), {
+      target: { value: 'priority-high' },
+    });
+    expect(onFiltersChange).toHaveBeenCalledWith(
+      expect.objectContaining({ sortBy: 'priority-high' })
     );
-    expect(boardLayoutSettingsProps?.wsId).toBe('ws-fallback');
+  });
+
+  it('uses short board view descriptions including drafts and recycle bin keys', () => {
+    renderBoardHeader({
+      availableViews: ['kanban', 'list', 'timeline', 'drafts', 'recycle_bin'],
+    });
+
+    const viewOptions = comboboxMocks.seenOptions.find((options) =>
+      options.some((option) => option.value === 'kanban')
+    );
+
+    expect(viewOptions).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          value: 'kanban',
+          description: 'ws-task-boards.views.kanban_description',
+        }),
+        expect.objectContaining({
+          value: 'list',
+          description: 'ws-task-boards.views.list_description',
+        }),
+        expect.objectContaining({
+          value: 'timeline',
+          description: 'ws-task-boards.views.timeline_description',
+        }),
+        expect.objectContaining({
+          value: 'drafts',
+          description: 'task-drafts.board_view_description',
+        }),
+        expect.objectContaining({
+          value: 'recycle_bin',
+          description: 'common.recycle_bin_board_description',
+        }),
+      ])
+    );
+  });
+
+  it('passes instant tooltip labels and monochrome trigger mode to toolbar comboboxes', () => {
+    renderBoardHeader();
+
+    const status = screen.getByLabelText('common.all');
+    const view = screen.getByLabelText('ws-task-boards.views.kanban');
+    const sort = screen.getByLabelText('common.sort');
+
+    expect(status).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.status: common.all'
+    );
+    expect(view).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.view: ws-task-boards.views.kanban'
+    );
+    expect(view).toHaveAttribute('data-has-trigger-icon', 'true');
+    expect(sort).toHaveAttribute(
+      'data-trigger-tooltip',
+      'common.sort: common.sort'
+    );
+
+    for (const control of [status, view, sort]) {
+      expect(control).toHaveAttribute('data-colorize-trigger-icon', 'false');
+      expect(control.className).toContain('[&_button_svg]:text-current');
+    }
   });
 });