test(workflow): add unit tests for workflow components (#33741)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/workflow/note-node/note-editor/__tests__/context.spec.tsx

@@ -0,0 +1,138 @@
+import type { LexicalEditor } from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { render, screen, waitFor } from '@testing-library/react'
+import { $getRoot } from 'lexical'
+import { useEffect } from 'react'
+import { NoteEditorContextProvider } from '../context'
+import { useStore } from '../store'
+
+const emptyValue = JSON.stringify({ root: { children: [] } })
+const populatedValue = JSON.stringify({
+  root: {
+    children: [
+      {
+        children: [
+          {
+            detail: 0,
+            format: 0,
+            mode: 'normal',
+            style: '',
+            text: 'hello',
+            type: 'text',
+            version: 1,
+          },
+        ],
+        direction: null,
+        format: '',
+        indent: 0,
+        textFormat: 0,
+        textStyle: '',
+        type: 'paragraph',
+        version: 1,
+      },
+    ],
+    direction: null,
+    format: '',
+    indent: 0,
+    type: 'root',
+    version: 1,
+  },
+})
+
+const readEditorText = (editor: LexicalEditor) => {
+  let text = ''
+
+  editor.getEditorState().read(() => {
+    text = $getRoot().getTextContent()
+  })
+
+  return text
+}
+
+const ContextProbe = ({
+  onReady,
+}: {
+  onReady?: (editor: LexicalEditor) => void
+}) => {
+  const [editor] = useLexicalComposerContext()
+  const selectedIsBold = useStore(state => state.selectedIsBold)
+
+  useEffect(() => {
+    onReady?.(editor)
+  }, [editor, onReady])
+
+  return <div>{selectedIsBold ? 'bold' : 'not-bold'}</div>
+}
+
+describe('NoteEditorContextProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Provider should expose the store and render the wrapped editor tree.
+  describe('Rendering', () => {
+    it('should render children with the note editor store defaults', async () => {
+      let editor: LexicalEditor | null = null
+
+      render(
+        <NoteEditorContextProvider value={emptyValue}>
+          <ContextProbe onReady={instance => (editor = instance)} />
+        </NoteEditorContextProvider>,
+      )
+
+      expect(screen.getByText('not-bold')).toBeInTheDocument()
+
+      await waitFor(() => {
+        expect(editor).not.toBeNull()
+      })
+
+      expect(editor!.isEditable()).toBe(true)
+      expect(readEditorText(editor!)).toBe('')
+    })
+  })
+
+  // Invalid or empty editor state should fall back to an empty lexical state.
+  describe('Editor State Initialization', () => {
+    it.each([
+      {
+        name: 'value is malformed json',
+        value: '{invalid',
+      },
+      {
+        name: 'root has no children',
+        value: emptyValue,
+      },
+    ])('should use an empty editor state when $name', async ({ value }) => {
+      let editor: LexicalEditor | null = null
+
+      render(
+        <NoteEditorContextProvider value={value}>
+          <ContextProbe onReady={instance => (editor = instance)} />
+        </NoteEditorContextProvider>,
+      )
+
+      await waitFor(() => {
+        expect(editor).not.toBeNull()
+      })
+
+      expect(readEditorText(editor!)).toBe('')
+    })
+
+    it('should restore lexical content and forward editable prop', async () => {
+      let editor: LexicalEditor | null = null
+
+      render(
+        <NoteEditorContextProvider value={populatedValue} editable={false}>
+          <ContextProbe onReady={instance => (editor = instance)} />
+        </NoteEditorContextProvider>,
+      )
+
+      await waitFor(() => {
+        expect(editor).not.toBeNull()
+        expect(readEditorText(editor!)).toBe('hello')
+      })
+
+      expect(editor!.isEditable()).toBe(false)
+    })
+  })
+})

web/app/components/workflow/note-node/note-editor/__tests__/editor.spec.tsx

