dify/web/app/components/app-sidebar/app-info/__tests__/app-info-trigger.spec.tsx

import type { App, AppSSO } from '@/types/app'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { AppModeEnum } from '@/types/app'
import AppInfoTrigger from '../app-info-trigger'

vi.mock('../../../base/app-icon', () => ({
  default: ({
    size,
    icon,
    background,
  }: {
    size: string
    icon: string
    background: string
    iconType?: string
    imageUrl?: string
  }) => <div data-testid="app-icon" data-size={size} data-icon={icon} data-bg={background} />,
}))

const createAppDetail = (overrides: Partial<App> = {}): App & Partial<AppSSO> =>
  ({
    id: 'app-1',
    name: 'Test App',
    mode: AppModeEnum.CHAT,
    icon: '🤖',
    icon_type: 'emoji',
    icon_background: '#FFEAD5',
    icon_url: '',
    description: 'A test app',
    use_icon_as_answer_icon: false,
    ...overrides,
  }) as App & Partial<AppSSO>

describe('AppInfoTrigger', () => {
  it('should render app icon with correct size when expanded', () => {
    render(<AppInfoTrigger appDetail={createAppDetail()} expand onClick={vi.fn()} />)
    const icon = screen.getByTestId('app-icon')
    expect(icon).toHaveAttribute('data-size', 'large')
  })

  it('should render app icon with small size when collapsed', () => {
    render(<AppInfoTrigger appDetail={createAppDetail()} expand={false} onClick={vi.fn()} />)
    const icon = screen.getByTestId('app-icon')
    expect(icon).toHaveAttribute('data-size', 'medium')
  })

  it('should show app name when expanded', () => {
    render(
      <AppInfoTrigger
        appDetail={createAppDetail({ name: 'My Chatbot' })}
        expand
        onClick={vi.fn()}
      />,
    )
    expect(screen.getByText('My Chatbot')).toBeInTheDocument()
  })

  it('should not show app name when collapsed', () => {
    render(
      <AppInfoTrigger
        appDetail={createAppDetail({ name: 'My Chatbot' })}
        expand={false}
        onClick={vi.fn()}
      />,
    )
    expect(screen.queryByText('My Chatbot')).not.toBeInTheDocument()
  })

  it('should show app mode label when expanded', () => {
    render(
      <AppInfoTrigger
        appDetail={createAppDetail({ mode: AppModeEnum.ADVANCED_CHAT })}
        expand
        onClick={vi.fn()}
      />,
    )
    expect(screen.getByText('app.types.advanced')).toBeInTheDocument()
  })

  it('should not show mode label when collapsed', () => {
    render(<AppInfoTrigger appDetail={createAppDetail()} expand={false} onClick={vi.fn()} />)
    expect(screen.queryByText('app.types.chatbot')).not.toBeInTheDocument()
  })

  it('should call onClick when button is clicked', async () => {
    const user = userEvent.setup()
    const onClick = vi.fn()
    render(<AppInfoTrigger appDetail={createAppDetail()} expand onClick={onClick} />)

    await user.click(screen.getByRole('button'))

    expect(onClick).toHaveBeenCalledTimes(1)
  })

  it('should show settings icon in expanded and collapsed states', () => {
    const { container, rerender } = render(
      <AppInfoTrigger appDetail={createAppDetail()} expand onClick={vi.fn()} />,
    )
    expect(container.querySelector('.i-ri-equalizer-2-line')).toBeInTheDocument()

    rerender(<AppInfoTrigger appDetail={createAppDetail()} expand={false} onClick={vi.fn()} />)
    expect(container.querySelector('.i-ri-equalizer-2-line')).not.toBeInTheDocument()
  })

  it('should center the icon wrapper when collapsed', () => {
    render(<AppInfoTrigger appDetail={createAppDetail()} expand={false} onClick={vi.fn()} />)
    const iconWrapper = screen.getByTestId('app-icon').parentElement
    expect(iconWrapper?.parentElement).toHaveClass('items-center')
  })
})