Browse Source
- Add comprehensive tests for GenerateVideoNode component - Test fal.ai and Replicate provider badges (Gemini excluded) - Verify Gemini is not available for video generation - Test video output display with controls, autoplay, loop, muted - Test video history carousel navigation - Test loading and error states - Test dynamic input handles from schema - Test run button and custom title functionality - Test Browse button opens ModelSearchDialog Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>handoff-20260429-1057
shrimbly
6 months ago
1 changed files with 738 additions and 0 deletions
@ -0,0 +1,738 @@ |
|||||
|
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; |
||||
|
import { render, screen, fireEvent, waitFor } from "@testing-library/react"; |
||||
|
import { GenerateVideoNode } from "@/components/nodes/GenerateVideoNode"; |
||||
|
import { ReactFlowProvider } from "@xyflow/react"; |
||||
|
import { GenerateVideoNodeData, ProviderSettings } from "@/types"; |
||||
|
|
||||
|
// Mock the workflow store
|
||||
|
const mockUpdateNodeData = vi.fn(); |
||||
|
const mockRegenerateNode = vi.fn(); |
||||
|
const mockAddNode = vi.fn(); |
||||
|
const mockIncrementModalCount = vi.fn(); |
||||
|
const mockDecrementModalCount = vi.fn(); |
||||
|
const mockUseWorkflowStore = vi.fn(); |
||||
|
|
||||
|
vi.mock("@/store/workflowStore", () => ({ |
||||
|
useWorkflowStore: (selector?: (state: unknown) => unknown) => { |
||||
|
if (selector) { |
||||
|
return mockUseWorkflowStore(selector); |
||||
|
} |
||||
|
// When called without selector (destructuring pattern), return the full state object
|
||||
|
return mockUseWorkflowStore((s: unknown) => s); |
||||
|
}, |
||||
|
})); |
||||
|
|
||||
|
// Mock useReactFlow
|
||||
|
const mockSetNodes = vi.fn(); |
||||
|
const mockScreenToFlowPosition = vi.fn((pos) => pos); |
||||
|
|
||||
|
vi.mock("@xyflow/react", async () => { |
||||
|
const actual = await vi.importActual("@xyflow/react"); |
||||
|
return { |
||||
|
...actual, |
||||
|
useReactFlow: () => ({ |
||||
|
getNodes: vi.fn(() => []), |
||||
|
setNodes: mockSetNodes, |
||||
|
screenToFlowPosition: mockScreenToFlowPosition, |
||||
|
}), |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
// Mock Toast
|
||||
|
vi.mock("@/components/Toast", () => ({ |
||||
|
useToast: { |
||||
|
getState: () => ({ |
||||
|
show: vi.fn(), |
||||
|
}), |
||||
|
}, |
||||
|
})); |
||||
|
|
||||
|
// Mock createPortal for ModelSearchDialog
|
||||
|
vi.mock("react-dom", async () => { |
||||
|
const actual = await vi.importActual("react-dom"); |
||||
|
return { |
||||
|
...actual, |
||||
|
createPortal: (node: React.ReactNode) => node, |
||||
|
}; |
||||
|
}); |
||||
|
|
||||
|
// Mock fetch
|
||||
|
const mockFetch = vi.fn(); |
||||
|
global.fetch = mockFetch; |
||||
|
|
||||
|
// Wrapper component for React Flow context
|
||||
|
function TestWrapper({ children }: { children: React.ReactNode }) { |
||||
|
return <ReactFlowProvider>{children}</ReactFlowProvider>; |
||||
|
} |
||||
|
|
||||
|
// Default provider settings - Note: Gemini doesn't support video
|
||||
|
const defaultProviderSettings: ProviderSettings = { |
||||
|
providers: { |
||||
|
gemini: { id: "gemini", name: "Gemini", enabled: true, apiKey: null, apiKeyEnvVar: "GEMINI_API_KEY" }, |
||||
|
openai: { id: "openai", name: "OpenAI", enabled: false, apiKey: null }, |
||||
|
replicate: { id: "replicate", name: "Replicate", enabled: false, apiKey: null }, |
||||
|
fal: { id: "fal", name: "fal.ai", enabled: true, apiKey: null }, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
describe("GenerateVideoNode", () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
mockFetch.mockResolvedValue({ |
||||
|
ok: true, |
||||
|
json: () => Promise.resolve({ models: [], success: true }), |
||||
|
}); |
||||
|
|
||||
|
// Default mock implementation
|
||||
|
mockUseWorkflowStore.mockImplementation((selector) => { |
||||
|
const state = { |
||||
|
updateNodeData: mockUpdateNodeData, |
||||
|
regenerateNode: mockRegenerateNode, |
||||
|
addNode: mockAddNode, |
||||
|
incrementModalCount: mockIncrementModalCount, |
||||
|
decrementModalCount: mockDecrementModalCount, |
||||
|
providerSettings: defaultProviderSettings, |
||||
|
generationsPath: "/test/generations", |
||||
|
isRunning: false, |
||||
|
currentNodeId: null, |
||||
|
groups: {}, |
||||
|
nodes: [], |
||||
|
}; |
||||
|
return selector(state); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
vi.restoreAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
const createNodeData = (overrides: Partial<GenerateVideoNodeData> = {}): GenerateVideoNodeData => ({ |
||||
|
inputImages: [], |
||||
|
inputPrompt: null, |
||||
|
outputVideo: null, |
||||
|
status: "idle", |
||||
|
error: null, |
||||
|
videoHistory: [], |
||||
|
selectedVideoHistoryIndex: 0, |
||||
|
...overrides, |
||||
|
}); |
||||
|
|
||||
|
const createNodeProps = (data: Partial<GenerateVideoNodeData> = {}) => ({ |
||||
|
id: "test-node-1", |
||||
|
type: "generateVideo" as const, |
||||
|
data: createNodeData(data), |
||||
|
selected: false, |
||||
|
}); |
||||
|
|
||||
|
describe("Basic Rendering", () => { |
||||
|
it("should render with fal.ai provider badge by default", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// fal.ai badge SVG should be present - viewBox="0 0 1855 1855"
|
||||
|
const falBadge = container.querySelector('svg[viewBox="0 0 1855 1855"]'); |
||||
|
expect(falBadge).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render 'Select model...' when no model is selected", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Default title when no model selected
|
||||
|
expect(screen.getByText("Select model...")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render model name as title when selectedModel is set", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Kling Video")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render image and text input handles", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const imageHandle = container.querySelector('[data-handletype="image"][class*="target"]'); |
||||
|
const textHandle = container.querySelector('[data-handletype="text"]'); |
||||
|
expect(imageHandle).toBeInTheDocument(); |
||||
|
expect(textHandle).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render video output handle", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const outputHandle = container.querySelector('[data-handletype="video"]'); |
||||
|
expect(outputHandle).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render handle labels", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Should have Image and Prompt labels for inputs, Video for output
|
||||
|
expect(screen.getByText("Image")).toBeInTheDocument(); |
||||
|
expect(screen.getByText("Prompt")).toBeInTheDocument(); |
||||
|
expect(screen.getByText("Video")).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Provider Selection (No Gemini)", () => { |
||||
|
it("should not include Gemini in enabled providers", () => { |
||||
|
// The component should only show fal.ai and Replicate (when configured)
|
||||
|
// Gemini is excluded because it doesn't support video generation
|
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Check that there's no Gemini badge visible
|
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Gemini badge would have viewBox="0 0 65 65" - should not be present
|
||||
|
const geminiBadge = container.querySelector('svg[viewBox="0 0 65 65"]'); |
||||
|
expect(geminiBadge).not.toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show fal.ai as default provider", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// fal.ai badge should be the default
|
||||
|
const falBadge = container.querySelector('svg[viewBox="0 0 1855 1855"]'); |
||||
|
expect(falBadge).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show Replicate badge when Replicate provider is selected", async () => { |
||||
|
mockUseWorkflowStore.mockImplementation((selector) => { |
||||
|
const state = { |
||||
|
updateNodeData: mockUpdateNodeData, |
||||
|
regenerateNode: mockRegenerateNode, |
||||
|
addNode: mockAddNode, |
||||
|
incrementModalCount: mockIncrementModalCount, |
||||
|
decrementModalCount: mockDecrementModalCount, |
||||
|
providerSettings: { |
||||
|
providers: { |
||||
|
...defaultProviderSettings.providers, |
||||
|
replicate: { id: "replicate", name: "Replicate", enabled: true, apiKey: "test-key" }, |
||||
|
}, |
||||
|
}, |
||||
|
generationsPath: "/test/generations", |
||||
|
isRunning: false, |
||||
|
currentNodeId: null, |
||||
|
groups: {}, |
||||
|
nodes: [], |
||||
|
}; |
||||
|
return selector(state); |
||||
|
}); |
||||
|
|
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "replicate", modelId: "minimax/video-01", displayName: "MiniMax Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
const replicateBadge = container.querySelector('svg[viewBox="0 0 1000 1000"]'); |
||||
|
expect(replicateBadge).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Idle State", () => { |
||||
|
it("should show 'Run to generate' message when idle and no output", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ status: "idle", outputVideo: null })} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Run to generate")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should render a dashed border placeholder when no output video", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ status: "idle", outputVideo: null })} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const placeholder = container.querySelector(".border-dashed"); |
||||
|
expect(placeholder).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Loading State", () => { |
||||
|
it("should show loading spinner when status is loading and no output", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ status: "loading", outputVideo: null })} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const spinner = container.querySelector(".animate-spin"); |
||||
|
expect(spinner).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show loading overlay when status is loading with existing output", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
status: "loading", |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Should show the spinner overlay on top of the video
|
||||
|
const spinner = container.querySelector(".animate-spin"); |
||||
|
expect(spinner).toBeInTheDocument(); |
||||
|
|
||||
|
// Should still show the video element
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Error State", () => { |
||||
|
it("should show error message when status is error and no output", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
status: "error", |
||||
|
error: "Video generation failed", |
||||
|
outputVideo: null, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Video generation failed")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show error overlay when status is error with existing output", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
status: "error", |
||||
|
error: "Generation failed", |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Generation failed")).toBeInTheDocument(); |
||||
|
expect(screen.getByText("See toast for details")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show 'Failed' when error message is null", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
status: "error", |
||||
|
error: null, |
||||
|
outputVideo: null, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Failed")).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Output Video Display", () => { |
||||
|
it("should render video element when data.outputVideo exists", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video).toBeInTheDocument(); |
||||
|
expect(video).toHaveAttribute("src", "data:video/mp4;base64,abc123"); |
||||
|
}); |
||||
|
|
||||
|
it("should render video with controls attribute", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video).toHaveAttribute("controls"); |
||||
|
}); |
||||
|
|
||||
|
it("should render video with autoplay attribute", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video?.autoplay).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it("should render video with loop attribute", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video).toHaveAttribute("loop"); |
||||
|
}); |
||||
|
|
||||
|
it("should render video with muted attribute", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const video = container.querySelector("video"); |
||||
|
expect(video?.muted).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it("should render clear button when output video exists", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const clearButton = screen.getByTitle("Clear video"); |
||||
|
expect(clearButton).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should call updateNodeData to clear video when clear button is clicked", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const clearButton = screen.getByTitle("Clear video"); |
||||
|
fireEvent.click(clearButton); |
||||
|
|
||||
|
expect(mockUpdateNodeData).toHaveBeenCalledWith("test-node-1", { |
||||
|
outputVideo: null, |
||||
|
status: "idle", |
||||
|
error: null, |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Video History Carousel", () => { |
||||
|
it("should not show carousel controls when history has only one item", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
videoHistory: [{ id: "vid1", timestamp: Date.now(), prompt: "test", model: "kling-video/v1" }], |
||||
|
selectedVideoHistoryIndex: 0, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.queryByTitle("Previous video")).not.toBeInTheDocument(); |
||||
|
expect(screen.queryByTitle("Next video")).not.toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show carousel controls when history has multiple items", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
videoHistory: [ |
||||
|
{ id: "vid1", timestamp: Date.now(), prompt: "test1", model: "kling-video/v1" }, |
||||
|
{ id: "vid2", timestamp: Date.now(), prompt: "test2", model: "kling-video/v1" }, |
||||
|
], |
||||
|
selectedVideoHistoryIndex: 0, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByTitle("Previous video")).toBeInTheDocument(); |
||||
|
expect(screen.getByTitle("Next video")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show current position in carousel", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
outputVideo: "data:video/mp4;base64,abc123", |
||||
|
videoHistory: [ |
||||
|
{ id: "vid1", timestamp: Date.now(), prompt: "test1", model: "kling-video/v1" }, |
||||
|
{ id: "vid2", timestamp: Date.now(), prompt: "test2", model: "kling-video/v1" }, |
||||
|
{ id: "vid3", timestamp: Date.now(), prompt: "test3", model: "kling-video/v1" }, |
||||
|
], |
||||
|
selectedVideoHistoryIndex: 1, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("2 / 3")).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Run Button", () => { |
||||
|
it("should render run button", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByTitle("Run this node")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should call regenerateNode when run button is clicked", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const runButton = screen.getByTitle("Run this node"); |
||||
|
fireEvent.click(runButton); |
||||
|
|
||||
|
expect(mockRegenerateNode).toHaveBeenCalledWith("test-node-1"); |
||||
|
}); |
||||
|
|
||||
|
it("should disable run button when workflow is running", () => { |
||||
|
mockUseWorkflowStore.mockImplementation((selector) => { |
||||
|
const state = { |
||||
|
updateNodeData: mockUpdateNodeData, |
||||
|
regenerateNode: mockRegenerateNode, |
||||
|
addNode: mockAddNode, |
||||
|
incrementModalCount: mockIncrementModalCount, |
||||
|
decrementModalCount: mockDecrementModalCount, |
||||
|
providerSettings: defaultProviderSettings, |
||||
|
generationsPath: "/test/generations", |
||||
|
isRunning: true, |
||||
|
currentNodeId: null, |
||||
|
groups: {}, |
||||
|
nodes: [], |
||||
|
}; |
||||
|
return selector(state); |
||||
|
}); |
||||
|
|
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const runButton = screen.getByTitle("Run this node"); |
||||
|
expect(runButton).toBeDisabled(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Browse Button", () => { |
||||
|
it("should render Browse button", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText("Browse")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should open ModelSearchDialog when Browse button is clicked", async () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps()} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
const browseButton = screen.getByText("Browse"); |
||||
|
fireEvent.click(browseButton); |
||||
|
|
||||
|
// ModelSearchDialog should open
|
||||
|
await waitFor(() => { |
||||
|
expect(screen.getByText("Browse Models")).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Dynamic Input Handles", () => { |
||||
|
it("should render dynamic handles when inputSchema is provided", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
inputSchema: [ |
||||
|
{ name: "image", type: "image", required: true, label: "Input Image" }, |
||||
|
{ name: "prompt", type: "text", required: true, label: "Text Prompt" }, |
||||
|
], |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Should have handles rendered
|
||||
|
const imageHandle = container.querySelector('[data-handletype="image"]'); |
||||
|
const textHandle = container.querySelector('[data-handletype="text"]'); |
||||
|
expect(imageHandle).toBeInTheDocument(); |
||||
|
expect(textHandle).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should show placeholder handles when schema lacks image or text inputs", () => { |
||||
|
const { container } = render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
inputSchema: [ |
||||
|
{ name: "prompt", type: "text", required: true, label: "Prompt" }, |
||||
|
], |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Should still have both image and text handles (image as placeholder)
|
||||
|
const imageHandle = container.querySelector('[data-handletype="image"]'); |
||||
|
const textHandle = container.querySelector('[data-handletype="text"]'); |
||||
|
expect(imageHandle).toBeInTheDocument(); |
||||
|
expect(textHandle).toBeInTheDocument(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Custom Title and Comment", () => { |
||||
|
it("should display custom title when provided", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
customTitle: "My Video Generator", |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
expect(screen.getByText(/My Video Generator/)).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("should call updateNodeData when custom title is changed", () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// Click on title to edit
|
||||
|
const title = screen.getByText("Kling Video"); |
||||
|
fireEvent.click(title); |
||||
|
|
||||
|
// Type new title
|
||||
|
const input = screen.getByPlaceholderText("Custom title..."); |
||||
|
fireEvent.change(input, { target: { value: "New Title" } }); |
||||
|
fireEvent.keyDown(input, { key: "Enter" }); |
||||
|
|
||||
|
expect(mockUpdateNodeData).toHaveBeenCalledWith("test-node-1", { customTitle: "New Title" }); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("ModelParameters Component", () => { |
||||
|
it("should render ModelParameters when model is selected", async () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "kling-video/v1", displayName: "Kling Video" }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
// ModelParameters should attempt to load schema
|
||||
|
await waitFor(() => { |
||||
|
expect(mockFetch).toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("Fetch Models on Mount", () => { |
||||
|
it("should fetch models when provider is fal", async () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "", displayName: "Select model..." }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
const fetchCalls = mockFetch.mock.calls.filter(call => |
||||
|
typeof call[0] === 'string' && call[0].includes('/api/models?') |
||||
|
); |
||||
|
expect(fetchCalls.length).toBeGreaterThan(0); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("should request video capabilities when fetching models", async () => { |
||||
|
render( |
||||
|
<TestWrapper> |
||||
|
<GenerateVideoNode {...createNodeProps({ |
||||
|
selectedModel: { provider: "fal", modelId: "", displayName: "Select model..." }, |
||||
|
})} /> |
||||
|
</TestWrapper> |
||||
|
); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
const fetchCalls = mockFetch.mock.calls.filter(call => |
||||
|
typeof call[0] === 'string' && call[0].includes('text-to-video') |
||||
|
); |
||||
|
expect(fetchCalls.length).toBeGreaterThan(0); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
Loading…
Reference in new issue