Develop (#55)

feat: optimize dashboard/search UX and simplify extension architecture Redesign Dashboard with compact tool grid and recently used tools Improve TopBar search UX with Cmd/Ctrl+K shortcut and better history navigation Reorganize project structure into src/ Migrate i18n from react-i18next to chrome.i18n Remove runtime language switch and settings page Remove HTML/Markdown conversion tools Clean up unused code, dead animations, redundant comments, and imports Improve component consistency with shadcn/ui patterns Replace hardcoded strings/colors with i18n tokens and theme tokens Add comprehensive project documentation and coding standards Fix CI artifact upload workflow and multiple TypeScript/test issues Includes various refactors, UI polish, i18n cleanup, CI improvements, and maintenance updates across the codebase.
2026-05-28 22:39:25 +08:00
parent d4c29a1bf4
commit 945780def8
200 changed files with 1557 additions and 4380 deletions
@@ -0,0 +1,76 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { PageType } from '@/types/storage';
+import React from 'react';
+import TopBar from '@/components/TopBar';
+import { RouterProvider } from '@/providers/RouterProvider';
+import { ThemeModeProvider } from '@/providers/ThemeModeProvider';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockRouterValue = {
+  currentPage: 'dashboard' as PageType,
+  visiblePages: ['dashboard', 'timestamp'] as PageType[],
+  pageOrder: ['timestamp'] as PageType[],
+  isLoaded: true,
+  navigateTo: 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(
+      <ThemeModeProvider>
+        <RouterProvider>{ui}</RouterProvider>
+      </ThemeModeProvider>,
+    );
+  };
+
+  describe('渲染测试', () => {
+    it('不在 dashboard 时应渲染返回按钮', () => {
+      mockRouterValue.currentPage = 'timestamp';
+      renderWithProvider(<TopBar />);
+      expect(screen.getByLabelText('返回')).toBeInTheDocument();
+    });
+
+    it('在 dashboard 上不应渲染返回按钮', () => {
+      mockRouterValue.currentPage = 'dashboard';
+      renderWithProvider(<TopBar />);
+      expect(screen.queryByLabelText('返回')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('交互测试', () => {
+    it('点击返回按钮时应调用 goBack', () => {
+      mockRouterValue.currentPage = 'timestamp';
+      renderWithProvider(<TopBar />);
+
+      fireEvent.click(screen.getByLabelText('返回'));
+      expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
+    });
+  });
+});