dify/web/app/components/base/prompt-editor/plugins/request-url-block/component.spec.tsx

import type { RefObject } from 'react'
import { render, screen } from '@testing-library/react'
import RequestURLBlockComponent from './component'
import { DELETE_REQUEST_URL_BLOCK_COMMAND } from './index'

const { mockUseSelectOrDelete } = vi.hoisted(() => ({
  mockUseSelectOrDelete: vi.fn(),
}))

vi.mock('../../hooks', () => ({
  useSelectOrDelete: (...args: unknown[]) => mockUseSelectOrDelete(...args),
}))

describe('RequestURLBlockComponent', () => {
  const createHookReturn = (isSelected: boolean): [RefObject<HTMLDivElement | null>, boolean] => {
    return [{ current: null }, isSelected]
  }

  beforeEach(() => {
    vi.clearAllMocks()
  })

  describe('Rendering', () => {
    it('should render request URL title and register select or delete hook with node key', () => {
      mockUseSelectOrDelete.mockReturnValue(createHookReturn(false))

      render(<RequestURLBlockComponent nodeKey="node-1" />)

      expect(mockUseSelectOrDelete).toHaveBeenCalledWith('node-1', DELETE_REQUEST_URL_BLOCK_COMMAND)
      expect(screen.getByText('common.promptEditor.requestURL.item.title')).toBeInTheDocument()
    })

    it('should apply selected border classes when the block is selected', () => {
      mockUseSelectOrDelete.mockReturnValue(createHookReturn(true))

      const { container } = render(<RequestURLBlockComponent nodeKey="node-2" />)
      const wrapper = container.firstElementChild

      expect(wrapper).toHaveClass('!border-[#7839ee]')
      expect(wrapper).toHaveClass('hover:!border-[#7839ee]')
    })

    it('should not apply selected border classes when the block is not selected', () => {
      mockUseSelectOrDelete.mockReturnValue(createHookReturn(false))

      const { container } = render(<RequestURLBlockComponent nodeKey="node-3" />)
      const wrapper = container.firstElementChild

      expect(wrapper).not.toHaveClass('!border-[#7839ee]')
      expect(wrapper).not.toHaveClass('hover:!border-[#7839ee]')
    })
  })
})