mirror of
https://github.com/lordmathis/llamactl.git
synced 2025-12-23 17:44:24 +00:00
Implement basic tests for webui
This commit is contained in:
339
webui/src/components/__tests__/InstanceCard.test.tsx
Normal file
339
webui/src/components/__tests__/InstanceCard.test.tsx
Normal file
@@ -0,0 +1,339 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import InstanceCard from '@/components/InstanceCard'
|
||||
import { Instance } from '@/types/instance'
|
||||
|
||||
// Mock the health hook since we're not testing health logic here
|
||||
vi.mock('@/hooks/useInstanceHealth', () => ({
|
||||
useInstanceHealth: vi.fn(() => ({ status: 'ok', lastChecked: new Date() }))
|
||||
}))
|
||||
|
||||
describe('InstanceCard - Instance Actions and State', () => {
|
||||
const mockStartInstance = vi.fn()
|
||||
const mockStopInstance = vi.fn()
|
||||
const mockDeleteInstance = vi.fn()
|
||||
const mockEditInstance = vi.fn()
|
||||
|
||||
const stoppedInstance: Instance = {
|
||||
name: 'test-instance',
|
||||
running: false,
|
||||
options: { model: 'test-model.gguf' }
|
||||
}
|
||||
|
||||
const runningInstance: Instance = {
|
||||
name: 'running-instance',
|
||||
running: true,
|
||||
options: { model: 'running-model.gguf' }
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Instance Action Buttons', () => {
|
||||
it('calls startInstance when start button clicked on stopped instance', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const startButton = screen.getByTitle('Start instance')
|
||||
expect(startButton).not.toBeDisabled()
|
||||
|
||||
await user.click(startButton)
|
||||
|
||||
expect(mockStartInstance).toHaveBeenCalledWith('test-instance')
|
||||
})
|
||||
|
||||
it('calls stopInstance when stop button clicked on running instance', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={runningInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const stopButton = screen.getByTitle('Stop instance')
|
||||
expect(stopButton).not.toBeDisabled()
|
||||
|
||||
await user.click(stopButton)
|
||||
|
||||
expect(mockStopInstance).toHaveBeenCalledWith('running-instance')
|
||||
})
|
||||
|
||||
it('calls editInstance when edit button clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const editButton = screen.getByTitle('Edit instance')
|
||||
await user.click(editButton)
|
||||
|
||||
expect(mockEditInstance).toHaveBeenCalledWith(stoppedInstance)
|
||||
})
|
||||
|
||||
it('opens logs modal when logs button clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const logsButton = screen.getByTitle('View logs')
|
||||
await user.click(logsButton)
|
||||
|
||||
// Should open logs modal (we can verify this by checking if modal title appears)
|
||||
expect(screen.getByText(`Logs: ${stoppedInstance.name}`)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Delete Confirmation Logic', () => {
|
||||
it('shows confirmation dialog and calls deleteInstance when confirmed', async () => {
|
||||
const user = userEvent.setup()
|
||||
const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const deleteButton = screen.getByTitle('Delete instance')
|
||||
await user.click(deleteButton)
|
||||
|
||||
expect(confirmSpy).toHaveBeenCalledWith('Are you sure you want to delete instance "test-instance"?')
|
||||
expect(mockDeleteInstance).toHaveBeenCalledWith('test-instance')
|
||||
|
||||
confirmSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('does not call deleteInstance when confirmation cancelled', async () => {
|
||||
const user = userEvent.setup()
|
||||
const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
const deleteButton = screen.getByTitle('Delete instance')
|
||||
await user.click(deleteButton)
|
||||
|
||||
expect(confirmSpy).toHaveBeenCalled()
|
||||
expect(mockDeleteInstance).not.toHaveBeenCalled()
|
||||
|
||||
confirmSpy.mockRestore()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Button State Based on Instance Status', () => {
|
||||
it('disables start button and enables stop button for running instance', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={runningInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByTitle('Start instance')).toBeDisabled()
|
||||
expect(screen.getByTitle('Stop instance')).not.toBeDisabled()
|
||||
expect(screen.getByTitle('Delete instance')).toBeDisabled() // Can't delete running instance
|
||||
})
|
||||
|
||||
it('enables start button and disables stop button for stopped instance', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByTitle('Start instance')).not.toBeDisabled()
|
||||
expect(screen.getByTitle('Stop instance')).toBeDisabled()
|
||||
expect(screen.getByTitle('Delete instance')).not.toBeDisabled() // Can delete stopped instance
|
||||
})
|
||||
|
||||
it('edit and logs buttons are always enabled', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={runningInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByTitle('Edit instance')).not.toBeDisabled()
|
||||
expect(screen.getByTitle('View logs')).not.toBeDisabled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Instance Information Display', () => {
|
||||
it('displays instance name correctly', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByText('test-instance')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows health badge for running instances', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={runningInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Health badge should be present for running instances
|
||||
// The exact text depends on the health status from the mock
|
||||
expect(screen.getByText('Ready')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show health badge for stopped instances', () => {
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={stoppedInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Health badge should not be present for stopped instances
|
||||
expect(screen.queryByText('Ready')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Integration with LogsModal', () => {
|
||||
it('passes correct props to LogsModal', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={runningInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Open logs modal
|
||||
await user.click(screen.getByTitle('View logs'))
|
||||
|
||||
// Verify modal opened with correct instance data
|
||||
expect(screen.getByText('Logs: running-instance')).toBeInTheDocument()
|
||||
|
||||
// Close modal to test close functionality
|
||||
const closeButtons = screen.getAllByText('Close')
|
||||
const modalCloseButton = closeButtons.find(button =>
|
||||
button.closest('[data-slot="dialog-content"]')
|
||||
)
|
||||
expect(modalCloseButton).toBeTruthy()
|
||||
await user.click(modalCloseButton!)
|
||||
|
||||
// Modal should close
|
||||
expect(screen.queryByText('Logs: running-instance')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Error Edge Cases', () => {
|
||||
it('handles instance with minimal data', () => {
|
||||
const minimalInstance: Instance = {
|
||||
name: 'minimal',
|
||||
running: false,
|
||||
options: {}
|
||||
}
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={minimalInstance}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Should still render basic structure
|
||||
expect(screen.getByText('minimal')).toBeInTheDocument()
|
||||
expect(screen.getByTitle('Start instance')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles instance with undefined options', () => {
|
||||
const instanceWithoutOptions: Instance = {
|
||||
name: 'no-options',
|
||||
running: true,
|
||||
options: undefined
|
||||
}
|
||||
|
||||
render(
|
||||
<InstanceCard
|
||||
instance={instanceWithoutOptions}
|
||||
startInstance={mockStartInstance}
|
||||
stopInstance={mockStopInstance}
|
||||
deleteInstance={mockDeleteInstance}
|
||||
editInstance={mockEditInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Should still work
|
||||
expect(screen.getByText('no-options')).toBeInTheDocument()
|
||||
expect(screen.getByTitle('Stop instance')).not.toBeDisabled()
|
||||
})
|
||||
})
|
||||
})
|
||||
246
webui/src/components/__tests__/InstanceList.test.tsx
Normal file
246
webui/src/components/__tests__/InstanceList.test.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import InstanceList from '@/components/InstanceList'
|
||||
import { InstancesProvider } from '@/contexts/InstancesContext'
|
||||
import { instancesApi } from '@/lib/api'
|
||||
import { Instance } from '@/types/instance'
|
||||
|
||||
// Mock the API
|
||||
vi.mock('@/lib/api', () => ({
|
||||
instancesApi: {
|
||||
list: vi.fn(),
|
||||
create: vi.fn(),
|
||||
update: vi.fn(),
|
||||
start: vi.fn(),
|
||||
stop: vi.fn(),
|
||||
restart: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
}
|
||||
}))
|
||||
|
||||
// Mock health service
|
||||
vi.mock('@/lib/healthService', () => ({
|
||||
healthService: {
|
||||
subscribe: vi.fn(() => () => {}),
|
||||
checkHealth: vi.fn(),
|
||||
},
|
||||
checkHealth: vi.fn(),
|
||||
}))
|
||||
|
||||
function renderInstanceList(editInstance = vi.fn()) {
|
||||
return render(
|
||||
<InstancesProvider>
|
||||
<InstanceList editInstance={editInstance} />
|
||||
</InstancesProvider>
|
||||
)
|
||||
}
|
||||
|
||||
describe('InstanceList - State Management and UI Logic', () => {
|
||||
const mockEditInstance = vi.fn()
|
||||
|
||||
const mockInstances: Instance[] = [
|
||||
{ name: 'instance-1', running: false, options: { model: 'model1.gguf' } },
|
||||
{ name: 'instance-2', running: true, options: { model: 'model2.gguf' } },
|
||||
{ name: 'instance-3', running: false, options: { model: 'model3.gguf' } }
|
||||
]
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Loading State', () => {
|
||||
it('shows loading spinner while instances are being fetched', async () => {
|
||||
// Mock a delayed response to test loading state
|
||||
vi.mocked(instancesApi.list).mockImplementation(() =>
|
||||
new Promise(resolve => setTimeout(() => resolve(mockInstances), 100))
|
||||
)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
// Should show loading state immediately
|
||||
expect(screen.getByText('Loading instances...')).toBeInTheDocument()
|
||||
expect(screen.getByLabelText('Loading')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Error State', () => {
|
||||
it('displays error message when instance loading fails', async () => {
|
||||
const errorMessage = 'Failed to connect to server'
|
||||
vi.mocked(instancesApi.list).mockRejectedValue(new Error(errorMessage))
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
// Wait for error to appear
|
||||
expect(await screen.findByText('Error loading instances')).toBeInTheDocument()
|
||||
expect(screen.getByText(errorMessage)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show instances or loading when in error state', async () => {
|
||||
vi.mocked(instancesApi.list).mockRejectedValue(new Error('Network error'))
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('Error loading instances')
|
||||
|
||||
// Should not show loading or instance elements
|
||||
expect(screen.queryByText('Loading instances...')).not.toBeInTheDocument()
|
||||
expect(screen.queryByText('Instances (')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Empty State', () => {
|
||||
it('shows empty state message when no instances exist', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue([])
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
expect(await screen.findByText('No instances found')).toBeInTheDocument()
|
||||
expect(screen.getByText('Create your first instance to get started')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('does not show instances header when empty', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue([])
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('No instances found')
|
||||
|
||||
expect(screen.queryByText(/Instances \(/)).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Instances Display', () => {
|
||||
it('displays all instances with correct count', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
// Wait for instances to load
|
||||
expect(await screen.findByText('Instances (3)')).toBeInTheDocument()
|
||||
|
||||
// All instances should be displayed
|
||||
expect(screen.getByText('instance-1')).toBeInTheDocument()
|
||||
expect(screen.getByText('instance-2')).toBeInTheDocument()
|
||||
expect(screen.getByText('instance-3')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('displays correct count based on instances received', async () => {
|
||||
// Test with different numbers of instances
|
||||
const twoInstances = mockInstances.slice(0, 2)
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(twoInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
expect(await screen.findByText('Instances (2)')).toBeInTheDocument()
|
||||
expect(screen.getByText('instance-1')).toBeInTheDocument()
|
||||
expect(screen.getByText('instance-2')).toBeInTheDocument()
|
||||
expect(screen.queryByText('instance-3')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Instance Card Integration', () => {
|
||||
it('passes editInstance function to each instance card', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('Instances (3)')
|
||||
|
||||
// Find edit buttons and click one
|
||||
const editButtons = screen.getAllByTitle('Edit instance')
|
||||
expect(editButtons).toHaveLength(3)
|
||||
|
||||
// Click the first edit button
|
||||
await userEvent.setup().click(editButtons[0])
|
||||
|
||||
// Should call editInstance with the correct instance
|
||||
expect(mockEditInstance).toHaveBeenCalledWith(mockInstances[0])
|
||||
})
|
||||
|
||||
it('instance actions work through context integration', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
vi.mocked(instancesApi.start).mockResolvedValue({} as Instance)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('Instances (3)')
|
||||
|
||||
// Find start buttons (should be available for stopped instances)
|
||||
const startButtons = screen.getAllByTitle('Start instance')
|
||||
expect(startButtons.length).toBeGreaterThan(0)
|
||||
|
||||
// Click a start button
|
||||
await userEvent.setup().click(startButtons[0])
|
||||
|
||||
// Should call the API (testing integration with context)
|
||||
expect(instancesApi.start).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Performance Optimization', () => {
|
||||
it('uses memoized instance cards to prevent unnecessary re-renders', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('Instances (3)')
|
||||
|
||||
// This is more of a structural test - we're verifying that the component
|
||||
// uses MemoizedInstanceCard (as mentioned in the source code comment)
|
||||
// The actual memoization effect would need more complex testing setup
|
||||
expect(screen.getAllByTitle('Edit instance')).toHaveLength(3)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Grid Layout', () => {
|
||||
it('renders instances in a grid layout', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
await screen.findByText('Instances (3)')
|
||||
|
||||
// Check that instances are rendered in the expected container structure
|
||||
const instanceGrid = screen.getByText('instance-1').closest('.grid')
|
||||
expect(instanceGrid).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('State Transitions', () => {
|
||||
it('transitions from loading to loaded state correctly', async () => {
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
renderInstanceList(mockEditInstance)
|
||||
|
||||
// Should start with loading
|
||||
expect(screen.getByText('Loading instances...')).toBeInTheDocument()
|
||||
|
||||
// Should transition to loaded state
|
||||
expect(await screen.findByText('Instances (3)')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Loading instances...')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('handles transition from error back to loaded state', async () => {
|
||||
// Start with error
|
||||
vi.mocked(instancesApi.list).mockRejectedValue(new Error('Network error'))
|
||||
|
||||
const { rerender } = renderInstanceList(mockEditInstance)
|
||||
|
||||
expect(await screen.findByText('Error loading instances')).toBeInTheDocument()
|
||||
|
||||
// Simulate recovery (e.g., retry after network recovery)
|
||||
vi.mocked(instancesApi.list).mockResolvedValue(mockInstances)
|
||||
|
||||
rerender(
|
||||
<InstancesProvider>
|
||||
<InstanceList editInstance={mockEditInstance} />
|
||||
</InstancesProvider>
|
||||
)
|
||||
|
||||
// Should eventually show instances
|
||||
// Note: This test is somewhat artificial since the context handles retries
|
||||
expect(screen.getByText('Error loading instances')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
382
webui/src/components/__tests__/InstanceModal.test.tsx
Normal file
382
webui/src/components/__tests__/InstanceModal.test.tsx
Normal file
@@ -0,0 +1,382 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
||||
import { render, screen, waitFor } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import InstanceModal from '@/components/InstanceModal'
|
||||
import { Instance } from '@/types/instance'
|
||||
|
||||
describe('InstanceModal - Form Logic and Validation', () => {
|
||||
const mockOnSave = vi.fn()
|
||||
const mockOnOpenChange = vi.fn()
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
describe('Create Mode', () => {
|
||||
it('validates instance name is required', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Try to submit without name
|
||||
const saveButton = screen.getByTestId('modal-save-button')
|
||||
expect(saveButton).toBeDisabled()
|
||||
|
||||
// Add name, button should be enabled
|
||||
const nameInput = screen.getByLabelText(/Instance Name/)
|
||||
await user.type(nameInput, 'test-instance')
|
||||
|
||||
await waitFor(() => {
|
||||
expect(saveButton).not.toBeDisabled()
|
||||
})
|
||||
})
|
||||
|
||||
it('validates instance name format', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
const nameInput = screen.getByLabelText(/Instance Name/)
|
||||
|
||||
// Test invalid characters
|
||||
await user.type(nameInput, 'test instance!')
|
||||
|
||||
expect(screen.getByText(/can only contain letters, numbers, hyphens, and underscores/)).toBeInTheDocument()
|
||||
expect(screen.getByTestId('modal-save-button')).toBeDisabled()
|
||||
|
||||
// Clear and test valid name
|
||||
await user.clear(nameInput)
|
||||
await user.type(nameInput, 'test-instance-123')
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText(/can only contain letters, numbers, hyphens, and underscores/)).not.toBeInTheDocument()
|
||||
expect(screen.getByTestId('modal-save-button')).not.toBeDisabled()
|
||||
})
|
||||
})
|
||||
|
||||
it('submits form with correct data structure', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Fill required name
|
||||
await user.type(screen.getByLabelText(/Instance Name/), 'my-instance')
|
||||
|
||||
// Submit form
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledWith('my-instance', {
|
||||
auto_restart: true, // Default value
|
||||
})
|
||||
})
|
||||
|
||||
it('form resets when modal reopens', async () => {
|
||||
const { rerender } = render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Fill form
|
||||
const nameInput = screen.getByLabelText(/Instance Name/)
|
||||
await userEvent.setup().type(nameInput, 'temp-name')
|
||||
|
||||
// Close modal
|
||||
rerender(
|
||||
<InstanceModal
|
||||
open={false}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Reopen modal
|
||||
rerender(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Form should be reset
|
||||
const newNameInput = screen.getByLabelText(/Instance Name/)
|
||||
expect(newNameInput).toHaveValue('')
|
||||
})
|
||||
})
|
||||
|
||||
describe('Edit Mode', () => {
|
||||
const mockInstance: Instance = {
|
||||
name: 'existing-instance',
|
||||
running: false,
|
||||
options: {
|
||||
model: 'test-model.gguf',
|
||||
gpu_layers: 10,
|
||||
auto_restart: false
|
||||
}
|
||||
}
|
||||
|
||||
it('pre-fills form with existing instance data', async () => {
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
instance={mockInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Name should be pre-filled and disabled
|
||||
const nameInput = screen.getByDisplayValue('existing-instance')
|
||||
expect(nameInput).toBeDisabled()
|
||||
|
||||
// Other fields should be pre-filled (where visible)
|
||||
// Note: Not all fields are easily testable without more complex setup
|
||||
expect(screen.getByText('Edit Instance')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('submits update with existing data when no changes made', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
instance={mockInstance}
|
||||
/>
|
||||
)
|
||||
|
||||
// Submit without changes
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledWith('existing-instance', {
|
||||
model: 'test-model.gguf',
|
||||
gpu_layers: 10,
|
||||
auto_restart: false
|
||||
})
|
||||
})
|
||||
|
||||
it('shows correct button text for running vs stopped instances', async () => {
|
||||
const runningInstance: Instance = { ...mockInstance, running: true }
|
||||
|
||||
const { rerender } = render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
instance={mockInstance} // stopped
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByTestId('modal-save-button')).toBeInTheDocument()
|
||||
|
||||
rerender(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
instance={runningInstance} // running
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByText('Update & Restart Instance')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Auto Restart Configuration', () => {
|
||||
it('shows restart options when auto restart is enabled', async () => {
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Auto restart should be enabled by default
|
||||
const autoRestartCheckbox = screen.getByLabelText(/Auto Restart/)
|
||||
expect(autoRestartCheckbox).toBeChecked()
|
||||
|
||||
// Restart options should be visible
|
||||
expect(screen.getByLabelText(/Max Restarts/)).toBeInTheDocument()
|
||||
expect(screen.getByLabelText(/Restart Delay/)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('hides restart options when auto restart is disabled', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Disable auto restart
|
||||
const autoRestartCheckbox = screen.getByLabelText(/Auto Restart/)
|
||||
await user.click(autoRestartCheckbox)
|
||||
|
||||
// Restart options should be hidden
|
||||
expect(screen.queryByLabelText(/Max Restarts/)).not.toBeInTheDocument()
|
||||
expect(screen.queryByLabelText(/Restart Delay/)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('includes restart options in form submission when enabled', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Fill form
|
||||
await user.type(screen.getByLabelText(/Instance Name/), 'test-instance')
|
||||
|
||||
// Set restart options
|
||||
await user.type(screen.getByLabelText(/Max Restarts/), '5')
|
||||
await user.type(screen.getByLabelText(/Restart Delay/), '10')
|
||||
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledWith('test-instance', {
|
||||
auto_restart: true,
|
||||
max_restarts: 5,
|
||||
restart_delay: 10
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Advanced Fields Toggle', () => {
|
||||
it('shows advanced fields when toggle clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Advanced fields should be hidden initially
|
||||
expect(screen.queryByText(/Advanced Configuration/)).toBeInTheDocument()
|
||||
|
||||
// Click to expand
|
||||
await user.click(screen.getByText(/Advanced Configuration/))
|
||||
|
||||
// Should show more configuration options
|
||||
// Note: Specific fields depend on zodFormUtils configuration
|
||||
// We're testing the toggle behavior, not specific fields
|
||||
})
|
||||
})
|
||||
|
||||
describe('Form Data Handling', () => {
|
||||
it('cleans up undefined values before submission', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
// Fill only required field
|
||||
await user.type(screen.getByLabelText(/Instance Name/), 'clean-instance')
|
||||
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
// Should only include non-empty values
|
||||
expect(mockOnSave).toHaveBeenCalledWith('clean-instance', {
|
||||
auto_restart: true, // Only this default value should be included
|
||||
})
|
||||
})
|
||||
|
||||
it('handles numeric fields correctly', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
await user.type(screen.getByLabelText(/Instance Name/), 'numeric-test')
|
||||
|
||||
// Test GPU layers field (numeric)
|
||||
const gpuLayersInput = screen.getByLabelText(/GPU Layers/)
|
||||
await user.type(gpuLayersInput, '15')
|
||||
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalledWith('numeric-test', {
|
||||
auto_restart: true,
|
||||
gpu_layers: 15, // Should be number, not string
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Modal Controls', () => {
|
||||
it('calls onOpenChange when cancel button clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
await user.click(screen.getByTestId('modal-cancel-button'))
|
||||
|
||||
expect(mockOnOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
|
||||
it('calls onOpenChange after successful save', async () => {
|
||||
const user = userEvent.setup()
|
||||
|
||||
render(
|
||||
<InstanceModal
|
||||
open={true}
|
||||
onOpenChange={mockOnOpenChange}
|
||||
onSave={mockOnSave}
|
||||
/>
|
||||
)
|
||||
|
||||
await user.type(screen.getByLabelText(/Instance Name/), 'test')
|
||||
await user.click(screen.getByTestId('modal-save-button'))
|
||||
|
||||
expect(mockOnSave).toHaveBeenCalled()
|
||||
expect(mockOnOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user