ComfyUI_frontend/tests-ui/tests/store/dialogStore.test.ts

import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, expect, it } from 'vitest'
import { defineComponent } from 'vue'

import { useDialogStore } from '@/stores/dialogStore'

const MockComponent = defineComponent({
  name: 'MockComponent',
  template: '<div>Mock</div>'
})

describe('dialogStore', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  describe('priority system', () => {
    it('should create dialogs in correct priority order', () => {
      const store = useDialogStore()

      // Create dialogs with different priorities
      store.showDialog({
        key: 'low-priority',
        component: MockComponent,
        priority: 0
      })

      store.showDialog({
        key: 'high-priority',
        component: MockComponent,
        priority: 10
      })

      store.showDialog({
        key: 'medium-priority',
        component: MockComponent,
        priority: 5
      })

      store.showDialog({
        key: 'no-priority',
        component: MockComponent
      })

      // Check order: high (2) -> medium (1) -> low (0)
      expect(store.dialogStack.map((d) => d.key)).toEqual([
        'high-priority',
        'medium-priority',
        'no-priority',
        'low-priority'
      ])
    })

    it('should maintain priority order when rising dialogs', () => {
      const store = useDialogStore()

      // Create dialogs with different priorities
      store.showDialog({
        key: 'priority-2',
        component: MockComponent,
        priority: 2
      })

      store.showDialog({
        key: 'priority-1',
        component: MockComponent,
        priority: 1
      })

      store.showDialog({
        key: 'priority-0',
        component: MockComponent,
        priority: 0
      })

      // Try to rise the lowest priority dialog
      store.riseDialog({ key: 'priority-0' })

      // Should still be at the bottom because of its priority
      expect(store.dialogStack.map((d) => d.key)).toEqual([
        'priority-2',
        'priority-1',
        'priority-0'
      ])

      // Rise the medium priority dialog
      store.riseDialog({ key: 'priority-1' })

      // Should be above priority-0 but below priority-2
      expect(store.dialogStack.map((d) => d.key)).toEqual([
        'priority-2',
        'priority-1',
        'priority-0'
      ])
    })

    it('should keep high priority dialogs on top when creating new lower priority dialogs', () => {
      const store = useDialogStore()

      // Create a high priority dialog (like manager progress)
      store.showDialog({
        key: 'manager-progress',
        component: MockComponent,
        priority: 10
      })

      store.showDialog({
        key: 'dialog-2',
        component: MockComponent,
        priority: 0
      })

      store.showDialog({
        key: 'dialog-3',
        component: MockComponent
        // Default priority is 1
      })

      // Manager progress should still be on top
      expect(store.dialogStack[0].key).toBe('manager-progress')

      // Check full order
      expect(store.dialogStack.map((d) => d.key)).toEqual([
        'manager-progress', // priority 2
        'dialog-3', // priority 1 (default)
        'dialog-2' // priority 0
      ])
    })
  })

  describe('basic dialog operations', () => {
    it('should show and close dialogs', () => {
      const store = useDialogStore()

      store.showDialog({
        key: 'test-dialog',
        component: MockComponent
      })

      expect(store.dialogStack).toHaveLength(1)
      expect(store.isDialogOpen('test-dialog')).toBe(true)

      store.closeDialog({ key: 'test-dialog' })

      expect(store.dialogStack).toHaveLength(0)
      expect(store.isDialogOpen('test-dialog')).toBe(false)
    })

    it('should reuse existing dialog when showing with same key', () => {
      const store = useDialogStore()

      store.showDialog({
        key: 'reusable-dialog',
        component: MockComponent,
        title: 'Original Title'
      })

      // First call should create the dialog
      expect(store.dialogStack).toHaveLength(1)
      expect(store.dialogStack[0].title).toBe('Original Title')

      // Second call with same key should reuse the dialog
      store.showDialog({
        key: 'reusable-dialog',
        component: MockComponent,
        title: 'New Title' // This should be ignored
      })

      // Should still have only one dialog with original title
      expect(store.dialogStack).toHaveLength(1)
      expect(store.dialogStack[0].key).toBe('reusable-dialog')
      expect(store.dialogStack[0].title).toBe('Original Title')
    })
  })
})