import { describe, it, expect, vi, beforeEach } from 'vitest'; import { render, screen, fireEvent } from '@testing-library/react'; import TopBar from '../TopBar'; import { RouterProvider } from '@/providers/RouterProvider'; import type { PageType } from '@/types/storage'; const mockRouterValue = { currentPage: 'dashboard' as PageType, visiblePages: ['dashboard', 'timestamp'] as PageType[], pageOrder: ['timestamp'] as PageType[], isLoaded: true, navigateTo: vi.fn(), navigateLocal: vi.fn(), syncNavigation: vi.fn(), goBack: vi.fn(), setVisiblePages: vi.fn(), setPageOrder: vi.fn(), }; vi.mock('@/providers/RouterProvider', () => ({ useRouter: () => mockRouterValue, RouterProvider: ({ children }: { children: React.ReactNode }) => children, })); describe('TopBar 组件', () => { beforeEach(() => { vi.clearAllMocks(); }); const renderWithProvider = (ui: React.ReactElement) => { return render({ui}); }; describe('渲染测试', () => { it('应使用默认标题渲染', () => { renderWithProvider(); expect(screen.getByText('Testing Tools')).toBeInTheDocument(); }); it('不在 dashboard 时应渲染返回按钮', () => { mockRouterValue.currentPage = 'timestamp'; renderWithProvider(); expect(screen.getByTestId('ArrowBackIosNewIcon')).toBeInTheDocument(); }); it('在 dashboard 上不应渲染返回按钮', () => { mockRouterValue.currentPage = 'dashboard'; renderWithProvider(); expect(screen.queryByTestId('ArrowBackIosNewIcon')).not.toBeInTheDocument(); }); it('应渲染设置按钮', () => { renderWithProvider(); expect(screen.getByTestId('SettingsIcon')).toBeInTheDocument(); }); }); describe('交互测试', () => { it('点击设置按钮时应调用 onOpenOptions', () => { const handleOpenOptions = vi.fn(); renderWithProvider(); fireEvent.click(screen.getByTestId('SettingsIcon')); expect(handleOpenOptions).toHaveBeenCalledTimes(1); }); it('点击返回按钮时应调用 goBack', () => { mockRouterValue.currentPage = 'timestamp'; renderWithProvider(); fireEvent.click(screen.getByTestId('ArrowBackIosNewIcon')); expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1); }); }); });