test: add SettingsDialog integration tests and enhance MSW infrastructure
- Add comprehensive SettingsDialog integration tests with 3 test cases: * Load default settings from MSW * Import configuration and trigger success callback * Save settings and handle restart prompt - Extend MSW handlers with settings-related endpoints: * get_settings/save_settings for settings management * app_config_dir_override for custom config directory * apply_claude_plugin_config for plugin integration * import/export config file operations * file/directory dialog mocks - Add settings state management to MSW mock state: * Settings state with default values * appConfigDirOverride state * Reset logic in resetProviderState() - Mock @tauri-apps/api/path for DirectorySettings tests - Refactor App.test.tsx to focus on happy path scenarios: * Remove delete functionality test (covered in useProviderActions unit tests) * Reorganize test flow: settings → switch → usage → create → edit → switch → duplicate * Remove unnecessary state verifications * Simplify event testing All tests passing: 4 integration tests + 12 unit tests
This commit is contained in:
Jason
178
tests/integration/SettingsDialog.test.tsx
Normal file
178
tests/integration/SettingsDialog.test.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import React, { Suspense } from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { render, screen, waitFor, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { SettingsDialog } from "@/components/settings/SettingsDialog";
|
||||
import { resetProviderState, getSettings, getAppConfigDirOverride } from "../msw/state";
|
||||
|
||||
const toastSuccessMock = vi.fn();
|
||||
const toastErrorMock = vi.fn();
|
||||
|
||||
vi.mock("sonner", () => ({
|
||||
toast: {
|
||||
success: (...args: unknown[]) => toastSuccessMock(...args),
|
||||
error: (...args: unknown[]) => toastErrorMock(...args),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/dialog", () => ({
|
||||
Dialog: ({ open, children }: any) => (open ? <div data-testid="dialog-root">{children}</div> : null),
|
||||
DialogContent: ({ children }: any) => <div>{children}</div>,
|
||||
DialogHeader: ({ children }: any) => <div>{children}</div>,
|
||||
DialogFooter: ({ children }: any) => <div>{children}</div>,
|
||||
DialogTitle: ({ children }: any) => <h2>{children}</h2>,
|
||||
}));
|
||||
|
||||
const TabsContext = React.createContext<{ value: string; onValueChange?: (value: string) => void }>(
|
||||
{
|
||||
value: "general",
|
||||
},
|
||||
);
|
||||
|
||||
vi.mock("@/components/ui/tabs", () => {
|
||||
return {
|
||||
Tabs: ({ value, onValueChange, children }: any) => (
|
||||
<TabsContext.Provider value={{ value, onValueChange }}>{children}</TabsContext.Provider>
|
||||
),
|
||||
TabsList: ({ children }: any) => <div>{children}</div>,
|
||||
TabsTrigger: ({ value, children }: any) => {
|
||||
const ctx = React.useContext(TabsContext);
|
||||
return (
|
||||
<button type="button" onClick={() => ctx.onValueChange?.(value)}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
TabsContent: ({ value, children }: any) => {
|
||||
const ctx = React.useContext(TabsContext);
|
||||
return ctx.value === value ? <div data-testid={`tab-${value}`}>{children}</div> : null;
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock("@/components/settings/LanguageSettings", () => ({
|
||||
LanguageSettings: ({ value, onChange }: any) => (
|
||||
<div>
|
||||
<span>language:{value}</span>
|
||||
<button onClick={() => onChange("en")}>change-language</button>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/settings/ThemeSettings", () => ({
|
||||
ThemeSettings: () => <div data-testid="theme-settings">theme</div>,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/settings/WindowSettings", () => ({
|
||||
WindowSettings: ({ onChange }: any) => (
|
||||
<button onClick={() => onChange({ minimizeToTrayOnClose: false })}>window-settings</button>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/settings/DirectorySettings", async () => {
|
||||
const actual = await vi.importActual<typeof import("@/components/settings/DirectorySettings")>(
|
||||
"@/components/settings/DirectorySettings",
|
||||
);
|
||||
return actual;
|
||||
});
|
||||
|
||||
vi.mock("@/components/settings/ImportExportSection", () => ({
|
||||
ImportExportSection: ({
|
||||
status,
|
||||
selectedFile,
|
||||
errorMessage,
|
||||
isImporting,
|
||||
onSelectFile,
|
||||
onImport,
|
||||
onExport,
|
||||
onClear,
|
||||
}: any) => (
|
||||
<div>
|
||||
<div data-testid="import-status">{status}</div>
|
||||
<div data-testid="selected-file">{selectedFile || "none"}</div>
|
||||
<button onClick={onSelectFile}>settings.selectConfigFile</button>
|
||||
<button onClick={onImport} disabled={!selectedFile || isImporting}>
|
||||
{isImporting ? "settings.importing" : "settings.import"}
|
||||
</button>
|
||||
<button onClick={onExport}>settings.exportConfig</button>
|
||||
<button onClick={onClear}>common.clear</button>
|
||||
{errorMessage ? <span>{errorMessage}</span> : null}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/settings/AboutSection", () => ({
|
||||
AboutSection: ({ isPortable }: any) => <div>about:{String(isPortable)}</div>,
|
||||
}));
|
||||
|
||||
const renderDialog = (props?: Partial<React.ComponentProps<typeof SettingsDialog>>) => {
|
||||
const client = new QueryClient();
|
||||
return render(
|
||||
<QueryClientProvider client={client}>
|
||||
<Suspense fallback={<div data-testid="loading">loading</div>}>
|
||||
<SettingsDialog open onOpenChange={() => {}} {...props} />
|
||||
</Suspense>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
resetProviderState();
|
||||
toastSuccessMock.mockReset();
|
||||
toastErrorMock.mockReset();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
describe("SettingsDialog integration", () => {
|
||||
it("loads default settings from MSW", async () => {
|
||||
renderDialog();
|
||||
|
||||
await waitFor(() => expect(screen.getByText("language:zh")).toBeInTheDocument());
|
||||
fireEvent.click(screen.getByText("settings.tabAdvanced"));
|
||||
const appInput = await screen.findByPlaceholderText("settings.browsePlaceholderApp");
|
||||
expect((appInput as HTMLInputElement).value).toBe("/home/mock/.cc-switch");
|
||||
});
|
||||
|
||||
it("imports configuration and triggers success callback", async () => {
|
||||
const onImportSuccess = vi.fn();
|
||||
renderDialog({ onImportSuccess });
|
||||
|
||||
await waitFor(() => expect(screen.getByText("language:zh")).toBeInTheDocument());
|
||||
|
||||
fireEvent.click(screen.getByText("settings.tabAdvanced"));
|
||||
fireEvent.click(screen.getByText("settings.selectConfigFile"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("selected-file").textContent).toContain("/mock/import-settings.json"),
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByText("settings.import"));
|
||||
await waitFor(() => expect(toastSuccessMock).toHaveBeenCalled());
|
||||
await waitFor(() => expect(onImportSuccess).toHaveBeenCalled(), {
|
||||
timeout: 4000,
|
||||
});
|
||||
expect(getSettings().language).toBe("en");
|
||||
});
|
||||
|
||||
it("saves settings and handles restart prompt", async () => {
|
||||
renderDialog();
|
||||
|
||||
await waitFor(() => expect(screen.getByText("language:zh")).toBeInTheDocument());
|
||||
|
||||
fireEvent.click(screen.getByText("settings.tabAdvanced"));
|
||||
const appInput = await screen.findByPlaceholderText("settings.browsePlaceholderApp");
|
||||
fireEvent.change(appInput, { target: { value: "/custom/app" } });
|
||||
fireEvent.click(screen.getByText("common.save"));
|
||||
|
||||
await waitFor(() => expect(toastSuccessMock).toHaveBeenCalled());
|
||||
await screen.findByText("settings.restartRequired");
|
||||
fireEvent.click(screen.getByText("settings.restartLater"));
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText("settings.restartRequired")).not.toBeInTheDocument(),
|
||||
);
|
||||
|
||||
expect(getAppConfigDirOverride()).toBe("/custom/app");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user