makelore/tests/unit/main-layout-module-gate.test.tsx

import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { MainLayout } from '@/components/layout/MainLayout';
import { useOpencodeStore } from '@/stores/opencode';
import { useProjectConfigStore } from '@/stores/project-config';
import { useSettingsStore } from '@/stores/settings';
import { createProjectConfig } from '../../shared/project-config';

const useCurrentUserProfileMock = vi.hoisted(() => vi.fn());
const learningIpcMock = vi.hoisted(() => vi.fn());
const syncProfileNowMock = vi.hoisted(() => vi.fn());

vi.mock('@/hooks/use-current-user-profile', () => ({
  useCurrentUserProfile: useCurrentUserProfileMock,
}));
vi.mock('@/components/profile/UserProfileDialog', () => ({
  UserProfileDialog: ({ open, required }: { open: boolean; required?: boolean }) => open ? (
    <div data-testid="profile-dialog-stub" data-required={required ? 'true' : 'false'} />
  ) : null,
}));

vi.mock('@/components/layout/Sidebar', () => ({
  Sidebar: ({ sidebarCollapsedOverride }: { sidebarCollapsedOverride?: boolean }) => (
    <aside data-testid="sidebar-stub" data-sidebar-collapsed={sidebarCollapsedOverride === undefined ? 'unset' : String(sidebarCollapsedOverride)} />
  ),
}));
vi.mock('@/components/layout/TitleBar', () => ({
  TitleBar: ({ integrated = false, overlay = false, pageTitle, sidebarCollapsedOverride }: { integrated?: boolean; overlay?: boolean; pageTitle?: string; sidebarCollapsedOverride?: boolean }) => (
    <header
      data-testid="titlebar-stub"
      data-integrated={integrated ? 'true' : 'false'}
      data-overlay={overlay ? 'true' : 'false'}
      data-page-title={pageTitle ?? ''}
      data-sidebar-collapsed={sidebarCollapsedOverride === undefined ? 'unset' : String(sidebarCollapsedOverride)}
    />
  ),
}));

function LearningRouteContent() {
  learningIpcMock();
  return <div data-testid="route-content" />;
}

function renderLayout(path: string) {
  return render(
    <MemoryRouter initialEntries={[path]}>
      <Routes>
        <Route element={<MainLayout />}>
          <Route path="*" element={<LearningRouteContent />} />
        </Route>
      </Routes>
    </MemoryRouter>,
  );
}

