ComfyUI_frontend/tests-ui/tests/composables/useConflictAcknowledgment.test.ts

import { createPinia, setActivePinia } from 'pinia'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'

import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'

describe('useConflictAcknowledgment', () => {
  beforeEach(() => {
    // Set up Pinia for each test
    setActivePinia(createPinia())
    // Clear localStorage before each test
    localStorage.clear()
    // Reset modules to ensure fresh state
    vi.resetModules()
  })

  afterEach(() => {
    localStorage.clear()
  })

  describe('initial state loading', () => {
    it('should load empty state when localStorage is empty', () => {
      const { acknowledgmentState } = useConflictAcknowledgment()

      expect(acknowledgmentState.value).toEqual({
        modal_dismissed: false,
        red_dot_dismissed: false,
        warning_banner_dismissed: false
      })
    })

    it('should load existing state from localStorage', () => {
      // Pre-populate localStorage
      localStorage.setItem('Comfy.ConflictModalDismissed', 'true')
      localStorage.setItem('Comfy.ConflictRedDotDismissed', 'true')
      localStorage.setItem('Comfy.ConflictWarningBannerDismissed', 'true')

      const { acknowledgmentState } = useConflictAcknowledgment()

      expect(acknowledgmentState.value).toEqual({
        modal_dismissed: true,
        red_dot_dismissed: true,
        warning_banner_dismissed: true
      })
    })
  })

  describe('dismissal functions', () => {
    it('should mark conflicts as seen with unified function', () => {
      const { markConflictsAsSeen, acknowledgmentState } =
        useConflictAcknowledgment()

      markConflictsAsSeen()

      expect(acknowledgmentState.value.modal_dismissed).toBe(true)
    })

    it('should dismiss red dot notification', () => {
      const { dismissRedDotNotification, acknowledgmentState } =
        useConflictAcknowledgment()

      dismissRedDotNotification()

      expect(acknowledgmentState.value.red_dot_dismissed).toBe(true)
    })

    it('should dismiss warning banner', () => {
      const { dismissWarningBanner, acknowledgmentState } =
        useConflictAcknowledgment()

      dismissWarningBanner()

      expect(acknowledgmentState.value.warning_banner_dismissed).toBe(true)
    })

    it('should mark all conflicts as seen', () => {
      const { markConflictsAsSeen, acknowledgmentState } =
        useConflictAcknowledgment()

      markConflictsAsSeen()

      expect(acknowledgmentState.value.modal_dismissed).toBe(true)
      expect(acknowledgmentState.value.red_dot_dismissed).toBe(true)
      expect(acknowledgmentState.value.warning_banner_dismissed).toBe(true)
    })
  })

  describe('computed properties', () => {
    it('should calculate shouldShowConflictModal correctly', () => {
      const { shouldShowConflictModal, markConflictsAsSeen } =
        useConflictAcknowledgment()

      expect(shouldShowConflictModal.value).toBe(true)

      markConflictsAsSeen()
      expect(shouldShowConflictModal.value).toBe(false)
    })

    it('should calculate shouldShowRedDot correctly based on conflicts', () => {
      const { shouldShowRedDot, dismissRedDotNotification } =
        useConflictAcknowledgment()

      // Initially false because no conflicts exist
      expect(shouldShowRedDot.value).toBe(false)

      dismissRedDotNotification()
      expect(shouldShowRedDot.value).toBe(false)
    })

    it('should calculate shouldShowManagerBanner correctly', () => {
      const { shouldShowManagerBanner, dismissWarningBanner } =
        useConflictAcknowledgment()

      // Initially false because no conflicts exist
      expect(shouldShowManagerBanner.value).toBe(false)

      dismissWarningBanner()
      expect(shouldShowManagerBanner.value).toBe(false)
    })
  })

  describe('localStorage persistence', () => {
    it('should persist to localStorage automatically', () => {
      const { markConflictsAsSeen, dismissWarningBanner } =
        useConflictAcknowledgment()

      markConflictsAsSeen()
      dismissWarningBanner()

      // VueUse useStorage should automatically persist to localStorage
      expect(
        localStorage.getItem('Comfy.ConflictModalDismissed')
      ).not.toBeNull()
      expect(
        localStorage.getItem('Comfy.ConflictWarningBannerDismissed')
      ).not.toBeNull()
    })
  })
})