expo-popcore-app/components/blocks/ui/FavoriteButton.test.tsx

import React from 'react'
import { FavoriteButton } from './FavoriteButton'

describe('FavoriteButton Component', () => {
  describe('Component Export', () => {
    it('should be defined', () => {
      expect(FavoriteButton).toBeDefined()
    })

    it('should be wrapped with React.memo', () => {
      expect(typeof FavoriteButton).toBe('object')
    })
  })

  describe('Props Interface', () => {
    it('should accept favorited prop', () => {
      const props = { favorited: true }
      expect(props.favorited).toBe(true)
    })

    it('should accept loading prop', () => {
      const props = { loading: true }
      expect(props.loading).toBe(true)
    })

    it('should accept count prop', () => {
      const props = { count: 100 }
      expect(props.count).toBe(100)
    })

    it('should accept size prop', () => {
      const props = { size: 24 }
      expect(props.size).toBe(24)
    })

    it('should accept onPress callback', () => {
      const onPress = () => {}
      expect(typeof onPress).toBe('function')
    })

    it('should accept testID prop', () => {
      const props = { testID: 'favorite-button' }
      expect(props.testID).toBe('favorite-button')
    })
  })

  describe('Default Values', () => {
    it('should have default favorited value of false', () => {
      const defaultFavorited = false
      expect(defaultFavorited).toBe(false)
    })

    it('should have default loading value of false', () => {
      const defaultLoading = false
      expect(defaultLoading).toBe(false)
    })

    it('should have default size value of 24', () => {
      const defaultSize = 24
      expect(defaultSize).toBe(24)
    })
  })

  describe('Favorited State Logic', () => {
    it('should use star icon when favorited is true', () => {
      const favorited = true
      const iconName = favorited ? 'star' : 'star-outline'
      expect(iconName).toBe('star')
    })

    it('should use star-outline icon when favorited is false', () => {
      const favorited = false
      const iconName = favorited ? 'star' : 'star-outline'
      expect(iconName).toBe('star-outline')
    })

    it('should use gold color (#FFD700) when favorited is true', () => {
      const favorited = true
      const iconColor = favorited ? '#FFD700' : '#8E8E93'
      expect(iconColor).toBe('#FFD700')
    })

    it('should use gray color (#8E8E93) when favorited is false', () => {
      const favorited = false
      const iconColor = favorited ? '#FFD700' : '#8E8E93'
      expect(iconColor).toBe('#8E8E93')
    })
  })

  describe('Loading State Logic', () => {
    it('should disable press when loading is true', () => {
      const loading = true
      const shouldDisable = loading
      expect(shouldDisable).toBe(true)
    })

    it('should enable press when loading is false', () => {
      const loading = false
      const shouldDisable = loading
      expect(shouldDisable).toBe(false)
    })
  })

  describe('Count Display Logic', () => {
    it('should show count when count is provided', () => {
      const count = 42
      const shouldShow = count !== undefined
      expect(shouldShow).toBe(true)
    })

    it('should not show count when count is undefined', () => {
      const count = undefined
      const shouldShow = count !== undefined
      expect(shouldShow).toBe(false)
    })

    it('should display zero count', () => {
      const count = 0
      const shouldShow = count !== undefined
      expect(shouldShow).toBe(true)
    })

    it('should calculate font size based on button size', () => {
      const size = 24
      const countFontSize = size * 0.7
      expect(countFontSize).toBeCloseTo(16.8, 1)
    })
  })

  describe('Size Variations', () => {
    it('should support small size (16)', () => {
      const size = 16
      expect(size).toBe(16)
    })

    it('should support default size (24)', () => {
      const size = 24
      expect(size).toBe(24)
    })

    it('should support large size (32)', () => {
      const size = 32
      expect(size).toBe(32)
    })

    it('should support extra large size (48)', () => {
      const size = 48
      expect(size).toBe(48)
    })
  })

  describe('Callback Logic', () => {
    it('should call onPress when not loading', () => {
      const loading = false
      const onPress = jest.fn()
      const canCall = !loading && typeof onPress === 'function'
      expect(canCall).toBe(true)
    })

    it('should not call onPress when loading', () => {
      const loading = true
      const onPress = jest.fn()
      const canCall = !loading && typeof onPress === 'function'
      expect(canCall).toBe(false)
    })
  })

  describe('Component Composition', () => {
    it('should use Pressable as container', () => {
      const containerType = 'Pressable'
      expect(containerType).toBe('Pressable')
    })

    it('should use Ionicons for star icon', () => {
      const iconType = 'Ionicons'
      expect(iconType).toBe('Ionicons')
    })

    it('should use View for content layout', () => {
      const layoutType = 'View'
      expect(layoutType).toBe('View')
    })

    it('should use Text for count display', () => {
      const textType = 'Text'
      expect(textType).toBe('Text')
    })
  })

  describe('Style Logic', () => {
    it('should apply disabled style when loading', () => {
      const loading = true
      const disabledStyle = loading ? { opacity: 0.5 } : {}
      expect(disabledStyle).toEqual({ opacity: 0.5 })
    })

    it('should not apply disabled style when not loading', () => {
      const loading = false
      const disabledStyle = loading ? { opacity: 0.5 } : {}
      expect(disabledStyle).toEqual({})
    })

    it('should use flex row for container direction', () => {
      const flexDirection = 'row'
      expect(flexDirection).toBe('row')
    })

    it('should align items center', () => {
      const alignItems = 'center'
      expect(alignItems).toBe('center')
    })
  })

  describe('Edge Cases', () => {
    it('should handle undefined onPress gracefully', () => {
      const onPress = undefined
      const hasOnPress = typeof onPress === 'function'
      expect(hasOnPress).toBe(false)
    })

    it('should handle undefined testID', () => {
      const testID = undefined
      expect(testID).toBeUndefined()
    })

    it('should handle negative count', () => {
      const count = -1
      const shouldShow = count !== undefined
      expect(shouldShow).toBe(true)
    })

    it('should handle very large count', () => {
      const count = 999999
      expect(count).toBe(999999)
    })

    it('should handle size of 0', () => {
      const size = 0
      expect(size).toBe(0)
    })
  })
})