makelore/tests/unit/main-layout-sidebar-peek.test.tsx

import { act, fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { MainLayout } from '@/components/layout/MainLayout';
import { codingWorkspaceStore } from '@/stores/coding-workspace';
import { useSettingsStore } from '@/stores/settings';

type PeekProps = {
  sidebarPeekOpen?: boolean;
  onSidebarPeekChange?: (open: boolean, source: 'toggle' | 'focus' | 'sidebar' | 'titlebar') => void;
  forceExpanded?: boolean;
};

vi.mock('@/components/layout/TitleBar', () => ({
  TitleBar: ({ sidebarPeekOpen, onSidebarPeekChange }: PeekProps) => (
    <>
      <button
        type="button"
        data-testid="peek-trigger"
        data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
        aria-label={useSettingsStore.getState().sidebarCollapsed ? '展开侧栏' : '折叠侧栏'}
        onClick={() => useSettingsStore.getState().setSidebarCollapsed(!useSettingsStore.getState().sidebarCollapsed)}
        onPointerEnter={() => onSidebarPeekChange?.(true, 'toggle')}
        onPointerLeave={() => onSidebarPeekChange?.(false, 'toggle')}
        onFocus={() => onSidebarPeekChange?.(true, 'focus')}
        onBlur={() => onSidebarPeekChange?.(false, 'focus')}
      />
      <div
        data-testid="peek-titlebar"
        onPointerEnter={() => onSidebarPeekChange?.(true, 'titlebar')}
        onPointerLeave={() => onSidebarPeekChange?.(false, 'titlebar')}
      />
    </>
  ),
}));

vi.mock('@/components/layout/Sidebar', () => ({
  Sidebar: ({ sidebarPeekOpen, onSidebarPeekChange, forceExpanded }: PeekProps) => (
    <aside
      data-testid="peek-sidebar"
      data-peek-open={sidebarPeekOpen ? 'true' : 'false'}
      data-force-expanded={forceExpanded ? 'true' : 'false'}
      onPointerEnter={() => onSidebarPeekChange?.(true, 'sidebar')}
      onPointerLeave={() => onSidebarPeekChange?.(false, 'sidebar')}
    />
  ),
}));

function NavigationProbe() {
  const navigate = useNavigate();
  const location = useLocation();
  return <>
    <output data-testid="layout-location">{location.pathname}</output>
    <button onClick={() => navigate('/cloud-agents')}>进入智能体</button>
    <button onClick={() => navigate('/chat')}>进入编程</button>
  </>;
}

function renderLayout(path = '/chat') {
  render(
    <MemoryRouter initialEntries={[path]}>
      <Routes>
        <Route element={<MainLayout />}>
          <Route path="*" element={<NavigationProbe />} />
        </Route>
      </Routes>
    </MemoryRouter>,
  );
}

describe('MainLayout sidebar hover preview', () => {
  beforeEach(() => {
    vi.useFakeTimers();
    useSettingsStore.setState({ sidebarCollapsed: true });
    codingWorkspaceStore.setState({ activeProject: null });
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  it('does not close while the pointer moves from the toggle into the preview', () => {
    renderLayout();

    const trigger = screen.getByTestId('peek-trigger');
    const sidebar = screen.getByTestId('peek-sidebar');
    fireEvent.pointerEnter(trigger);
    expect(trigger).toHaveAttribute('data-peek-open', 'true');

    fireEvent.pointerLeave(trigger);
    fireEvent.pointerEnter(sidebar);
    act(() => {
      vi.advanceTimersByTime(180);
    });

    expect(sidebar).toHaveAttribute('data-peek-open', 'true');

    fireEvent.pointerLeave(sidebar);
    act(() => {
      vi.advanceTimersByTime(179);
    });
    expect(sidebar).toHaveAttribute('data-peek-open', 'true');

    act(() => {
      vi.advanceTimersByTime(1);
    });
    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
  });

  it('keeps the preview open while the pointer crosses the expanded titlebar surface', () => {
    renderLayout();

    const trigger = screen.getByTestId('peek-trigger');
    const titlebar = screen.getByTestId('peek-titlebar');
    fireEvent.pointerEnter(trigger);
    fireEvent.pointerLeave(trigger);
    fireEvent.pointerEnter(titlebar);

    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-trigger')).toHaveAttribute('data-peek-open', 'true');

    fireEvent.pointerLeave(titlebar);
    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-trigger')).toHaveAttribute('data-peek-open', 'false');
  });

  it('closes once after leaving the only hover zone', () => {
    renderLayout();

    const trigger = screen.getByTestId('peek-trigger');
    fireEvent.pointerEnter(trigger);
    fireEvent.pointerLeave(trigger);

    act(() => {
      vi.advanceTimersByTime(179);
    });
    expect(trigger).toHaveAttribute('data-peek-open', 'true');

    act(() => {
      vi.advanceTimersByTime(1);
    });
    expect(trigger).toHaveAttribute('data-peek-open', 'false');
  });

  it('treats repeated pointer-enter notifications as one hover source', () => {
    renderLayout();

    const trigger = screen.getByTestId('peek-trigger');
    fireEvent.pointerEnter(trigger);
    fireEvent.pointerEnter(trigger);
    fireEvent.pointerLeave(trigger);
    fireEvent.pointerLeave(trigger);

    act(() => {
      vi.advanceTimersByTime(180);
    });
    expect(trigger).toHaveAttribute('data-peek-open', 'false');
  });

  it.each(['/cloud-agents', '/cloud-agents/channels'])('ignores every pointer and focus preview source on %s', (path) => {
    renderLayout(path);
    const trigger = screen.getByTestId('peek-trigger');
    const sidebar = screen.getByTestId('peek-sidebar');
    const titlebar = screen.getByTestId('peek-titlebar');
    for (const target of [trigger, titlebar, sidebar]) {
      fireEvent.pointerEnter(target);
      expect(trigger).toHaveAttribute('data-peek-open', 'false');
      expect(sidebar).toHaveAttribute('data-peek-open', 'false');
      fireEvent.pointerLeave(target);
    }
    fireEvent.focus(trigger);
    expect(trigger).toHaveAttribute('data-peek-open', 'false');
    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
    fireEvent.blur(trigger);
    act(() => vi.advanceTimersByTime(180));
    expect(sidebar).toHaveAttribute('data-peek-open', 'false');
    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
    expect(vi.getTimerCount()).toBe(0);
  });

  it.each(['/cloud-agents', '/cloud-agents/channels'])('allows explicit sidebar expansion and collapse on %s', (path) => {
    renderLayout(path);
    fireEvent.click(screen.getByRole('button', { name: '展开侧栏' }));
    expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
    expect(screen.getByRole('button', { name: '折叠侧栏' })).toHaveAttribute('data-peek-open', 'false');
    fireEvent.click(screen.getByRole('button', { name: '折叠侧栏' }));
    expect(useSettingsStore.getState().sidebarCollapsed).toBe(true);
    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
    fireEvent.focus(screen.getByTestId('peek-trigger'));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
  });

  it('clears active Code preview sources when entering Agents and does not restore them on return', () => {
    renderLayout();
    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
    fireEvent.pointerEnter(screen.getByTestId('peek-sidebar'));
    fireEvent.focus(screen.getByTestId('peek-trigger'));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');

    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
    expect(screen.getByTestId('layout-location')).toHaveTextContent('/cloud-agents');
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
  });

  it('cancels a stale Code close timer at the Agents boundary before Code starts a fresh preview', () => {
    renderLayout();
    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
    fireEvent.pointerLeave(screen.getByTestId('peek-trigger'));
    expect(vi.getTimerCount()).toBe(1);
    fireEvent.click(screen.getByRole('button', { name: '进入智能体' }));
    expect(vi.getTimerCount()).toBe(0);
    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');

    fireEvent.click(screen.getByRole('button', { name: '进入编程' }));
    fireEvent.pointerEnter(screen.getByTestId('peek-titlebar'));
    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'true');
    fireEvent.pointerLeave(screen.getByTestId('peek-titlebar'));
    act(() => vi.advanceTimersByTime(180));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
  });

  it('retains the fixed expanded Canvas workspace sidebar', () => {
    renderLayout('/image-canvas');
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
    fireEvent.pointerEnter(screen.getByTestId('peek-trigger'));
    fireEvent.focus(screen.getByTestId('peek-trigger'));
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-peek-open', 'false');
    expect(screen.getByTestId('peek-sidebar')).toHaveAttribute('data-force-expanded', 'true');
  });
});