refactor: reorganize directory structure into src/
Move all source code directories into src/ for cleaner project structure: - pages/, components/, utils/, config/, providers/, types/, lib/, assets/, entrypoints/ → src/ - Use WXT srcDir config to resolve @/ alias to src/ - Update tsconfig, vitest, eslint, tailwind configs - Remove scattered README.md files from subdirectories - Update documentation (AGENTS.md, CODING_STANDARDS.md, README.md) - Fix pre-existing lint error in RouterProvider.tsx Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
雨霖铃
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { ThemeModeProvider } from './ThemeModeProvider';
|
||||
import { RouterProvider } from './RouterProvider'; // 💡 1. 全局合龙：引入满血重构的路由中枢
|
||||
|
||||
interface AppRootProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function AppRoot({ children }: AppRootProps) {
|
||||
return (
|
||||
<React.StrictMode>
|
||||
<ThemeModeProvider>
|
||||
<RouterProvider>{children}</RouterProvider>
|
||||
</ThemeModeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { browser } from 'wxt/browser'; // 💡 1. 规范回归：引入 WXT 标准多端一致性代理空间
|
||||
import type { ContextMenuPendingData, PageType, StorageSchema } from '@/types/storage';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
import {
|
||||
getAllFeatureKeys,
|
||||
getDefaultPageOrder,
|
||||
getDefaultVisibleFeatureKeys,
|
||||
} from '@/config/features';
|
||||
import { CONTEXT_MENU_DATA_EXPIRY_MS, saveContextMenuData } from '@/utils/useContextMenuData';
|
||||
|
||||
/**
|
||||
* 校验是否为合法的页面类型
|
||||
*/
|
||||
const isValidPage = (page: unknown): page is PageType => {
|
||||
return typeof page === 'string' && (getAllFeatureKeys() as string[]).includes(page);
|
||||
};
|
||||
|
||||
/**
|
||||
* 校验页面列表是否合法
|
||||
*/
|
||||
const isValidPageList = (pages: unknown): pages is PageType[] => {
|
||||
return Array.isArray(pages) && pages.every(isValidPage);
|
||||
};
|
||||
|
||||
/**
|
||||
* 将已保存的列表与默认列表合并，确保新增的功能特性被自动包含
|
||||
*/
|
||||
const mergeWithDefaults = (saved: PageType[], defaults: PageType[]): PageType[] => {
|
||||
const savedSet = new Set(saved);
|
||||
const defaultSet = new Set(defaults);
|
||||
|
||||
const preserved = saved.filter((page) => defaultSet.has(page));
|
||||
const newItems = defaults.filter((page) => !savedSet.has(page));
|
||||
|
||||
return [...preserved, ...newItems];
|
||||
};
|
||||
|
||||
interface RouterContextType {
|
||||
currentPage: PageType;
|
||||
visiblePages: PageType[];
|
||||
pageOrder: PageType[];
|
||||
isLoaded: boolean;
|
||||
navigateTo: (page: PageType) => void;
|
||||
goBack: () => void;
|
||||
setVisiblePages: (pages: PageType[]) => void;
|
||||
setPageOrder: (pages: PageType[]) => void;
|
||||
}
|
||||
|
||||
const RouterContext = createContext<RouterContextType | null>(null);
|
||||
|
||||
interface RouterProviderProps {
|
||||
children: ReactNode;
|
||||
defaultRoute?: PageType;
|
||||
syncRoute?: boolean;
|
||||
syncKey?: keyof StorageSchema;
|
||||
visiblePagesKey?: keyof StorageSchema;
|
||||
pageOrderKey?: keyof StorageSchema;
|
||||
}
|
||||
|
||||
/**
|
||||
* 同步从 localStorage 获取存储快照（首屏 0 闪烁核心防线）
|
||||
*/
|
||||
const getSyncSnapshot = <T,>(
|
||||
key: string,
|
||||
defaultValue: T,
|
||||
validator?: (val: unknown) => val is T,
|
||||
): T => {
|
||||
try {
|
||||
const val = localStorage.getItem(`snapshot/${key}`);
|
||||
if (!val) return defaultValue;
|
||||
const parsed = JSON.parse(val) as unknown;
|
||||
if (validator) {
|
||||
return validator(parsed) ? parsed : defaultValue;
|
||||
}
|
||||
return (parsed as T) ?? defaultValue;
|
||||
} catch (error) {
|
||||
console.error('[Router Snapshot Error] Failed to read sync cache:', error);
|
||||
return defaultValue;
|
||||
}
|
||||
};
|
||||
|
||||
export function RouterProvider({
|
||||
children,
|
||||
defaultRoute = 'dashboard',
|
||||
syncRoute = true,
|
||||
syncKey = 'app/currentRoute',
|
||||
visiblePagesKey = 'app/visiblePages',
|
||||
pageOrderKey = 'app/pageOrder',
|
||||
}: RouterProviderProps) {
|
||||
// 1. 初始化派生状态流（0 延迟快照同步）
|
||||
const [currentPage, setCurrentPage] = useState<PageType>(() =>
|
||||
getSyncSnapshot(syncKey as string, defaultRoute, isValidPage),
|
||||
);
|
||||
|
||||
const [visiblePages, setVisiblePages] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
visiblePagesKey as string,
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultVisibleFeatureKeys());
|
||||
});
|
||||
|
||||
const [pageOrder, setPageOrder] = useState<PageType[]>(() => {
|
||||
const snapshot = getSyncSnapshot(
|
||||
pageOrderKey as string,
|
||||
getDefaultPageOrder(),
|
||||
isValidPageList,
|
||||
);
|
||||
return mergeWithDefaults(snapshot, getDefaultPageOrder());
|
||||
});
|
||||
|
||||
const [isLoaded, setIsLoaded] = useState(() => {
|
||||
const snapshotKey = localStorage.getItem(`snapshot/${syncKey as string}`);
|
||||
const snapshotVisible = localStorage.getItem(`snapshot/${visiblePagesKey as string}`);
|
||||
const snapshotOrder = localStorage.getItem(`snapshot/${pageOrderKey as string}`);
|
||||
return !!(snapshotKey && snapshotVisible && snapshotOrder);
|
||||
});
|
||||
|
||||
/**
|
||||
* 从异步存储中安全溯源初始数据
|
||||
*/
|
||||
const loadInitialData = useCallback(async () => {
|
||||
try {
|
||||
const savedRoute = await storageUtil.get(syncKey, defaultRoute);
|
||||
const savedVisiblePages = await storageUtil.get(
|
||||
visiblePagesKey,
|
||||
getDefaultVisibleFeatureKeys(),
|
||||
);
|
||||
const savedPageOrder = await storageUtil.get(pageOrderKey, getDefaultPageOrder());
|
||||
|
||||
if (isValidPage(savedRoute) && syncRoute) {
|
||||
setCurrentPage(savedRoute);
|
||||
}
|
||||
if (isValidPageList(savedVisiblePages)) {
|
||||
setVisiblePages(mergeWithDefaults(savedVisiblePages, getDefaultVisibleFeatureKeys()));
|
||||
}
|
||||
if (isValidPageList(savedPageOrder) && savedPageOrder.length > 0) {
|
||||
setPageOrder(mergeWithDefaults(savedPageOrder, getDefaultPageOrder()));
|
||||
}
|
||||
setIsLoaded(true);
|
||||
} catch (error) {
|
||||
console.error('[Router Init Error] Core data fetch failed:', error);
|
||||
}
|
||||
}, [defaultRoute, syncKey, syncRoute, visiblePagesKey, pageOrderKey]);
|
||||
|
||||
// 副作用 1：组件挂载时，激活初始路由校验与右键菜单传递载荷（Context Payload）的嗅探
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect -- Valid async data loading pattern on mount
|
||||
loadInitialData()
|
||||
.then(() => {
|
||||
if (cancelled) return;
|
||||
|
||||
// 检查 URL 参数中的右键菜单高阶中转数据
|
||||
if (typeof window !== 'undefined') {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const feature = params.get('feature') as PageType | null;
|
||||
const payload = params.get('payload');
|
||||
|
||||
if (feature && payload && isValidPage(feature)) {
|
||||
void saveContextMenuData({ featureKey: feature, payload }).catch((err) => {
|
||||
console.error('[Router Context Handler Error]', err);
|
||||
});
|
||||
setCurrentPage(feature);
|
||||
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.delete('feature');
|
||||
url.searchParams.delete('payload');
|
||||
window.history.replaceState({}, '', url.toString());
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查 storage 中的右键菜单待处理数据（针对 openPopup 的闭环场景）
|
||||
storageUtil
|
||||
.get('contextMenu/pendingData', undefined)
|
||||
.then((pendingData) => {
|
||||
if (
|
||||
pendingData &&
|
||||
isValidPage(pendingData.featureKey) &&
|
||||
Date.now() - pendingData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(pendingData.featureKey as PageType);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
})
|
||||
.catch(console.error);
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [loadInitialData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded && syncRoute) {
|
||||
void storageUtil.set(syncKey, currentPage as PageType).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${syncKey}`, JSON.stringify(currentPage));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [currentPage, isLoaded, syncRoute, syncKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
void storageUtil.set(visiblePagesKey, visiblePages).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${visiblePagesKey}`, JSON.stringify(visiblePages));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [visiblePages, isLoaded, visiblePagesKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded) {
|
||||
void storageUtil.set(pageOrderKey, pageOrder).catch(console.error);
|
||||
try {
|
||||
localStorage.setItem(`snapshot/${pageOrderKey}`, JSON.stringify(pageOrder));
|
||||
} catch (err) {
|
||||
console.error('[Router LocalStorage Error]', err);
|
||||
}
|
||||
}
|
||||
}, [pageOrder, isLoaded, pageOrderKey]);
|
||||
|
||||
const currentPageRef = useRef(currentPage);
|
||||
useEffect(() => {
|
||||
currentPageRef.current = currentPage;
|
||||
}, [currentPage]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!syncRoute) return;
|
||||
|
||||
const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
|
||||
if (syncRoute && changes[syncKey as string]) {
|
||||
const newRoute = changes[syncKey as string].newValue as PageType;
|
||||
if (newRoute && newRoute !== currentPageRef.current && isValidPage(newRoute)) {
|
||||
setCurrentPage(newRoute);
|
||||
}
|
||||
}
|
||||
if (changes[visiblePagesKey as string]) {
|
||||
const newPages = changes[visiblePagesKey as string].newValue;
|
||||
if (isValidPageList(newPages)) {
|
||||
setVisiblePages(newPages);
|
||||
}
|
||||
}
|
||||
if (changes[pageOrderKey as string]) {
|
||||
const newOrder = changes[pageOrderKey as string].newValue;
|
||||
if (isValidPageList(newOrder)) {
|
||||
setPageOrder(newOrder);
|
||||
}
|
||||
}
|
||||
if (changes['contextMenu/pendingData']) {
|
||||
const newData = changes['contextMenu/pendingData']
|
||||
.newValue as ContextMenuPendingData | null;
|
||||
if (
|
||||
newData &&
|
||||
isValidPage(newData.featureKey) &&
|
||||
Date.now() - newData.timestamp < CONTEXT_MENU_DATA_EXPIRY_MS
|
||||
) {
|
||||
setCurrentPage(newData.featureKey as PageType);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 💡 修复点：全域绑定 WXT 跨浏览器代理监听器，彻底闭环多端多进程广播
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
return () => {
|
||||
browser.storage.onChanged.removeListener(handleStorageChange);
|
||||
};
|
||||
}, [syncRoute, syncKey, visiblePagesKey, pageOrderKey]);
|
||||
|
||||
const navigateTo = (page: PageType) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
setCurrentPage('dashboard');
|
||||
};
|
||||
|
||||
return (
|
||||
<RouterContext.Provider
|
||||
value={{
|
||||
currentPage,
|
||||
visiblePages,
|
||||
pageOrder,
|
||||
isLoaded,
|
||||
navigateTo,
|
||||
goBack,
|
||||
setVisiblePages,
|
||||
setPageOrder,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RouterContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useRouter() {
|
||||
const context = useContext(RouterContext);
|
||||
if (!context) {
|
||||
throw new Error('useRouter must be used within a valid RouterProvider context wrapper');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
export default RouterProvider;
|
||||
@@ -0,0 +1,169 @@
|
||||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { browser } from 'wxt/browser'; // 💡 1. 规范回归：引入 WXT 标准多端一致性代理，消灭裸奔的 chrome 空间
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
|
||||
export type ThemeMode = 'light' | 'dark' | 'system';
|
||||
export type ResolvedThemeMode = 'light' | 'dark';
|
||||
|
||||
interface ThemeModeContextType {
|
||||
mode: ThemeMode;
|
||||
resolvedMode: ResolvedThemeMode;
|
||||
setMode: (mode: ThemeMode) => void;
|
||||
}
|
||||
|
||||
const ThemeModeContext = createContext<ThemeModeContextType | null>(null);
|
||||
|
||||
const THEME_MODE_KEY = 'app/themeMode' as const;
|
||||
const SNAPSHOT_KEY = 'snapshot/app/themeMode';
|
||||
|
||||
const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
|
||||
const isValidMode = (v: unknown): v is ThemeMode => VALID_MODES.includes(v as ThemeMode);
|
||||
|
||||
/**
|
||||
* 同步追溯 localStorage 级快照（首屏 0 闪烁核心防线）
|
||||
*/
|
||||
const getSyncSnapshot = (): ThemeMode => {
|
||||
try {
|
||||
const raw = localStorage.getItem(SNAPSHOT_KEY);
|
||||
if (!raw) return 'system';
|
||||
const parsed = JSON.parse(raw) as unknown;
|
||||
return isValidMode(parsed) ? parsed : 'system';
|
||||
} catch {
|
||||
return 'system';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 实时嗅探系统底层操作系统的明暗色轴
|
||||
*/
|
||||
const getSystemMode = (): ResolvedThemeMode => {
|
||||
if (typeof window === 'undefined') return 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
interface ThemeModeProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function ThemeModeProvider({ children }: ThemeModeProviderProps) {
|
||||
const [mode, setModeState] = useState<ThemeMode>(getSyncSnapshot);
|
||||
const [resolvedMode, setResolvedMode] = useState<ResolvedThemeMode>(
|
||||
mode === 'system' ? getSystemMode() : mode,
|
||||
);
|
||||
|
||||
// 统一的实态转换调度中枢
|
||||
const updateResolved = useCallback((nextMode: ThemeMode) => {
|
||||
setResolvedMode(nextMode === 'system' ? getSystemMode() : nextMode);
|
||||
}, []);
|
||||
|
||||
// 主动切流触发大闸
|
||||
const setMode = useCallback(
|
||||
(next: ThemeMode) => {
|
||||
setModeState(next);
|
||||
updateResolved(next);
|
||||
|
||||
// 💡 修复点：对异步微任务链追加标准的显式 void 断链安全隔离，彻底净化 Linter 悬空 Promise 警告
|
||||
void storageUtil.set(THEME_MODE_KEY, next).catch((err) => {
|
||||
console.error('[Theme Storage Error] Failed to persistent theme state:', err);
|
||||
});
|
||||
|
||||
try {
|
||||
localStorage.setItem(SNAPSHOT_KEY, JSON.stringify(next));
|
||||
} catch (err) {
|
||||
console.error('[Theme Snapshot Error] LocalStorage quota exceeded:', err);
|
||||
}
|
||||
},
|
||||
[updateResolved],
|
||||
);
|
||||
|
||||
// 副作用 1：冷启动时异步对齐来自长期存储的权威配置，自愈快照偏差
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
storageUtil
|
||||
.get(THEME_MODE_KEY, 'system')
|
||||
.then((saved) => {
|
||||
if (cancelled) return;
|
||||
if (isValidMode(saved)) {
|
||||
setModeState(saved);
|
||||
updateResolved(saved);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('[Theme Restore Thread Failed]', err);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [updateResolved]);
|
||||
|
||||
// 副作用 2：当处于跟随系统模式下，动态监听操作系统级别的高级霓虹换色
|
||||
useEffect(() => {
|
||||
if (mode !== 'system') return;
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = (e: MediaQueryListEvent) => {
|
||||
setResolvedMode(e.matches ? 'dark' : 'light');
|
||||
};
|
||||
mq.addEventListener('change', handler);
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
}, [mode]);
|
||||
|
||||
// 副作用 3：跨上下文广播事件同步大闸（Popup <-> Sidepanel 联动核心）
|
||||
useEffect(() => {
|
||||
// 💡 2. 强类型对齐修复：对齐标准的 browser.storage.onChanged.addListener 签名规范
|
||||
const handleStorageChange = (changes: Record<string, { newValue?: unknown }>) => {
|
||||
if (changes[THEME_MODE_KEY]) {
|
||||
const next = changes[THEME_MODE_KEY].newValue;
|
||||
if (isValidMode(next)) {
|
||||
// 💡 3. 架构解耦：改用函数式状态更新，彻底将本 Effect 从当前的 [mode] 依赖中解脱出来！
|
||||
// 这能保证多视口监听器在初始化时【只注册一次】，彻底消灭高频切流时的事件撕裂与重复注销。
|
||||
setModeState((currentMode) => {
|
||||
if (next !== currentMode) {
|
||||
updateResolved(next);
|
||||
return next;
|
||||
}
|
||||
return currentMode;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
browser.storage.onChanged.addListener(handleStorageChange);
|
||||
return () => {
|
||||
browser.storage.onChanged.removeListener(handleStorageChange);
|
||||
};
|
||||
}, [updateResolved]); // 👈 完美剔除 mode 脏依赖！
|
||||
|
||||
// 副作用 4：宿主 DOM 的 class 样式原子映射注入（一帧直出）
|
||||
useEffect(() => {
|
||||
if (typeof document !== 'undefined') {
|
||||
document.documentElement.classList.toggle('dark', resolvedMode === 'dark');
|
||||
}
|
||||
}, [resolvedMode]);
|
||||
|
||||
const contextValue = useMemo(
|
||||
() => ({ mode, resolvedMode, setMode }),
|
||||
[mode, resolvedMode, setMode],
|
||||
);
|
||||
|
||||
return <ThemeModeContext.Provider value={contextValue}>{children}</ThemeModeContext.Provider>;
|
||||
}
|
||||
|
||||
export function useThemeMode(): ThemeModeContextType {
|
||||
const ctx = useContext(ThemeModeContext);
|
||||
if (!ctx) {
|
||||
throw new Error(
|
||||
'useThemeMode must be used within a valid ThemeModeProvider sandboxed container',
|
||||
);
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export default ThemeModeProvider;
|
||||
@@ -0,0 +1,256 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import { RouterProvider, useRouter } from '@/providers/RouterProvider';
|
||||
import { storageUtil } from '@/utils/chromeStorage';
|
||||
|
||||
// Mock storageUtil
|
||||
vi.mock('@/utils/chromeStorage', () => ({
|
||||
storageUtil: {
|
||||
get: vi.fn(),
|
||||
set: vi.fn(() => Promise.resolve()),
|
||||
},
|
||||
}));
|
||||
|
||||
// Helper 辅助受控组件：用于实时嗅探并映射 useRouter 上下文状态
|
||||
const TestComponent = () => {
|
||||
const { currentPage, navigateTo, visiblePages, pageOrder } = useRouter();
|
||||
return (
|
||||
<div>
|
||||
<div data-testid="current-page">{currentPage}</div>
|
||||
<div data-testid="visible-pages">{visiblePages.join(',')}</div>
|
||||
<div data-testid="page-order">{pageOrder.join(',')}</div>
|
||||
<button onClick={() => navigateTo('timestamp')} data-testid="navigate-btn">
|
||||
Navigate
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
describe('RouterProvider', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
localStorage.clear();
|
||||
|
||||
// 💡 1. 核心修复点：
|
||||
// - 采用标准的通用大对象 globalThis 代理，彻底掐灭 TS2304 报错。
|
||||
// - 物理让 chrome 空间和统一多端 browser 空间共享相同的事件监听桩，
|
||||
// - 完美承接生产代码内部全新升级的 browser.storage.onChanged 大闸！
|
||||
const storageOnChangedMock = {
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
};
|
||||
|
||||
const extensionMock = {
|
||||
storage: {
|
||||
onChanged: storageOnChangedMock,
|
||||
},
|
||||
};
|
||||
|
||||
(globalThis as any).chrome = extensionMock;
|
||||
(globalThis as any).browser = extensionMock;
|
||||
});
|
||||
|
||||
it('应该使用默认值初始化路由', async () => {
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider defaultRoute="dashboard">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该从指定的 syncKey 加载路由', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelRoute') return Promise.resolve('timestamp');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/sidepanelRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
});
|
||||
});
|
||||
|
||||
it('导航时应该更新指定的 syncKey', async () => {
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/popupRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('dashboard');
|
||||
});
|
||||
|
||||
const btn = screen.getByTestId('navigate-btn');
|
||||
|
||||
// 💡 2. 交互进化：废除高风险的原生 btn.click()，改用 Testing Library 的标准事件投递，
|
||||
// 在一帧之内顺畅闭环受控状态改流，完美抹平悬空微任务警告。
|
||||
await act(async () => {
|
||||
fireEvent.click(btn);
|
||||
});
|
||||
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('timestamp');
|
||||
expect(storageUtil.set).toHaveBeenCalledWith('app/popupRoute', 'timestamp');
|
||||
});
|
||||
|
||||
it('应该支持独立的标签页路由同步', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/tabRoute') return Promise.resolve('qrCode');
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider syncKey="app/tabRoute">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-page')).toHaveTextContent('qrCode');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该独立支持 visiblePagesKey 和 pageOrderKey，并合并缺失的新功能', async () => {
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/sidepanelVisiblePages')
|
||||
return Promise.resolve(['timestamp', 'storageCleaner']);
|
||||
if (key === 'app/sidepanelPageOrder') return Promise.resolve(['storageCleaner', 'timestamp']);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider
|
||||
visiblePagesKey="app/sidepanelVisiblePages"
|
||||
pageOrderKey="app/sidepanelPageOrder"
|
||||
>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent;
|
||||
expect(visiblePages).toContain('timestamp');
|
||||
expect(visiblePages).toContain('storageCleaner');
|
||||
|
||||
const pageOrder = screen.getByTestId('page-order').textContent;
|
||||
expect(pageOrder).toContain('storageCleaner');
|
||||
expect(pageOrder).toContain('timestamp');
|
||||
});
|
||||
});
|
||||
|
||||
it('应该将旧存储中缺失的新功能自动合并到 visiblePages 和 pageOrder', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
const oldPageOrder = [
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
|
||||
(storageUtil.get as any).mockImplementation((key: string, defaultValue: any) => {
|
||||
if (key === 'app/popupVisiblePages') return Promise.resolve(oldVisiblePages);
|
||||
if (key === 'app/popupPageOrder') return Promise.resolve(oldPageOrder);
|
||||
return Promise.resolve(defaultValue);
|
||||
});
|
||||
|
||||
render(
|
||||
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
|
||||
expect(visiblePages.startsWith('dashboard,timestamp')).toBe(true);
|
||||
expect(pageOrder.startsWith('timestamp,storageCleaner')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('应该从 localStorage 快照合并缺失的新功能', async () => {
|
||||
const oldVisiblePages = [
|
||||
'dashboard',
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
const oldPageOrder = [
|
||||
'timestamp',
|
||||
'storageCleaner',
|
||||
'qrCode',
|
||||
'textStatistics',
|
||||
'jwt',
|
||||
'jsonDiff',
|
||||
];
|
||||
localStorage.setItem('snapshot/app/visiblePages', JSON.stringify(oldVisiblePages));
|
||||
localStorage.setItem('snapshot/app/pageOrder', JSON.stringify(oldPageOrder));
|
||||
|
||||
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: any) =>
|
||||
Promise.resolve(defaultValue),
|
||||
);
|
||||
|
||||
render(
|
||||
<RouterProvider>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
const visiblePages = screen.getByTestId('visible-pages').textContent!;
|
||||
const pageOrder = screen.getByTestId('page-order').textContent!;
|
||||
expect(visiblePages).toBeDefined();
|
||||
expect(pageOrder).toBeDefined();
|
||||
});
|
||||
|
||||
it('组件卸载时不应设置 isLoaded 状态（竞态条件防护）', async () => {
|
||||
let resolveStorage: (value: unknown) => void;
|
||||
const storagePromise = new Promise((resolve) => {
|
||||
resolveStorage = resolve;
|
||||
});
|
||||
|
||||
(storageUtil.get as any).mockImplementation(() => storagePromise);
|
||||
|
||||
const { unmount } = render(
|
||||
<RouterProvider>
|
||||
<TestComponent />
|
||||
</RouterProvider>,
|
||||
);
|
||||
|
||||
unmount();
|
||||
resolveStorage!('dashboard');
|
||||
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user