test: improve coverage for some test files (#32916)

Signed-off-by: edvatar <88481784+toroleapinc@users.noreply.github.com>
Signed-off-by: -LAN- <laipz8200@outlook.com>
Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: majiayu000 <1835304752@qq.com>
Co-authored-by: Poojan <poojan@infocusp.com>
Co-authored-by: sahil-infocusp <73810410+sahil-infocusp@users.noreply.github.com>
Co-authored-by: 非法操作 <hjlarry@163.com>
Co-authored-by: Pandaaaa906 <ye.pandaaaa906@gmail.com>
Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
Co-authored-by: heyszt <270985384@qq.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Ijas <ijas.ahmd.ap@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: 木之本澪 <kinomotomiovo@gmail.com>
Co-authored-by: KinomotoMio <200703522+KinomotoMio@users.noreply.github.com>
Co-authored-by: 不做了睡大觉 <64798754+stakeswky@users.noreply.github.com>
Co-authored-by: User <user@example.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: edvatar <88481784+toroleapinc@users.noreply.github.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: Leilei <138381132+Inlei@users.noreply.github.com>
Co-authored-by: HaKu <104669497+haku-ink@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: wangxiaolei <fatelei@gmail.com>
Co-authored-by: Varun Chawla <34209028+veeceey@users.noreply.github.com>
Co-authored-by: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: tda <95275462+tda1017@users.noreply.github.com>
Co-authored-by: root <root@DESKTOP-KQLO90N>
Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
Co-authored-by: Niels Kaspers <153818647+nielskaspers@users.noreply.github.com>
Co-authored-by: hj24 <mambahj24@gmail.com>
Co-authored-by: Tyson Cung <45380903+tysoncung@users.noreply.github.com>
Co-authored-by: Stephen Zhou <hi@hyoban.cc>
Co-authored-by: FFXN <31929997+FFXN@users.noreply.github.com>
Co-authored-by: slegarraga <64795732+slegarraga@users.noreply.github.com>
Co-authored-by: 99 <wh2099@pm.me>
Co-authored-by: Br1an <932039080@qq.com>
Co-authored-by: L1nSn0w <l1nsn0w@qq.com>
Co-authored-by: Yunlu Wen <yunlu.wen@dify.ai>
Co-authored-by: akkoaya <151345394+akkoaya@users.noreply.github.com>
Co-authored-by: 盐粒 Yanli <yanli@dify.ai>
Co-authored-by: lif <1835304752@qq.com>
Co-authored-by: weiguang li <codingpunk@gmail.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: HanWenbo <124024253+hwb96@users.noreply.github.com>
Co-authored-by: Coding On Star <447357187@qq.com>
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: Stable Genius <stablegenius043@gmail.com>
Co-authored-by: Stable Genius <259448942+stablegenius49@users.noreply.github.com>
Co-authored-by: ふるい <46769295+Echo0ff@users.noreply.github.com>
Co-authored-by: Xiyuan Chen <52963600+GareArc@users.noreply.github.com>

web/app/components/base/prompt-editor/plugins/draggable-plugin/__tests__/index.spec.tsx

@@ -1,112 +1,251 @@
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { ContentEditable } from '@lexical/react/LexicalContentEditable'
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import type { LexicalEditor } from 'lexical'
+import type { JSX, RefObject } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { act, render, screen } from '@testing-library/react'
 import DraggableBlockPlugin from '..'
 
-const CONTENT_EDITABLE_TEST_ID = 'draggable-content-editable'
-let namespaceCounter = 0
-
-function renderWithEditor(anchorElem?: HTMLElement) {
-  render(
-    <LexicalComposer
-      initialConfig={{
-        namespace: `draggable-plugin-test-${namespaceCounter++}`,
-        onError: (error: Error) => { throw error },
-      }}
-    >
-      <RichTextPlugin
-        contentEditable={<ContentEditable data-testid={CONTENT_EDITABLE_TEST_ID} />}
-        placeholder={null}
-        ErrorBoundary={LexicalErrorBoundary}
-      />
-      <DraggableBlockPlugin anchorElem={anchorElem} />
-    </LexicalComposer>,
-  )
-
-  return screen.getByTestId(CONTENT_EDITABLE_TEST_ID)
+type DraggableExperimentalProps = {
+  anchorElem: HTMLElement
+  menuRef: RefObject<HTMLDivElement>
+  targetLineRef: RefObject<HTMLDivElement>
+  menuComponent: JSX.Element | null
+  targetLineComponent: JSX.Element
+  isOnMenu: (element: HTMLElement) => boolean
+  onElementChanged: (element: HTMLElement | null) => void
 }
 
-function appendChildToRoot(rootElement: HTMLElement, className = '') {
-  const element = document.createElement('div')
-  element.className = className
-  rootElement.appendChild(element)
-  return element
+type MouseMoveHandler = (event: MouseEvent) => void
+
+const { draggableMockState } = vi.hoisted(() => ({
+  draggableMockState: {
+    latestProps: null as DraggableExperimentalProps | null,
+  },
+}))
+
+vi.mock('@lexical/react/LexicalComposerContext')
+vi.mock('@lexical/react/LexicalDraggableBlockPlugin', () => ({
+  DraggableBlockPlugin_EXPERIMENTAL: (props: DraggableExperimentalProps) => {
+    draggableMockState.latestProps = props
+    return (
+      <div data-testid="draggable-plugin-experimental-mock">
+        {props.menuComponent}
+        {props.targetLineComponent}
+      </div>
+    )
+  },
+}))
+
+function createRootElementMock() {
+  let mouseMoveHandler: MouseMoveHandler | null = null
+  const addEventListener = vi.fn((eventName: string, handler: EventListenerOrEventListenerObject) => {
+    if (eventName === 'mousemove' && typeof handler === 'function')
+      mouseMoveHandler = handler as MouseMoveHandler
+  })
+  const removeEventListener = vi.fn()
+
+  return {
+    rootElement: {
+      addEventListener,
+      removeEventListener,
+    } as unknown as HTMLElement,
+    addEventListener,
+    removeEventListener,
+    getMouseMoveHandler: () => mouseMoveHandler,
+  }
+}
+
+function getRegisteredMouseMoveHandler(
+  rootMock: ReturnType<typeof createRootElementMock>,
+): MouseMoveHandler {
+  const handler = rootMock.getMouseMoveHandler()
+  if (!handler)
+    throw new Error('Expected mousemove handler to be registered')
+  return handler
+}
+
+function setupEditorRoot(rootElement: HTMLElement | null) {
+  const editor = {
+    getRootElement: vi.fn(() => rootElement),
+  } as unknown as LexicalEditor
+
+  vi.mocked(useLexicalComposerContext).mockReturnValue([
+    editor,
+    {},
+  ] as unknown as ReturnType<typeof useLexicalComposerContext>)
+
+  return editor
 }
 
 describe('DraggableBlockPlugin', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    draggableMockState.latestProps = null
   })
 
   describe('Rendering', () => {
     it('should use body as default anchor and render target line', () => {
-      renderWithEditor()
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
 
-      const targetLine = screen.getByTestId('draggable-target-line')
-      expect(targetLine).toBeInTheDocument()
-      expect(document.body.contains(targetLine)).toBe(true)
+      render(<DraggableBlockPlugin />)
+
+      expect(draggableMockState.latestProps?.anchorElem).toBe(document.body)
+      expect(screen.getByTestId('draggable-target-line')).toBeInTheDocument()
       expect(screen.queryByTestId('draggable-menu')).not.toBeInTheDocument()
     })
 
-    it('should render inside custom anchor element when provided', () => {
-      const customAnchor = document.createElement('div')
-      document.body.appendChild(customAnchor)
+    it('should render with custom anchor when provided', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      const anchorElem = document.createElement('div')
 
-      renderWithEditor(customAnchor)
+      render(<DraggableBlockPlugin anchorElem={anchorElem} />)
 
-      const targetLine = screen.getByTestId('draggable-target-line')
-      expect(customAnchor.contains(targetLine)).toBe(true)
+      expect(draggableMockState.latestProps?.anchorElem).toBe(anchorElem)
+      expect(screen.getByTestId('draggable-target-line')).toBeInTheDocument()
+    })
 
-      customAnchor.remove()
+    it('should return early when editor root element is null', () => {
+      const editor = setupEditorRoot(null)
+
+      render(<DraggableBlockPlugin />)
+
+      expect(editor.getRootElement).toHaveBeenCalledTimes(1)
+      expect(screen.getByTestId('draggable-target-line')).toBeInTheDocument()
+      expect(screen.queryByTestId('draggable-menu')).not.toBeInTheDocument()
     })
   })
 
-  describe('Drag Support Detection', () => {
-    it('should render drag menu when mouse moves over a support-drag element', async () => {
-      const rootElement = renderWithEditor()
-      const supportDragTarget = appendChildToRoot(rootElement, 'support-drag')
+  describe('Drag support detection', () => {
+    it('should show menu when target has support-drag class', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
+
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const target = document.createElement('div')
+      target.className = 'support-drag'
+
+      act(() => {
+        onMove({ target } as unknown as MouseEvent)
+      })
+
+      expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+    })
+
+    it('should show menu when target contains a support-drag descendant', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
+
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const target = document.createElement('div')
+      target.appendChild(Object.assign(document.createElement('span'), { className: 'support-drag' }))
+
+      act(() => {
+        onMove({ target } as unknown as MouseEvent)
+      })
+
+      expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+    })
+
+    it('should show menu when target is inside a support-drag ancestor', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
+
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const ancestor = document.createElement('div')
+      ancestor.className = 'support-drag'
+      const child = document.createElement('span')
+      ancestor.appendChild(child)
+
+      act(() => {
+        onMove({ target: child } as unknown as MouseEvent)
+      })
+
+      expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+    })
+
+    it('should hide menu when target does not support drag', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
+
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const supportDragTarget = document.createElement('div')
+      supportDragTarget.className = 'support-drag'
+
+      act(() => {
+        onMove({ target: supportDragTarget } as unknown as MouseEvent)
+      })
+      expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+
+      const plainTarget = document.createElement('div')
+      act(() => {
+        onMove({ target: plainTarget } as unknown as MouseEvent)
+      })
 
       expect(screen.queryByTestId('draggable-menu')).not.toBeInTheDocument()
-      fireEvent.mouseMove(supportDragTarget)
-
-      await waitFor(() => {
-        expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
-      })
     })
 
-    it('should hide drag menu when support-drag target is removed and mouse moves again', async () => {
-      const rootElement = renderWithEditor()
-      const supportDragTarget = appendChildToRoot(rootElement, 'support-drag')
+    it('should keep menu hidden when event target becomes null', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
 
-      fireEvent.mouseMove(supportDragTarget)
-      await waitFor(() => {
-        expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const supportDragTarget = document.createElement('div')
+      supportDragTarget.className = 'support-drag'
+      act(() => {
+        onMove({ target: supportDragTarget } as unknown as MouseEvent)
+      })
+      expect(screen.getByTestId('draggable-menu')).toBeInTheDocument()
+      act(() => {
+        onMove({ target: null } as unknown as MouseEvent)
       })
 
-      supportDragTarget.remove()
-      fireEvent.mouseMove(rootElement)
-      await waitFor(() => {
-        expect(screen.queryByTestId('draggable-menu')).not.toBeInTheDocument()
-      })
+      expect(screen.queryByTestId('draggable-menu')).not.toBeInTheDocument()
     })
   })
 
-  describe('Menu Detection Contract', () => {
-    it('should render menu with draggable-block-menu class and keep non-menu elements outside it', async () => {
-      const rootElement = renderWithEditor()
-      const supportDragTarget = appendChildToRoot(rootElement, 'support-drag')
+  describe('Forwarded callbacks', () => {
+    it('should forward isOnMenu and detect menu membership correctly', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      render(<DraggableBlockPlugin />)
 
-      fireEvent.mouseMove(supportDragTarget)
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      const supportDragTarget = document.createElement('div')
+      supportDragTarget.className = 'support-drag'
+      act(() => {
+        onMove({ target: supportDragTarget } as unknown as MouseEvent)
+      })
 
-      const menuIcon = await screen.findByTestId('draggable-menu-icon')
-      expect(menuIcon.closest('.draggable-block-menu')).not.toBeNull()
+      const renderedMenu = screen.getByTestId('draggable-menu')
+      const isOnMenu = draggableMockState.latestProps?.isOnMenu
+      if (!isOnMenu)
+        throw new Error('Expected isOnMenu callback')
 
-      const normalElement = document.createElement('div')
-      document.body.appendChild(normalElement)
-      expect(normalElement.closest('.draggable-block-menu')).toBeNull()
-      normalElement.remove()
+      const menuIcon = screen.getByTestId('draggable-menu-icon')
+      const outsideElement = document.createElement('div')
+
+      expect(isOnMenu(menuIcon)).toBe(true)
+      expect(isOnMenu(renderedMenu)).toBe(true)
+      expect(isOnMenu(outsideElement)).toBe(false)
+    })
+
+    it('should register and cleanup mousemove listener on mount and unmount', () => {
+      const rootMock = createRootElementMock()
+      setupEditorRoot(rootMock.rootElement)
+      const { unmount } = render(<DraggableBlockPlugin />)
+
+      const onMove = getRegisteredMouseMoveHandler(rootMock)
+      expect(rootMock.addEventListener).toHaveBeenCalledWith('mousemove', expect.any(Function))
+
+      unmount()
+
+      expect(rootMock.removeEventListener).toHaveBeenCalledWith('mousemove', onMove)
     })
   })
 })