describe('MainLayout module isolation', () => {
  beforeEach(() => {
    learningIpcMock.mockReset();
    syncProfileNowMock.mockReset();
    useCurrentUserProfileMock.mockReset();
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'ready', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });
    const project = {
      id: 'local-project',
      path: '/tmp/local-project',
      name: 'local-project',
      createdAt: '',
      updatedAt: '',
      lastOpenedAt: '',
    };
    useOpencodeStore.setState({ activeProject: project });
    useProjectConfigStore.setState({
      configsByProjectId: {
        [project.id]: { ...createProjectConfig(), initialized: false },
      },
    });
    useSettingsStore.setState({ sidebarCollapsed: false });
  });

  it('does not overlay the local project initialization gate on AI painting', () => {
    renderLayout('/image-canvas');

    expect(screen.getByTestId('route-content')).toBeVisible();
    expect(screen.queryByTestId('project-initialization-gate')).not.toBeInTheDocument();
  });

  it('does not apply a stale profile sync error gate outside Learning', () => {
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'error', error: '同步失败' },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });

    renderLayout('/image-canvas');

    expect(screen.queryByTestId('learning-profile-sync-error-gate')).not.toBeInTheDocument();
    expect(screen.getByTestId('route-content')).toBeVisible();
  });

  it('uses the full-height workspace shell for AI painting', () => {
    renderLayout('/image-canvas');

    expect(screen.getByTestId('main-content')).toHaveClass('basis-0', 'h-full', 'overflow-hidden', 'p-0');
    expect(screen.getByTestId('main-content')).not.toHaveClass('p-5', 'sm:p-6');
    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-overlay', 'true');
  });

  it('keeps the user sidebar preference while moving the inspiration title into the title bar', () => {
    renderLayout('/image-prompts');

    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-page-title', '获取灵感');
    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-overlay', 'false');
    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-sidebar-collapsed', 'unset');
    expect(screen.getByTestId('sidebar-stub')).toHaveAttribute('data-sidebar-collapsed', 'unset');
    expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
  });

  it('does not overlay the local project initialization gate on AI hardware', () => {
    const load = vi.fn().mockResolvedValue(undefined);
    useProjectConfigStore.setState({ load });
    renderLayout('/ai-hardware');

    expect(screen.getByTestId('route-content')).toBeVisible();
    expect(screen.queryByTestId('project-initialization-gate')).not.toBeInTheDocument();
    expect(load).not.toHaveBeenCalled();
  });

  it('keeps the local project initialization gate for AI programming routes', () => {
    renderLayout('/opencode-chat');

    expect(screen.getByTestId('project-initialization-gate')).toBeVisible();
    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-overlay', 'false');
  });

  it('keeps the programming workspace padding compensation separate from painting', () => {
    renderLayout('/opencode-chat');

    expect(screen.getByTestId('main-content')).toHaveClass('basis-0', 'overflow-hidden', 'p-0', 'sm:p-6');
  });

  it('gives the production learning Stage the full classroom width', () => {
    renderLayout('/learning/course/course-1');

    expect(screen.queryByTestId('sidebar-stub')).not.toBeInTheDocument();
    expect(screen.getByTestId('titlebar-stub')).toHaveAttribute('data-integrated', 'false');
    expect(screen.getByTestId('main-content')).toHaveClass('basis-0', 'h-full', 'overflow-hidden', 'p-0');
    expect(screen.getByTestId('route-content')).toBeVisible();
    expect(useCurrentUserProfileMock).toHaveBeenCalledWith(true);
  });

  it('keeps the required personal-profile gate on direct learning course links', async () => {
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: true,
      profileSyncState: { status: 'ready', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });

    renderLayout('/learning/course/course-1');

    expect(await screen.findByTestId('profile-dialog-stub')).toHaveAttribute('data-required', 'true');
    expect(screen.queryByTestId('sidebar-stub')).not.toBeInTheDocument();
    expect(screen.queryByTestId('route-content')).not.toBeInTheDocument();
    expect(learningIpcMock).not.toHaveBeenCalled();
  });

  it('does not mount a direct learning course while profile sync is loading', () => {
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'loading', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });

    renderLayout('/learning/course/course-1');

    expect(screen.queryByTestId('route-content')).not.toBeInTheDocument();
    expect(learningIpcMock).not.toHaveBeenCalled();
  });

  it('mounts the current learning deep link only after profile sync and required fields are complete', () => {
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'loading', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });
    const view = renderLayout('/learning/course/course-1');

    expect(learningIpcMock).not.toHaveBeenCalled();

    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'ready', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });
    view.rerender(
      <MemoryRouter initialEntries={['/learning/course/course-1']}>
        <Routes>
          <Route element={<MainLayout />}>
            <Route path="*" element={<LearningRouteContent />} />
          </Route>
        </Routes>
      </MemoryRouter>,
    );

    expect(screen.getByTestId('route-content')).toBeVisible();
    expect(learningIpcMock).toHaveBeenCalledTimes(1);
  });

  it('keeps a failed profile sync visible and mounts the deep link only after retry succeeds', async () => {
    syncProfileNowMock.mockResolvedValue(null);
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'error', error: '同步失败' },
      profileSyncError: '同步失败',
      syncProfileNow: syncProfileNowMock,
    });
    const view = renderLayout('/learning/course/course-1');

    expect(screen.getByRole('alert')).toHaveTextContent('同步失败');
    expect(screen.getByRole('button', { name: '返回课程库' })).toBeVisible();
    expect(learningIpcMock).not.toHaveBeenCalled();

    fireEvent.click(screen.getByRole('button', { name: '重新同步' }));
    await waitFor(() => expect(syncProfileNowMock).toHaveBeenCalledTimes(1));

    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'ready', error: null },
      profileSyncError: null,
      syncProfileNow: syncProfileNowMock,
    });
    view.rerender(
      <MemoryRouter initialEntries={['/learning/course/course-1']}>
        <Routes>
          <Route element={<MainLayout />}>
            <Route path="*" element={<LearningRouteContent />} />
          </Route>
        </Routes>
      </MemoryRouter>,
    );

    expect(screen.queryByTestId('learning-profile-sync-error-gate')).not.toBeInTheDocument();
    expect(screen.getByTestId('route-content')).toBeVisible();
    expect(learningIpcMock).toHaveBeenCalledTimes(1);
  });

  it('keeps the error gate and deep link unmounted when profile retry fails', async () => {
    syncProfileNowMock.mockRejectedValue(new Error('仍然失败'));
    useCurrentUserProfileMock.mockReturnValue({
      profileRequired: false,
      profileSyncState: { status: 'error', error: '同步失败' },
      profileSyncError: '同步失败',
      syncProfileNow: syncProfileNowMock,
    });
    renderLayout('/learning/course/course-1');

    fireEvent.click(screen.getByRole('button', { name: '重新同步' }));

    await waitFor(() => expect(syncProfileNowMock).toHaveBeenCalledTimes(1));
    expect(screen.getByTestId('learning-profile-sync-error-gate')).toBeVisible();
    expect(screen.getByRole('alert')).toHaveTextContent('同步失败');
    expect(learningIpcMock).not.toHaveBeenCalled();
  });
});