refactor: 移除 RouterContainer 组件中的 isLoaded 状态检查
- 简化 RouterContainer 组件逻辑,直接渲染页面内容,无需等待加载状态。 - 更新测试用例,确保在组件挂载后直接渲染页面结构。
This commit is contained in:
@@ -37,15 +37,11 @@ function LoadedPage({ pageKey }: { pageKey: PageType }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function RouterContainer() {
|
export default function RouterContainer() {
|
||||||
const { currentPage, isLoaded } = useRouter();
|
const { currentPage } = useRouter();
|
||||||
|
|
||||||
const animationClass =
|
const animationClass =
|
||||||
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
|
||||||
|
|
||||||
if (!isLoaded) {
|
|
||||||
return <PageSkeleton variant={currentPage === 'dashboard' ? 'dashboard' : 'tool'} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentFeature = getFeatureByKey(currentPage);
|
const currentFeature = getFeatureByKey(currentPage);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -9,12 +9,13 @@ const mockRouterValue = {
|
|||||||
currentPage: 'dashboard' as PageType,
|
currentPage: 'dashboard' as PageType,
|
||||||
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
visiblePages: ['dashboard', 'timestamp'] as PageType[],
|
||||||
pageOrder: ['timestamp'] as PageType[],
|
pageOrder: ['timestamp'] as PageType[],
|
||||||
isLoaded: true,
|
|
||||||
navigateTo: vi.fn(),
|
navigateTo: vi.fn(),
|
||||||
syncNavigation: vi.fn(),
|
syncNavigation: vi.fn(),
|
||||||
goHome: vi.fn(),
|
goHome: vi.fn(),
|
||||||
setVisiblePages: vi.fn(),
|
setVisiblePages: vi.fn(),
|
||||||
setPageOrder: vi.fn(),
|
setPageOrder: vi.fn(),
|
||||||
|
recentlyUsedTools: [] as PageType[],
|
||||||
|
isLoaded: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
vi.mock('@/providers/RouterProvider', () => ({
|
vi.mock('@/providers/RouterProvider', () => ({
|
||||||
@@ -32,16 +33,7 @@ describe('RouterContainer 组件', () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
describe('渲染测试', () => {
|
describe('渲染测试', () => {
|
||||||
it('isLoaded 为 false 时应渲染骨架屏', () => {
|
it('mount 后应直接渲染页面结构(不等待 storage 加载)', () => {
|
||||||
mockRouterValue.isLoaded = false;
|
|
||||||
const { container } = renderWithProvider(<RouterContainer />);
|
|
||||||
// 骨架屏使用 animate-pulse 类
|
|
||||||
const skeletons = container.querySelectorAll('.animate-pulse');
|
|
||||||
expect(skeletons.length).toBeGreaterThan(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('isLoaded 为 true 时应渲染页面内容', () => {
|
|
||||||
mockRouterValue.isLoaded = true;
|
|
||||||
mockRouterValue.currentPage = 'dashboard';
|
mockRouterValue.currentPage = 'dashboard';
|
||||||
const { container } = renderWithProvider(<RouterContainer />);
|
const { container } = renderWithProvider(<RouterContainer />);
|
||||||
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
|
expect(container.querySelector('.page-transition-dashboard')).toBeInTheDocument();
|
||||||
@@ -77,8 +69,7 @@ describe('RouterContainer 组件', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('页面级错误隔离', () => {
|
describe('页面级错误隔离', () => {
|
||||||
it('PageErrorBoundary 应包裹在 Suspense 内层', () => {
|
it('PageErrorBoundary 应包裹页面内容', () => {
|
||||||
mockRouterValue.isLoaded = true;
|
|
||||||
mockRouterValue.currentPage = 'dashboard';
|
mockRouterValue.currentPage = 'dashboard';
|
||||||
const { container } = renderWithProvider(<RouterContainer />);
|
const { container } = renderWithProvider(<RouterContainer />);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user