test: add comprehensive tests for hooks and components
Add extensive unit and component tests covering import/export, settings, and provider list functionality, advancing to Sprint 2 of test development. Hook Tests: - useImportExport (11 tests): * File selection success/failure flows * Import process with success/failure/exception paths * Export functionality with error handling * User cancellation scenarios * State management (clear selection, reset status) * Fake timers for async callback testing - useSettingsForm (5 tests): * Settings normalization on initialization * Language persistence from localStorage * Field updates with language sync * Reset functionality with initial language restoration * Optimization to avoid redundant language changes Component Tests: - ProviderList (3 tests): * Loading state with skeleton placeholders * Empty state with create callback * Render order from useDragSort with action callbacks * Props pass-through (isCurrent, isEditMode, dragHandleProps) * Mock ProviderCard to isolate component under test Technical Highlights: - Fake timers (vi.useFakeTimers) for async control - i18n mock with changeLanguage spy - Partial mock of @dnd-kit/sortable using vi.importActual - ProviderCard render spy for props verification - Comprehensive error handling coverage Test Coverage: ✓ 19 new test cases (11 + 5 + 3) ✓ Total: 35 tests passing ✓ Execution time: 865ms ✓ TypeScript: 0 errors Related: Import/export, settings management, provider list rendering Sprint Progress: Sprint 1 complete, Sprint 2 in progress (component tests)
This commit is contained in:
Jason
245
tests/components/ProviderList.test.tsx
Normal file
245
tests/components/ProviderList.test.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import type { Provider } from "@/types";
|
||||
import { ProviderList } from "@/components/providers/ProviderList";
|
||||
|
||||
const useDragSortMock = vi.fn();
|
||||
const useSortableMock = vi.fn();
|
||||
const providerCardRenderSpy = vi.fn();
|
||||
|
||||
vi.mock("@/hooks/useDragSort", () => ({
|
||||
useDragSort: (...args: unknown[]) => useDragSortMock(...args),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/providers/ProviderCard", () => ({
|
||||
ProviderCard: (props: any) => {
|
||||
providerCardRenderSpy(props);
|
||||
const {
|
||||
provider,
|
||||
onSwitch,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onDuplicate,
|
||||
onConfigureUsage,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div data-testid={`provider-card-${provider.id}`}>
|
||||
<button
|
||||
data-testid={`switch-${provider.id}`}
|
||||
onClick={() => onSwitch(provider)}
|
||||
>
|
||||
switch
|
||||
</button>
|
||||
<button
|
||||
data-testid={`edit-${provider.id}`}
|
||||
onClick={() => onEdit(provider)}
|
||||
>
|
||||
edit
|
||||
</button>
|
||||
<button
|
||||
data-testid={`duplicate-${provider.id}`}
|
||||
onClick={() => onDuplicate(provider)}
|
||||
>
|
||||
duplicate
|
||||
</button>
|
||||
<button
|
||||
data-testid={`usage-${provider.id}`}
|
||||
onClick={() => onConfigureUsage(provider)}
|
||||
>
|
||||
usage
|
||||
</button>
|
||||
<button
|
||||
data-testid={`delete-${provider.id}`}
|
||||
onClick={() => onDelete(provider)}
|
||||
>
|
||||
delete
|
||||
</button>
|
||||
<span data-testid={`is-current-${provider.id}`}>
|
||||
{props.isCurrent ? "current" : "inactive"}
|
||||
</span>
|
||||
<span data-testid={`edit-mode-${provider.id}`}>
|
||||
{props.isEditMode ? "edit-mode" : "view-mode"}
|
||||
</span>
|
||||
<span data-testid={`drag-attr-${provider.id}`}>
|
||||
{props.dragHandleProps?.attributes?.["data-dnd-id"] ?? "none"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/components/UsageFooter", () => ({
|
||||
default: () => <div data-testid="usage-footer" />,
|
||||
}));
|
||||
|
||||
vi.mock("@dnd-kit/sortable", async () => {
|
||||
const actual = await vi.importActual<any>("@dnd-kit/sortable");
|
||||
|
||||
return {
|
||||
...actual,
|
||||
useSortable: (...args: unknown[]) => useSortableMock(...args),
|
||||
};
|
||||
});
|
||||
|
||||
function createProvider(overrides: Partial<Provider> = {}): Provider {
|
||||
return {
|
||||
id: overrides.id ?? "provider-1",
|
||||
name: overrides.name ?? "Test Provider",
|
||||
settingsConfig: overrides.settingsConfig ?? {},
|
||||
category: overrides.category,
|
||||
createdAt: overrides.createdAt,
|
||||
sortIndex: overrides.sortIndex,
|
||||
meta: overrides.meta,
|
||||
websiteUrl: overrides.websiteUrl,
|
||||
};
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
useDragSortMock.mockReset();
|
||||
useSortableMock.mockReset();
|
||||
providerCardRenderSpy.mockClear();
|
||||
|
||||
useSortableMock.mockImplementation(({ id }: { id: string }) => ({
|
||||
setNodeRef: vi.fn(),
|
||||
attributes: { "data-dnd-id": id },
|
||||
listeners: { onPointerDown: vi.fn() },
|
||||
transform: null,
|
||||
transition: null,
|
||||
isDragging: false,
|
||||
}));
|
||||
|
||||
useDragSortMock.mockReturnValue({
|
||||
sortedProviders: [],
|
||||
sensors: [],
|
||||
handleDragEnd: vi.fn(),
|
||||
});
|
||||
});
|
||||
|
||||
describe("ProviderList Component", () => {
|
||||
it("should render skeleton placeholders when loading", () => {
|
||||
const { container } = render(
|
||||
<ProviderList
|
||||
providers={{}}
|
||||
currentProviderId=""
|
||||
appType="claude"
|
||||
onSwitch={vi.fn()}
|
||||
onEdit={vi.fn()}
|
||||
onDelete={vi.fn()}
|
||||
onDuplicate={vi.fn()}
|
||||
onOpenWebsite={vi.fn()}
|
||||
isLoading
|
||||
/>,
|
||||
);
|
||||
|
||||
const placeholders = container.querySelectorAll(
|
||||
".border-dashed.border-muted-foreground\\/40",
|
||||
);
|
||||
expect(placeholders).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("should show empty state and trigger create callback when no providers exist", () => {
|
||||
const handleCreate = vi.fn();
|
||||
useDragSortMock.mockReturnValueOnce({
|
||||
sortedProviders: [],
|
||||
sensors: [],
|
||||
handleDragEnd: vi.fn(),
|
||||
});
|
||||
|
||||
render(
|
||||
<ProviderList
|
||||
providers={{}}
|
||||
currentProviderId=""
|
||||
appType="claude"
|
||||
onSwitch={vi.fn()}
|
||||
onEdit={vi.fn()}
|
||||
onDelete={vi.fn()}
|
||||
onDuplicate={vi.fn()}
|
||||
onOpenWebsite={vi.fn()}
|
||||
onCreate={handleCreate}
|
||||
/>,
|
||||
);
|
||||
|
||||
const addButton = screen.getByRole("button", {
|
||||
name: "provider.addProvider",
|
||||
});
|
||||
fireEvent.click(addButton);
|
||||
|
||||
expect(handleCreate).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("should render in order returned by useDragSort and pass through action callbacks", () => {
|
||||
const providerA = createProvider({ id: "a", name: "A" });
|
||||
const providerB = createProvider({ id: "b", name: "B" });
|
||||
|
||||
const handleSwitch = vi.fn();
|
||||
const handleEdit = vi.fn();
|
||||
const handleDelete = vi.fn();
|
||||
const handleDuplicate = vi.fn();
|
||||
const handleUsage = vi.fn();
|
||||
const handleOpenWebsite = vi.fn();
|
||||
|
||||
useDragSortMock.mockReturnValue({
|
||||
sortedProviders: [providerB, providerA],
|
||||
sensors: [],
|
||||
handleDragEnd: vi.fn(),
|
||||
});
|
||||
|
||||
render(
|
||||
<ProviderList
|
||||
providers={{ a: providerA, b: providerB }}
|
||||
currentProviderId="b"
|
||||
appType="claude"
|
||||
isEditMode
|
||||
onSwitch={handleSwitch}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onDuplicate={handleDuplicate}
|
||||
onConfigureUsage={handleUsage}
|
||||
onOpenWebsite={handleOpenWebsite}
|
||||
/>,
|
||||
);
|
||||
|
||||
// Verify sort order
|
||||
expect(providerCardRenderSpy).toHaveBeenCalledTimes(2);
|
||||
expect(providerCardRenderSpy.mock.calls[0][0].provider.id).toBe("b");
|
||||
expect(providerCardRenderSpy.mock.calls[1][0].provider.id).toBe("a");
|
||||
|
||||
// Verify current provider marker and edit mode pass-through
|
||||
expect(
|
||||
providerCardRenderSpy.mock.calls[0][0].isCurrent,
|
||||
).toBe(true);
|
||||
expect(providerCardRenderSpy.mock.calls[0][0].isEditMode).toBe(true);
|
||||
|
||||
// Drag attributes from useSortable
|
||||
expect(
|
||||
providerCardRenderSpy.mock.calls[0][0].dragHandleProps?.attributes[
|
||||
"data-dnd-id"
|
||||
],
|
||||
).toBe("b");
|
||||
expect(
|
||||
providerCardRenderSpy.mock.calls[1][0].dragHandleProps?.attributes[
|
||||
"data-dnd-id"
|
||||
],
|
||||
).toBe("a");
|
||||
|
||||
// Trigger action buttons
|
||||
fireEvent.click(screen.getByTestId("switch-b"));
|
||||
fireEvent.click(screen.getByTestId("edit-b"));
|
||||
fireEvent.click(screen.getByTestId("duplicate-b"));
|
||||
fireEvent.click(screen.getByTestId("usage-b"));
|
||||
fireEvent.click(screen.getByTestId("delete-a"));
|
||||
|
||||
expect(handleSwitch).toHaveBeenCalledWith(providerB);
|
||||
expect(handleEdit).toHaveBeenCalledWith(providerB);
|
||||
expect(handleDuplicate).toHaveBeenCalledWith(providerB);
|
||||
expect(handleUsage).toHaveBeenCalledWith(providerB);
|
||||
expect(handleDelete).toHaveBeenCalledWith(providerA);
|
||||
|
||||
// Verify useDragSort call parameters
|
||||
expect(useDragSortMock).toHaveBeenCalledWith(
|
||||
{ a: providerA, b: providerB },
|
||||
"claude",
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user