refactor: 移除 TopBar 组件,重构功能导航并引入主题切换按钮
- 删除 TopBar 及其相关组件和逻辑,简化布局结构。 - 新增 FeatureNav 组件,包含功能导航和主题切换按钮。 - 更新 README.md,反映新的组件结构和功能。 - 修改测试用例,确保新结构下的功能正常。
This commit is contained in:
@@ -2,6 +2,21 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import type { PageType } from '@/types/storage';
|
||||
import FeatureNav from '@/layout/FeatureNav';
|
||||
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 mockNavigateTo = vi.fn();
|
||||
|
||||
@@ -28,8 +43,15 @@ describe('FeatureNav 组件', () => {
|
||||
mockRouterValue.visiblePages = ['timestamp', 'jwt', 'storageCleaner'];
|
||||
});
|
||||
|
||||
const renderFeatureNav = () =>
|
||||
render(
|
||||
<ThemeModeProvider>
|
||||
<FeatureNav />
|
||||
</ThemeModeProvider>,
|
||||
);
|
||||
|
||||
it('应渲染全部可见工具图标', () => {
|
||||
render(<FeatureNav />);
|
||||
renderFeatureNav();
|
||||
|
||||
expect(screen.getByLabelText('JWT 解析')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('时间戳')).toBeInTheDocument();
|
||||
@@ -37,18 +59,24 @@ describe('FeatureNav 组件', () => {
|
||||
});
|
||||
|
||||
it('点击图标应调用 navigateTo', () => {
|
||||
render(<FeatureNav />);
|
||||
renderFeatureNav();
|
||||
|
||||
fireEvent.click(screen.getByLabelText('JWT 解析'));
|
||||
expect(mockNavigateTo).toHaveBeenCalledWith('jwt');
|
||||
});
|
||||
|
||||
it('当前页对应项应有 active 样式与 aria-current', () => {
|
||||
render(<FeatureNav />);
|
||||
renderFeatureNav();
|
||||
|
||||
const activeButton = screen.getByLabelText('时间戳');
|
||||
expect(activeButton).toHaveAttribute('aria-current', 'page');
|
||||
expect(activeButton).toHaveClass('bg-muted');
|
||||
expect(activeButton).toHaveClass('border-primary');
|
||||
});
|
||||
|
||||
it('应渲染主题切换按钮', () => {
|
||||
renderFeatureNav();
|
||||
|
||||
expect(screen.getByLabelText(/切换到/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user