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/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)
+  })
+})