test: migrate to MSW testing architecture for App integration test
Major testing infrastructure upgrade from manual mocks to Mock Service Worker (MSW): New MSW infrastructure (tests/msw/): - Add state.ts: In-memory state manager with full CRUD operations - Manage providers and current selections per app type (Claude/Codex) - Auto-switch current provider when deleted - Deep clone to prevent reference pollution - Add handlers.ts: HTTP request handlers for 10 Tauri API endpoints - Mock get_providers, switch_provider, add/update/delete_provider - Mock update_sort_order, update_tray_menu, import_default_config - Support error scenarios (404 for non-existent providers) - Add tauriMocks.ts: Tauri API mock layer - Transparently convert invoke() calls to HTTP requests - Mock event listener system with emitTauriEvent helper - Use cross-fetch for Node.js environment - Add server.ts: MSW server setup for Node.js test environment Refactor App.test.tsx (-170 lines, -43%): - Remove 23 manual mocks (useProvidersQuery, useProviderActions, etc.) - Run real hooks with MSW-backed API calls instead of mock implementations - Test real state changes instead of mock call counts - Add comprehensive flow: duplicate → create → edit → delete → event listening - Verify actual provider list changes and current selection updates Setup integration: - Add MSW server lifecycle to tests/setupTests.ts - Start server before all tests - Reset handlers and state after each test - Close server after all tests complete - Clear all mocks in afterEach for test isolation Dependencies: - Add msw@^2.11.6 for API mocking - Add cross-fetch@^4.1.0 for fetch polyfill in Node.js Type fixes: - Add missing imports (AppType, Provider) in handlers.ts - Fix HttpResponse.json generic constraint with as any (MSW best practice) - Change invalid category "default" to "official" in state.ts Test results: All 50 tests passing across 8 files, 0 TypeScript errors
This commit is contained in:
100
tests/msw/handlers.ts
Normal file
100
tests/msw/handlers.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { http, HttpResponse } from "msw";
|
||||
import type { AppType } from "@/lib/api/types";
|
||||
import type { Provider } from "@/types";
|
||||
import {
|
||||
addProvider,
|
||||
deleteProvider,
|
||||
getCurrentProviderId,
|
||||
getProviders,
|
||||
listProviders,
|
||||
resetProviderState,
|
||||
setCurrentProviderId,
|
||||
updateProvider,
|
||||
updateSortOrder,
|
||||
} from "./state";
|
||||
|
||||
const TAURI_ENDPOINT = "http://tauri.local";
|
||||
|
||||
const withJson = async <T>(request: Request): Promise<T> => {
|
||||
try {
|
||||
const body = await request.text();
|
||||
if (!body) return {} as T;
|
||||
return JSON.parse(body) as T;
|
||||
} catch {
|
||||
return {} as T;
|
||||
}
|
||||
};
|
||||
|
||||
const success = <T>(payload: T) => HttpResponse.json(payload as any);
|
||||
|
||||
export const handlers = [
|
||||
http.post(`${TAURI_ENDPOINT}/get_providers`, async ({ request }) => {
|
||||
const { app_type } = await withJson<{ app_type: AppType }>(request);
|
||||
return success(getProviders(app_type));
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/get_current_provider`, async ({ request }) => {
|
||||
const { app_type } = await withJson<{ app_type: AppType }>(request);
|
||||
return success(getCurrentProviderId(app_type));
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/update_providers_sort_order`, async ({ request }) => {
|
||||
const { updates = [], app_type } = await withJson<{
|
||||
updates: { id: string; sortIndex: number }[];
|
||||
app_type: AppType;
|
||||
}>(request);
|
||||
updateSortOrder(app_type, updates);
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/update_tray_menu`, () => success(true)),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/switch_provider`, async ({ request }) => {
|
||||
const { id, app_type } = await withJson<{ id: string; app_type: AppType }>(
|
||||
request,
|
||||
);
|
||||
const providers = listProviders(app_type);
|
||||
if (!providers[id]) {
|
||||
return HttpResponse.json(false, { status: 404 });
|
||||
}
|
||||
setCurrentProviderId(app_type, id);
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/add_provider`, async ({ request }) => {
|
||||
const { provider, app_type } = await withJson<{
|
||||
provider: Provider & { id?: string };
|
||||
app_type: AppType;
|
||||
}>(request);
|
||||
|
||||
const newId = provider.id ?? `mock-${Date.now()}`;
|
||||
addProvider(app_type, { ...provider, id: newId });
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/update_provider`, async ({ request }) => {
|
||||
const { provider, app_type } = await withJson<{
|
||||
provider: Provider;
|
||||
app_type: AppType;
|
||||
}>(request);
|
||||
updateProvider(app_type, provider);
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/delete_provider`, async ({ request }) => {
|
||||
const { id, app_type } = await withJson<{ id: string; app_type: AppType }>(
|
||||
request,
|
||||
);
|
||||
deleteProvider(app_type, id);
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/import_default_config`, async () => {
|
||||
resetProviderState();
|
||||
return success(true);
|
||||
}),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/open_external`, () => success(true)),
|
||||
|
||||
http.post(`${TAURI_ENDPOINT}/restart_app`, () => success(true)),
|
||||
];
|
||||
5
tests/msw/server.ts
Normal file
5
tests/msw/server.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { setupServer } from "msw/node";
|
||||
import { handlers } from "./handlers";
|
||||
|
||||
export const server = setupServer(...handlers);
|
||||
|
||||
116
tests/msw/state.ts
Normal file
116
tests/msw/state.ts
Normal file
@@ -0,0 +1,116 @@
|
||||
import type { AppType } from "@/lib/api/types";
|
||||
import type { Provider } from "@/types";
|
||||
|
||||
type ProvidersByApp = Record<AppType, Record<string, Provider>>;
|
||||
type CurrentProviderState = Record<AppType, string>;
|
||||
|
||||
const createDefaultProviders = (): ProvidersByApp => ({
|
||||
claude: {
|
||||
"claude-1": {
|
||||
id: "claude-1",
|
||||
name: "Claude Default",
|
||||
settingsConfig: {},
|
||||
category: "official",
|
||||
sortIndex: 0,
|
||||
createdAt: Date.now(),
|
||||
},
|
||||
"claude-2": {
|
||||
id: "claude-2",
|
||||
name: "Claude Custom",
|
||||
settingsConfig: {},
|
||||
category: "custom",
|
||||
sortIndex: 1,
|
||||
createdAt: Date.now() + 1,
|
||||
},
|
||||
},
|
||||
codex: {
|
||||
"codex-1": {
|
||||
id: "codex-1",
|
||||
name: "Codex Default",
|
||||
settingsConfig: {},
|
||||
category: "official",
|
||||
sortIndex: 0,
|
||||
createdAt: Date.now(),
|
||||
},
|
||||
"codex-2": {
|
||||
id: "codex-2",
|
||||
name: "Codex Secondary",
|
||||
settingsConfig: {},
|
||||
category: "custom",
|
||||
sortIndex: 1,
|
||||
createdAt: Date.now() + 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const createDefaultCurrent = (): CurrentProviderState => ({
|
||||
claude: "claude-1",
|
||||
codex: "codex-1",
|
||||
});
|
||||
|
||||
let providers = createDefaultProviders();
|
||||
let current = createDefaultCurrent();
|
||||
|
||||
const cloneProviders = (value: ProvidersByApp) =>
|
||||
JSON.parse(JSON.stringify(value)) as ProvidersByApp;
|
||||
|
||||
export const resetProviderState = () => {
|
||||
providers = createDefaultProviders();
|
||||
current = createDefaultCurrent();
|
||||
};
|
||||
|
||||
export const getProviders = (appType: AppType) =>
|
||||
cloneProviders(providers)[appType] ?? {};
|
||||
|
||||
export const getCurrentProviderId = (appType: AppType) => current[appType] ?? "";
|
||||
|
||||
export const setCurrentProviderId = (appType: AppType, providerId: string) => {
|
||||
current[appType] = providerId;
|
||||
};
|
||||
|
||||
export const updateProviders = (appType: AppType, data: Record<string, Provider>) => {
|
||||
providers[appType] = cloneProviders({ [appType]: data } as ProvidersByApp)[appType];
|
||||
};
|
||||
|
||||
export const setProviders = (appType: AppType, data: Record<string, Provider>) => {
|
||||
providers[appType] = JSON.parse(JSON.stringify(data)) as Record<string, Provider>;
|
||||
};
|
||||
|
||||
export const addProvider = (appType: AppType, provider: Provider) => {
|
||||
providers[appType] = providers[appType] ?? {};
|
||||
providers[appType][provider.id] = provider;
|
||||
};
|
||||
|
||||
export const updateProvider = (appType: AppType, provider: Provider) => {
|
||||
if (!providers[appType]) return;
|
||||
providers[appType][provider.id] = {
|
||||
...providers[appType][provider.id],
|
||||
...provider,
|
||||
};
|
||||
};
|
||||
|
||||
export const deleteProvider = (appType: AppType, providerId: string) => {
|
||||
if (!providers[appType]) return;
|
||||
delete providers[appType][providerId];
|
||||
if (current[appType] === providerId) {
|
||||
const fallback = Object.keys(providers[appType])[0] ?? "";
|
||||
current[appType] = fallback;
|
||||
}
|
||||
};
|
||||
|
||||
export const updateSortOrder = (
|
||||
appType: AppType,
|
||||
updates: { id: string; sortIndex: number }[],
|
||||
) => {
|
||||
if (!providers[appType]) return;
|
||||
updates.forEach(({ id, sortIndex }) => {
|
||||
const provider = providers[appType][id];
|
||||
if (provider) {
|
||||
providers[appType][id] = { ...provider, sortIndex };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const listProviders = (appType: AppType) =>
|
||||
JSON.parse(JSON.stringify(providers[appType] ?? {})) as Record<string, Provider>;
|
||||
|
||||
61
tests/msw/tauriMocks.ts
Normal file
61
tests/msw/tauriMocks.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import "cross-fetch/polyfill";
|
||||
import { vi } from "vitest";
|
||||
import { server } from "./server";
|
||||
|
||||
const TAURI_ENDPOINT = "http://tauri.local";
|
||||
|
||||
vi.mock("@tauri-apps/api/core", () => ({
|
||||
invoke: async (command: string, payload: Record<string, unknown> = {}) => {
|
||||
const response = await fetch(`${TAURI_ENDPOINT}/${command}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload ?? {}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const text = await response.text();
|
||||
throw new Error(text || `Invoke failed for ${command}`);
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
if (!text) return undefined;
|
||||
try {
|
||||
return JSON.parse(text);
|
||||
} catch {
|
||||
return text;
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
const listeners = new Map<
|
||||
string,
|
||||
Set<(event: { payload: unknown }) => void>
|
||||
>();
|
||||
|
||||
const ensureListenerSet = (event: string) => {
|
||||
if (!listeners.has(event)) {
|
||||
listeners.set(event, new Set());
|
||||
}
|
||||
return listeners.get(event)!;
|
||||
};
|
||||
|
||||
export const emitTauriEvent = (event: string, payload: unknown) => {
|
||||
const handlers = listeners.get(event);
|
||||
handlers?.forEach((handler) => handler({ payload }));
|
||||
};
|
||||
|
||||
vi.mock("@tauri-apps/api/event", () => ({
|
||||
listen: async (event: string, handler: (event: { payload: unknown }) => void) => {
|
||||
const set = ensureListenerSet(event);
|
||||
set.add(handler);
|
||||
return () => {
|
||||
set.delete(handler);
|
||||
};
|
||||
},
|
||||
}));
|
||||
|
||||
// Ensure the MSW server is referenced so tree shaking doesn't remove imports
|
||||
void server;
|
||||
|
||||
Reference in New Issue
Block a user