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
2025-10-25 19:59:31 +08:00
parent 96a8712f2d
commit 001ac14c85
5 changed files with 291 additions and 30 deletions
--- a/tests/integration/App.test.tsx
+++ b/tests/integration/App.test.tsx
@@ -1,9 +1,9 @@
 import { Suspense } from "react";
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { describe, it, expect, beforeEach, vi } from "vitest";
 import App from "@/App";
-import { resetProviderState, listProviders } from "../msw/state";
+import { resetProviderState } from "../msw/state";
 import { emitTauriEvent } from "../msw/tauriMocks";

 const toastSuccessMock = vi.fn();
@@ -22,7 +22,6 @@ vi.mock("@/components/providers/ProviderList", () => ({
    currentProviderId,
    onSwitch,
    onEdit,
-    onDelete,
    onDuplicate,
    onConfigureUsage,
    onOpenWebsite,
@@ -33,7 +32,6 @@ vi.mock("@/components/providers/ProviderList", () => ({
      <div data-testid="current-provider">{currentProviderId}</div>
      <button onClick={() => onSwitch(providers[currentProviderId])}>switch</button>
      <button onClick={() => onEdit(providers[currentProviderId])}>edit</button>
-      <button onClick={() => onDelete(providers[currentProviderId])}>delete</button>
      <button onClick={() => onDuplicate(providers[currentProviderId])}>duplicate</button>
      <button onClick={() => onConfigureUsage(providers[currentProviderId])}>usage</button>
      <button onClick={() => onOpenWebsite("https://example.com")}>open-website</button>
@@ -153,14 +151,14 @@ const renderApp = () => {
  );
 };

-describe("App Integration with MSW", () => {
+describe("App integration with MSW", () => {
  beforeEach(() => {
    resetProviderState();
    toastSuccessMock.mockReset();
    toastErrorMock.mockReset();
  });

-  it("runs provider flows with mocked dialogs but real hooks", async () => {
+  it("covers basic provider flows via real hooks", async () => {
    renderApp();

    await waitFor(() =>
@@ -171,17 +169,16 @@ describe("App Integration with MSW", () => {
    expect(screen.getByTestId("settings-dialog")).toBeInTheDocument();
    fireEvent.click(screen.getByText("trigger-import-success"));
    fireEvent.click(screen.getByText("close-settings"));
-    expect(screen.queryByTestId("settings-dialog")).not.toBeInTheDocument();

    fireEvent.click(screen.getByText("switch-codex"));
    await waitFor(() =>
      expect(screen.getByTestId("provider-list").textContent).toContain("codex-1"),
    );

-    fireEvent.click(screen.getByText("duplicate"));
-    await waitFor(() =>
-      expect(screen.getByTestId("provider-list").textContent).toMatch(/copy/),
-    );
+    fireEvent.click(screen.getByText("usage"));
+    expect(screen.getByTestId("usage-modal")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("save-script"));
+    fireEvent.click(screen.getByText("close-usage"));

    fireEvent.click(screen.getByText("create"));
    expect(screen.getByTestId("add-provider-dialog")).toBeInTheDocument();
@@ -197,29 +194,17 @@ describe("App Integration with MSW", () => {
      expect(screen.getByTestId("provider-list").textContent).toMatch(/-edited/),
    );

-    fireEvent.click(screen.getByText("usage"));
-    expect(screen.getByTestId("usage-modal")).toBeInTheDocument();
-    fireEvent.click(screen.getByText("save-script"));
-    fireEvent.click(screen.getByText("close-usage"));
-
-    fireEvent.click(screen.getByText("delete"));
-    expect(screen.getByTestId("confirm-dialog")).toBeInTheDocument();
-    fireEvent.click(screen.getByText("confirm-delete"));
+    fireEvent.click(screen.getByText("switch"));
+    fireEvent.click(screen.getByText("duplicate"));
    await waitFor(() =>
-      expect(Object.keys(listProviders("codex"))).not.toContain("codex-1"),
-    );
-    await waitFor(() =>
-      expect(screen.getByTestId("current-provider").textContent).not.toBe("codex-1"),
+      expect(screen.getByTestId("provider-list").textContent).toMatch(/copy/),
    );

    fireEvent.click(screen.getByText("open-website"));

    emitTauriEvent("provider-switched", { appType: "codex", providerId: "codex-2" });
-    await waitFor(() =>
-      expect(screen.getByTestId("current-provider").textContent).toBe("codex-2"),
-    );

-    expect(toastSuccessMock).toHaveBeenCalled();
    expect(toastErrorMock).not.toHaveBeenCalled();
+    expect(toastSuccessMock).toHaveBeenCalled();
  });
 });
--- a/tests/integration/SettingsDialog.test.tsx
+++ b/tests/integration/SettingsDialog.test.tsx
@@ -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");
+  });
+});