@@ -0,0 +1,120 @@
+import type { EditorState, LexicalEditor } from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { $createParagraphNode, $createTextNode, $getRoot } from 'lexical'
+import { useEffect } from 'react'
+import { NoteEditorContextProvider } from '../context'
+import Editor from '../editor'
+
+const emptyValue = JSON.stringify({ root: { children: [] } })
+
+const EditorProbe = ({
+  onReady,
+}: {
+  onReady?: (editor: LexicalEditor) => void
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    onReady?.(editor)
+  }, [editor, onReady])
+
+  return null
+}
+
+const renderEditor = (
+  props: Partial<React.ComponentProps<typeof Editor>> = {},
+  onEditorReady?: (editor: LexicalEditor) => void,
+) => {
+  return render(
+    <NoteEditorContextProvider value={emptyValue}>
+      <>
+        <Editor
+          containerElement={document.createElement('div')}
+          {...props}
+        />
+        <EditorProbe onReady={onEditorReady} />
+      </>
+    </NoteEditorContextProvider>,
+  )
+}
+
+describe('Editor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Editor should render the lexical surface with the provided placeholder.
+  describe('Rendering', () => {
+    it('should render the placeholder text and content editable surface', () => {
+      renderEditor({ placeholder: 'Type note' })
+
+      expect(screen.getByText('Type note')).toBeInTheDocument()
+      expect(screen.getByRole('textbox')).toBeInTheDocument()
+    })
+  })
+
+  // Focus and blur should toggle workflow shortcuts while editing content.
+  describe('Focus Management', () => {
+    it('should disable shortcuts on focus and re-enable them on blur', () => {
+      const setShortcutsEnabled = vi.fn()
+
+      renderEditor({ setShortcutsEnabled })
+
+      const contentEditable = screen.getByRole('textbox')
+
+      fireEvent.focus(contentEditable)
+      fireEvent.blur(contentEditable)
+
+      expect(setShortcutsEnabled).toHaveBeenNthCalledWith(1, false)
+      expect(setShortcutsEnabled).toHaveBeenNthCalledWith(2, true)
+    })
+  })
+
+  // Lexical change events should be forwarded to the external onChange callback.
+  describe('Change Handling', () => {
+    it('should pass editor updates through onChange', async () => {
+      const changes: string[] = []
+      let editor: LexicalEditor | null = null
+      const handleChange = (editorState: EditorState) => {
+        editorState.read(() => {
+          changes.push($getRoot().getTextContent())
+        })
+      }
+
+      renderEditor({ onChange: handleChange }, instance => (editor = instance))
+
+      await waitFor(() => {
+        expect(editor).not.toBeNull()
+      })
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 0))
+      })
+
+      act(() => {
+        editor!.update(() => {
+          const root = $getRoot()
+          root.clear()
+          const paragraph = $createParagraphNode()
+          paragraph.append($createTextNode('hello'))
+          root.append(paragraph)
+        }, { discrete: true })
+      })
+
+      act(() => {
+        editor!.update(() => {
+          const root = $getRoot()
+          root.clear()
+          const paragraph = $createParagraphNode()
+          paragraph.append($createTextNode('hello world'))
+          root.append(paragraph)
+        }, { discrete: true })
+      })
+
+      await waitFor(() => {
+        expect(changes).toContain('hello world')
+      })
+    })
+  })
+})

