makelore/tests/unit/chat-device-preview-navigation.test.tsx

import { fireEvent, render, screen } from '@testing-library/react';
import { MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
import { describe, expect, it, vi } from 'vitest';
import { Chat } from '@/pages/Chat';

vi.mock('@/pages/Chat/OpencodeChatPanel', () => ({
  OpencodeChatPanel: ({ onOpenDevicePreview }: { onOpenDevicePreview?: () => void }) => (
    <button type="button" onClick={onOpenDevicePreview}>
      打开真机预览
    </button>
  ),
}));

function LocationProbe() {
  const location = useLocation();
  return <output data-testid="location-path">{location.pathname}</output>;
}

describe('Chat 真机预览导航', () => {
  it('点击真机预览入口后导航到 /device-preview', () => {
    render(
      <MemoryRouter initialEntries={['/opencode-chat']}>
        <Routes>
          <Route path="/opencode-chat" element={<Chat />} />
          <Route path="*" element={<LocationProbe />} />
        </Routes>
      </MemoryRouter>,
    );

    fireEvent.click(screen.getByRole('button', { name: '打开真机预览' }));

    expect(screen.getByTestId('location-path')).toHaveTextContent('/device-preview');
  });
});