fix(RouterProvider): 将 goBack 重命名为 goHome,修复跨窗同步 merge 不一致
API 命名与实际行为(返回 dashboard)对齐;storage.onChanged 同步 visiblePages/pageOrder 时应用 mergeWithDefaults,与初始化逻辑保持一致。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -11,7 +11,7 @@ const SEARCH_HISTORY_LIMIT = 10;
|
|||||||
const SEARCH_HISTORY_DISPLAY = 5;
|
const SEARCH_HISTORY_DISPLAY = 5;
|
||||||
|
|
||||||
export default function TopBar() {
|
export default function TopBar() {
|
||||||
const { currentPage, goBack, navigateTo } = useRouter();
|
const { currentPage, goHome, navigateTo } = useRouter();
|
||||||
const { mode, setMode } = useThemeMode();
|
const { mode, setMode } = useThemeMode();
|
||||||
|
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
@@ -138,8 +138,8 @@ export default function TopBar() {
|
|||||||
{!isDashboard && (
|
{!isDashboard && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={goBack}
|
onClick={goHome}
|
||||||
aria-label={'返回'}
|
aria-label={'返回首页'}
|
||||||
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
className="flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||||
>
|
>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ const mockRouterValue = {
|
|||||||
isLoaded: true,
|
isLoaded: true,
|
||||||
navigateTo: vi.fn(),
|
navigateTo: vi.fn(),
|
||||||
syncNavigation: vi.fn(),
|
syncNavigation: vi.fn(),
|
||||||
goBack: vi.fn(),
|
goHome: vi.fn(),
|
||||||
setVisiblePages: vi.fn(),
|
setVisiblePages: vi.fn(),
|
||||||
setPageOrder: vi.fn(),
|
setPageOrder: vi.fn(),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ const mockRouterValue = {
|
|||||||
isLoaded: true,
|
isLoaded: true,
|
||||||
navigateTo: vi.fn(),
|
navigateTo: vi.fn(),
|
||||||
syncNavigation: vi.fn(),
|
syncNavigation: vi.fn(),
|
||||||
goBack: vi.fn(),
|
goHome: vi.fn(),
|
||||||
setVisiblePages: vi.fn(),
|
setVisiblePages: vi.fn(),
|
||||||
setPageOrder: vi.fn(),
|
setPageOrder: vi.fn(),
|
||||||
};
|
};
|
||||||
@@ -54,7 +54,7 @@ describe('TopBar 组件', () => {
|
|||||||
it('不在 dashboard 时应渲染返回按钮', () => {
|
it('不在 dashboard 时应渲染返回按钮', () => {
|
||||||
mockRouterValue.currentPage = 'timestamp';
|
mockRouterValue.currentPage = 'timestamp';
|
||||||
renderWithProvider(<TopBar />);
|
renderWithProvider(<TopBar />);
|
||||||
expect(screen.getByLabelText('返回')).toBeInTheDocument();
|
expect(screen.getByLabelText('返回首页')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('在 dashboard 上不应渲染返回按钮', () => {
|
it('在 dashboard 上不应渲染返回按钮', () => {
|
||||||
@@ -65,12 +65,12 @@ describe('TopBar 组件', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('交互测试', () => {
|
describe('交互测试', () => {
|
||||||
it('点击返回按钮时应调用 goBack', () => {
|
it('点击返回按钮时应调用 goHome', () => {
|
||||||
mockRouterValue.currentPage = 'timestamp';
|
mockRouterValue.currentPage = 'timestamp';
|
||||||
renderWithProvider(<TopBar />);
|
renderWithProvider(<TopBar />);
|
||||||
|
|
||||||
fireEvent.click(screen.getByLabelText('返回'));
|
fireEvent.click(screen.getByLabelText('返回首页'));
|
||||||
expect(mockRouterValue.goBack).toHaveBeenCalledTimes(1);
|
expect(mockRouterValue.goHome).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ React.StrictMode
|
|||||||
导出:
|
导出:
|
||||||
|
|
||||||
- `RouterProvider` 组件
|
- `RouterProvider` 组件
|
||||||
- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goBack` 等
|
- `useRouter()` Hook — 获取 `currentPage`、`visiblePages`、`pageOrder`、`navigateTo`、`goHome` 等
|
||||||
|
|
||||||
## ThemeModeProvider.tsx
|
## ThemeModeProvider.tsx
|
||||||
|
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ interface RouterContextType {
|
|||||||
recentlyUsedTools: PageType[];
|
recentlyUsedTools: PageType[];
|
||||||
isLoaded: boolean;
|
isLoaded: boolean;
|
||||||
navigateTo: (page: PageType) => void;
|
navigateTo: (page: PageType) => void;
|
||||||
goBack: () => void;
|
goHome: () => void;
|
||||||
setVisiblePages: (pages: PageType[]) => void;
|
setVisiblePages: (pages: PageType[]) => void;
|
||||||
setPageOrder: (pages: PageType[]) => void;
|
setPageOrder: (pages: PageType[]) => void;
|
||||||
}
|
}
|
||||||
@@ -274,13 +274,13 @@ export function RouterProvider({
|
|||||||
if (changes[visiblePagesKey as string]) {
|
if (changes[visiblePagesKey as string]) {
|
||||||
const newPages = changes[visiblePagesKey as string].newValue;
|
const newPages = changes[visiblePagesKey as string].newValue;
|
||||||
if (isValidPageList(newPages)) {
|
if (isValidPageList(newPages)) {
|
||||||
setVisiblePages(newPages);
|
setVisiblePages(mergeWithDefaults(newPages, getDefaultVisibleFeatureKeys()));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (changes[pageOrderKey as string]) {
|
if (changes[pageOrderKey as string]) {
|
||||||
const newOrder = changes[pageOrderKey as string].newValue;
|
const newOrder = changes[pageOrderKey as string].newValue;
|
||||||
if (isValidPageList(newOrder)) {
|
if (isValidPageList(newOrder)) {
|
||||||
setPageOrder(newOrder);
|
setPageOrder(mergeWithDefaults(newOrder, getDefaultPageOrder()));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (changes['app/recentlyUsedTools']) {
|
if (changes['app/recentlyUsedTools']) {
|
||||||
@@ -316,7 +316,7 @@ export function RouterProvider({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const goBack = () => {
|
const goHome = () => {
|
||||||
setCurrentPage('dashboard');
|
setCurrentPage('dashboard');
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -329,7 +329,7 @@ export function RouterProvider({
|
|||||||
recentlyUsedTools,
|
recentlyUsedTools,
|
||||||
isLoaded,
|
isLoaded,
|
||||||
navigateTo,
|
navigateTo,
|
||||||
goBack,
|
goHome,
|
||||||
setVisiblePages,
|
setVisiblePages,
|
||||||
setPageOrder,
|
setPageOrder,
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import { browser } from 'wxt/browser';
|
||||||
import { RouterProvider, useRouter } from '@/providers/RouterProvider';
|
import { RouterProvider, useRouter } from '@/providers/RouterProvider';
|
||||||
import { storageUtil } from '@/utils/chromeStorage';
|
import { storageUtil } from '@/utils/chromeStorage';
|
||||||
|
|
||||||
@@ -224,6 +225,58 @@ describe('RouterProvider', () => {
|
|||||||
expect(pageOrder).toBeDefined();
|
expect(pageOrder).toBeDefined();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('storage.onChanged 同步 visiblePages 时应合并缺失的新功能', async () => {
|
||||||
|
(storageUtil.get as any).mockImplementation((_key: string, defaultValue: unknown) =>
|
||||||
|
Promise.resolve(defaultValue),
|
||||||
|
);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<RouterProvider visiblePagesKey="app/popupVisiblePages" pageOrderKey="app/popupPageOrder">
|
||||||
|
<TestComponent />
|
||||||
|
</RouterProvider>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(browser.storage.onChanged.addListener).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
const storageChangeHandler = vi.mocked(browser.storage.onChanged.addListener).mock
|
||||||
|
.calls[0][0] as (changes: Record<string, { newValue?: unknown }>) => void;
|
||||||
|
|
||||||
|
const oldVisiblePages = [
|
||||||
|
'dashboard',
|
||||||
|
'timestamp',
|
||||||
|
'storageCleaner',
|
||||||
|
'qrCode',
|
||||||
|
'textStatistics',
|
||||||
|
'jwt',
|
||||||
|
'jsonDiff',
|
||||||
|
];
|
||||||
|
const oldPageOrder = [
|
||||||
|
'timestamp',
|
||||||
|
'storageCleaner',
|
||||||
|
'qrCode',
|
||||||
|
'textStatistics',
|
||||||
|
'jwt',
|
||||||
|
'jsonDiff',
|
||||||
|
];
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
storageChangeHandler({
|
||||||
|
'app/popupVisiblePages': { newValue: oldVisiblePages },
|
||||||
|
'app/popupPageOrder': { newValue: oldPageOrder },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => {
|
it('组件卸载时不应设置 isLoaded 状态(竞态条件防护)', async () => {
|
||||||
let resolveStorage: (value: unknown) => void;
|
let resolveStorage: (value: unknown) => void;
|
||||||
const storagePromise = new Promise((resolve) => {
|
const storagePromise = new Promise((resolve) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user