web/app/components/workflow/note-node/note-editor/plugins/format-detector-plugin/__tests__/index.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react'
+import { NoteEditorContextProvider } from '../../../context'
+import FormatDetectorPlugin from '../index'
+
+const emptyValue = JSON.stringify({ root: { children: [] } })
+
+describe('FormatDetectorPlugin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // The plugin should register its observers without rendering extra UI.
+  describe('Rendering', () => {
+    it('should mount inside the real note editor context without visible output', () => {
+      const { container } = render(
+        <NoteEditorContextProvider value={emptyValue}>
+          <FormatDetectorPlugin />
+        </NoteEditorContextProvider>,
+      )
+
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
+})

web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/__tests__/index.spec.tsx

@@ -0,0 +1,71 @@
+import type { createNoteEditorStore } from '../../../store'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import { useEffect } from 'react'
+import { NoteEditorContextProvider } from '../../../context'
+import { useNoteEditorStore } from '../../../store'
+import LinkEditorPlugin from '../index'
+
+type NoteEditorStore = ReturnType<typeof createNoteEditorStore>
+
+const emptyValue = JSON.stringify({ root: { children: [] } })
+
+const StoreProbe = ({
+  onReady,
+}: {
+  onReady?: (store: NoteEditorStore) => void
+}) => {
+  const store = useNoteEditorStore()
+
+  useEffect(() => {
+    onReady?.(store)
+  }, [onReady, store])
+
+  return null
+}
+
+describe('LinkEditorPlugin', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  // Without an anchor element the plugin should stay hidden.
+  describe('Visibility', () => {
+    it('should render nothing when no link anchor is selected', () => {
+      const { container } = render(
+        <NoteEditorContextProvider value={emptyValue}>
+          <LinkEditorPlugin containerElement={null} />
+        </NoteEditorContextProvider>,
+      )
+
+      expect(container).toBeEmptyDOMElement()
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    })
+
+    it('should render the link editor when the store has an anchor element', async () => {
+      let store: NoteEditorStore | null = null
+
+      render(
+        <NoteEditorContextProvider value={emptyValue}>
+          <StoreProbe onReady={instance => (store = instance)} />
+          <LinkEditorPlugin containerElement={document.createElement('div')} />
+        </NoteEditorContextProvider>,
+      )
+
+      await waitFor(() => {
+        expect(store).not.toBeNull()
+      })
+
+      act(() => {
+        store!.setState({
+          linkAnchorElement: document.createElement('a'),
+          linkOperatorShow: false,
+          selectedLinkUrl: 'https://example.com',
+        })
+      })
+
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('https://example.com')).toBeInTheDocument()
+      })
+    })
+  })
+})

web/app/components/workflow/note-node/note-editor/toolbar/__tests__/color-picker.spec.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import { NoteTheme } from '../../../types'
+import ColorPicker, { COLOR_LIST } from '../color-picker'
+
+describe('NoteEditor ColorPicker', () => {
+  it('should open the palette and apply the selected theme', async () => {
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <ColorPicker theme={NoteTheme.blue} onThemeChange={onThemeChange} />,
+    )
+
+    const trigger = container.querySelector('[data-state="closed"]') as HTMLElement
+
+    fireEvent.click(trigger)
+
+    const popup = document.body.querySelector('[role="tooltip"]')
+
+    expect(popup).toBeInTheDocument()
+
+    const options = popup?.querySelectorAll('.group.relative')
+
+    expect(options).toHaveLength(COLOR_LIST.length)
+
+    fireEvent.click(options?.[COLOR_LIST.length - 1] as Element)
+
+    expect(onThemeChange).toHaveBeenCalledWith(NoteTheme.violet)
+
+    await waitFor(() => {
+      expect(document.body.querySelector('[role="tooltip"]')).not.toBeInTheDocument()
+    })
+  })
+})

web/app/components/workflow/note-node/note-editor/toolbar/__tests__/command.spec.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render } from '@testing-library/react'
+import Command from '../command'
+
+const { mockHandleCommand } = vi.hoisted(() => ({
+  mockHandleCommand: vi.fn(),
+}))
+
+let mockSelectedState = {
+  selectedIsBold: false,
+  selectedIsItalic: false,
+  selectedIsStrikeThrough: false,
+  selectedIsLink: false,
+  selectedIsBullet: false,
+}
+
+vi.mock('../../store', () => ({
+  useStore: (selector: (state: typeof mockSelectedState) => unknown) => selector(mockSelectedState),
+}))
+
+vi.mock('../hooks', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../hooks')>()
+  return {
+    ...actual,
+    useCommand: () => ({
+      handleCommand: mockHandleCommand,
+    }),
+  }
+})
+
+describe('NoteEditor Command', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockSelectedState = {
+      selectedIsBold: false,
+      selectedIsItalic: false,
+      selectedIsStrikeThrough: false,
+      selectedIsLink: false,
+      selectedIsBullet: false,
+    }
+  })
+
+  it('should highlight the active command and dispatch it on click', () => {
+    mockSelectedState.selectedIsBold = true
+    const { container } = render(<Command type="bold" />)
+
+    const trigger = container.querySelector('.cursor-pointer') as HTMLElement
+
+    expect(trigger).toHaveClass('bg-state-accent-active')
+
+    fireEvent.click(trigger)
+
+    expect(mockHandleCommand).toHaveBeenCalledWith('bold')
+  })
+
+  it('should keep inactive commands unhighlighted', () => {
+    const { container } = render(<Command type="link" />)
+
+    const trigger = container.querySelector('.cursor-pointer') as HTMLElement
+
+    expect(trigger).not.toHaveClass('bg-state-accent-active')
+  })
+})

