ComfyUI_frontend/tests-ui/tests/components/graph/ZoomControlsModal.spec.ts

import { describe, expect, it, vi } from 'vitest'

// Mock functions
const mockExecute = vi.fn()
const mockGetCommand = vi.fn().mockReturnValue({
  keybinding: {
    combo: {
      getKeySequences: () => ['Ctrl', '+']
    }
  }
})
const mockFormatKeySequence = vi.fn().mockReturnValue('Ctrl+')
const mockSetAppZoom = vi.fn()
const mockSettingGet = vi.fn().mockReturnValue(true)

// Mock dependencies
vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
  useMinimap: () => ({
    containerStyles: { value: { backgroundColor: '#fff', borderRadius: '8px' } }
  })
}))

vi.mock('@/stores/commandStore', () => ({
  useCommandStore: () => ({
    execute: mockExecute,
    getCommand: mockGetCommand,
    formatKeySequence: mockFormatKeySequence
  })
}))

vi.mock('@/stores/graphStore', () => ({
  useCanvasStore: () => ({
    appScalePercentage: 100,
    setAppZoomFromPercentage: mockSetAppZoom
  })
}))

vi.mock('@/stores/settingStore', () => ({
  useSettingStore: () => ({
    get: mockSettingGet
  })
}))

describe('ZoomControlsModal', () => {
  it('should have proper props interface', () => {
    // Test that the component file structure and basic exports work
    expect(mockExecute).toBeDefined()
    expect(mockGetCommand).toBeDefined()
    expect(mockFormatKeySequence).toBeDefined()
    expect(mockSetAppZoom).toBeDefined()
    expect(mockSettingGet).toBeDefined()
  })

  it('should call command store execute when executeCommand is invoked', () => {
    mockExecute.mockClear()

    // Simulate the executeCommand function behavior
    const executeCommand = (command: string) => {
      mockExecute(command)
    }

    executeCommand('Comfy.Canvas.FitView')
    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.FitView')
  })

  it('should validate zoom input ranges correctly', () => {
    mockSetAppZoom.mockClear()

    // Simulate the applyZoom function behavior
    const applyZoom = (val: { value: number }) => {
      const inputValue = val.value as number
      if (isNaN(inputValue) || inputValue < 1 || inputValue > 1000) {
        return
      }
      mockSetAppZoom(inputValue)
    }

    // Test invalid values
    applyZoom({ value: 0 })
    applyZoom({ value: 1010 })
    applyZoom({ value: NaN })
    expect(mockSetAppZoom).not.toHaveBeenCalled()

    // Test valid value
    applyZoom({ value: 50 })
    expect(mockSetAppZoom).toHaveBeenCalledWith(50)
  })

  it('should return correct minimap toggle text based on setting', () => {
    const t = (key: string) => {
      const translations: Record<string, string> = {
        'zoomControls.showMinimap': 'Show Minimap',
        'zoomControls.hideMinimap': 'Hide Minimap'
      }
      return translations[key] || key
    }

    // Simulate the minimapToggleText computed property
    const minimapToggleText = () =>
      mockSettingGet('Comfy.Minimap.Visible')
        ? t('zoomControls.hideMinimap')
        : t('zoomControls.showMinimap')

    // Test when minimap is visible
    mockSettingGet.mockReturnValue(true)
    expect(minimapToggleText()).toBe('Hide Minimap')

    // Test when minimap is hidden
    mockSettingGet.mockReturnValue(false)
    expect(minimapToggleText()).toBe('Show Minimap')
  })

  it('should format keyboard shortcuts correctly', () => {
    mockFormatKeySequence.mockReturnValue('Ctrl+')

    expect(mockFormatKeySequence()).toBe('Ctrl+')
    expect(mockGetCommand).toBeDefined()
  })

  it('should handle repeat command functionality', () => {
    mockExecute.mockClear()
    let interval: number | null = null

    // Simulate the repeat functionality
    const startRepeat = (command: string) => {
      if (interval) return
      const cmd = () => mockExecute(command)
      cmd() // Execute immediately
      interval = 1 // Mock interval ID
    }

    const stopRepeat = () => {
      if (interval) {
        interval = null
      }
    }

    startRepeat('Comfy.Canvas.ZoomIn')
    expect(mockExecute).toHaveBeenCalledWith('Comfy.Canvas.ZoomIn')

    stopRepeat()
    expect(interval).toBeNull()
  })

  it('should have proper filteredMinimapStyles computed property', () => {
    const mockContainerStyles = {
      backgroundColor: '#fff',
      borderRadius: '8px',
      height: '100px',
      width: '200px'
    }

    // Simulate the filteredMinimapStyles computed property
    const filteredMinimapStyles = () => {
      return {
        ...mockContainerStyles,
        height: undefined,
        width: undefined
      }
    }

    const result = filteredMinimapStyles()
    expect(result.backgroundColor).toBe('#fff')
    expect(result.borderRadius).toBe('8px')
    expect(result.height).toBeUndefined()
    expect(result.width).toBeUndefined()
  })
})