web/app/components/workflow/note-node/note-editor/toolbar/__tests__/font-size-selector.spec.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import FontSizeSelector from '../font-size-selector'
+
+const {
+  mockHandleFontSize,
+  mockHandleOpenFontSizeSelector,
+} = vi.hoisted(() => ({
+  mockHandleFontSize: vi.fn(),
+  mockHandleOpenFontSizeSelector: vi.fn(),
+}))
+
+let mockFontSizeSelectorShow = false
+let mockFontSize = '12px'
+
+vi.mock('../hooks', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../hooks')>()
+  return {
+    ...actual,
+    useFontSize: () => ({
+      fontSize: mockFontSize,
+      fontSizeSelectorShow: mockFontSizeSelectorShow,
+      handleFontSize: mockHandleFontSize,
+      handleOpenFontSizeSelector: mockHandleOpenFontSizeSelector,
+    }),
+  }
+})
+
+describe('NoteEditor FontSizeSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFontSizeSelectorShow = false
+    mockFontSize = '12px'
+  })
+
+  it('should show the current font size label and request opening when clicked', () => {
+    render(<FontSizeSelector />)
+
+    fireEvent.click(screen.getByText('workflow.nodes.note.editor.small'))
+
+    expect(mockHandleOpenFontSizeSelector).toHaveBeenCalledWith(true)
+  })
+
+  it('should select a new font size and close the popup', () => {
+    mockFontSizeSelectorShow = true
+    mockFontSize = '14px'
+
+    render(<FontSizeSelector />)
+
+    fireEvent.click(screen.getByText('workflow.nodes.note.editor.large'))
+
+    expect(screen.getAllByText('workflow.nodes.note.editor.medium').length).toBeGreaterThan(0)
+    expect(mockHandleFontSize).toHaveBeenCalledWith('16px')
+    expect(mockHandleOpenFontSizeSelector).toHaveBeenCalledWith(false)
+  })
+})

web/app/components/workflow/note-node/note-editor/toolbar/__tests__/index.spec.tsx

@@ -0,0 +1,101 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { NoteTheme } from '../../../types'
+import Toolbar from '../index'
+
+const {
+  mockHandleCommand,
+  mockHandleFontSize,
+  mockHandleOpenFontSizeSelector,
+} = vi.hoisted(() => ({
+  mockHandleCommand: vi.fn(),
+  mockHandleFontSize: vi.fn(),
+  mockHandleOpenFontSizeSelector: vi.fn(),
+}))
+
+let mockFontSizeSelectorShow = false
+let mockFontSize = '14px'
+let mockSelectedState = {
+  selectedIsBold: false,
+  selectedIsItalic: false,
+  selectedIsStrikeThrough: false,
+  selectedIsLink: false,
+  selectedIsBullet: false,
+}
+
+vi.mock('../../store', () => ({
+  useStore: (selector: (state: typeof mockSelectedState) => unknown) => selector(mockSelectedState),
+}))
+
+vi.mock('../hooks', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../hooks')>()
+  return {
+    ...actual,
+    useCommand: () => ({
+      handleCommand: mockHandleCommand,
+    }),
+    useFontSize: () => ({
+      fontSize: mockFontSize,
+      fontSizeSelectorShow: mockFontSizeSelectorShow,
+      handleFontSize: mockHandleFontSize,
+      handleOpenFontSizeSelector: mockHandleOpenFontSizeSelector,
+    }),
+  }
+})
+
+describe('NoteEditor Toolbar', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockFontSizeSelectorShow = false
+    mockFontSize = '14px'
+    mockSelectedState = {
+      selectedIsBold: false,
+      selectedIsItalic: false,
+      selectedIsStrikeThrough: false,
+      selectedIsLink: false,
+      selectedIsBullet: false,
+    }
+  })
+
+  it('should compose the toolbar controls and forward callbacks from color and operator actions', async () => {
+    const onCopy = vi.fn()
+    const onDelete = vi.fn()
+    const onDuplicate = vi.fn()
+    const onShowAuthorChange = vi.fn()
+    const onThemeChange = vi.fn()
+    const { container } = render(
+      <Toolbar
+        theme={NoteTheme.blue}
+        onThemeChange={onThemeChange}
+        onCopy={onCopy}
+        onDuplicate={onDuplicate}
+        onDelete={onDelete}
+        showAuthor={false}
+        onShowAuthorChange={onShowAuthorChange}
+      />,
+    )
+
+    expect(screen.getByText('workflow.nodes.note.editor.medium')).toBeInTheDocument()
+
+    const triggers = container.querySelectorAll('[data-state="closed"]')
+
+    fireEvent.click(triggers[0] as HTMLElement)
+
+    const colorOptions = document.body.querySelectorAll('[role="tooltip"] .group.relative')
+
+    fireEvent.click(colorOptions[colorOptions.length - 1] as Element)
+
+    expect(onThemeChange).toHaveBeenCalledWith(NoteTheme.violet)
+
+    fireEvent.click(container.querySelectorAll('[data-state="closed"]')[container.querySelectorAll('[data-state="closed"]').length - 1] as HTMLElement)
+    fireEvent.click(screen.getByText('workflow.common.copy'))
+
+    expect(onCopy).toHaveBeenCalledTimes(1)
+
+    await waitFor(() => {
+      expect(document.body.querySelector('[role="tooltip"]')).not.toBeInTheDocument()
+    })
+    expect(onDelete).not.toHaveBeenCalled()
+    expect(onDuplicate).not.toHaveBeenCalled()
+    expect(onShowAuthorChange).not.toHaveBeenCalled()
+  })
+})

web/app/components/workflow/note-node/note-editor/toolbar/__tests__/operator.spec.tsx

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Operator from '../operator'
+
+const renderOperator = (showAuthor = false) => {
+  const onCopy = vi.fn()
+  const onDuplicate = vi.fn()
+  const onDelete = vi.fn()
+  const onShowAuthorChange = vi.fn()
+
+  const renderResult = render(
+    <Operator
+      onCopy={onCopy}
+      onDuplicate={onDuplicate}
+      onDelete={onDelete}
+      showAuthor={showAuthor}
+      onShowAuthorChange={onShowAuthorChange}
+    />,
+  )
+
+  return {
+    ...renderResult,
+    onCopy,
+    onDelete,
+    onDuplicate,
+    onShowAuthorChange,
+  }
+}
+
+describe('NoteEditor Toolbar Operator', () => {
+  it('should trigger copy, duplicate, and delete from the opened menu', () => {
+    const {
+      container,
+      onCopy,
+      onDelete,
+      onDuplicate,
+    } = renderOperator()
+
+    const trigger = container.querySelector('[data-state="closed"]') as HTMLElement
+
+    fireEvent.click(trigger)
+    fireEvent.click(screen.getByText('workflow.common.copy'))
+
+    expect(onCopy).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
+    fireEvent.click(screen.getByText('workflow.common.duplicate'))
+
+    expect(onDuplicate).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
+    fireEvent.click(screen.getByText('common.operation.delete'))
+
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('should forward the switch state through onShowAuthorChange', () => {
+    const {
+      container,
+      onShowAuthorChange,
+    } = renderOperator(true)
+
+    fireEvent.click(container.querySelector('[data-state="closed"]') as HTMLElement)
+    fireEvent.click(screen.getByRole('switch'))
+
+    expect(onShowAuthorChange).toHaveBeenCalledWith(false)
+  })
+})