-
diff --git a/web/app/components/base/app-icon-picker/ImageInput.spec.tsx b/web/app/components/base/app-icon-picker/ImageInput.spec.tsx
new file mode 100644
index 0000000000..8e0476823a
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/ImageInput.spec.tsx
@@ -0,0 +1,237 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import ImageInput from './ImageInput'
+
+const createObjectURLMock = vi.fn(() => 'blob:mock-url')
+const revokeObjectURLMock = vi.fn()
+const originalCreateObjectURL = globalThis.URL.createObjectURL
+const originalRevokeObjectURL = globalThis.URL.revokeObjectURL
+
+const waitForCropperContainer = async () => {
+ await waitFor(() => {
+ expect(screen.getByTestId('container')).toBeInTheDocument()
+ })
+}
+
+const loadCropperImage = async () => {
+ await waitForCropperContainer()
+ const cropperImage = screen.getByTestId('container').querySelector('img')
+ if (!cropperImage)
+ throw new Error('Could not find cropper image')
+
+ fireEvent.load(cropperImage)
+}
+
+describe('ImageInput', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ globalThis.URL.createObjectURL = createObjectURLMock
+ globalThis.URL.revokeObjectURL = revokeObjectURLMock
+ })
+
+ afterEach(() => {
+ globalThis.URL.createObjectURL = originalCreateObjectURL
+ globalThis.URL.revokeObjectURL = originalRevokeObjectURL
+ })
+
+ describe('Rendering', () => {
+ it('should render upload prompt when no image is selected', () => {
+ render(
+
-
- = ({
className="pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center"
onClick={onHide}
>
-
+
@@ -49,7 +45,7 @@ const Alert: React.FC
{message}
{t('imageInput.dropImageHere', { ns: 'common' })}
-
+
= ({
onClick={e => ((e.target as HTMLInputElement).value = '')}
accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
onChange={handleLocalFileInput}
+ data-testid="image-input"
/>
{t('imageInput.supportedFormats', { ns: 'common' })}
diff --git a/web/app/components/base/app-icon-picker/hooks.spec.tsx b/web/app/components/base/app-icon-picker/hooks.spec.tsx
new file mode 100644
index 0000000000..58741a3ecf
--- /dev/null
+++ b/web/app/components/base/app-icon-picker/hooks.spec.tsx
@@ -0,0 +1,120 @@
+import { act, renderHook } from '@testing-library/react'
+import { useDraggableUploader } from './hooks'
+
+type MockDragEventOverrides = {
+ dataTransfer?: { files: File[] }
+}
+
+const createDragEvent = (overrides: MockDragEventOverrides = {}): React.DragEvent
+
+
+ ),
+}))
+
+vi.mock('../image-uploader/hooks', () => ({
+ useLocalFileUploader: (options: LocalFileUploaderOptions) => {
+ mocks.onUpload = options.onUpload
+ return { handleLocalFileUpload: mocks.handleLocalFileUpload }
+ },
+}))
+
+vi.mock('@/utils/emoji', () => ({
+ searchEmoji: vi.fn().mockResolvedValue(['grinning', 'sunglasses']),
+}))
+
+describe('AppIconPicker', () => {
+ const originalCreateElement = document.createElement.bind(document)
+ const originalCreateObjectURL = globalThis.URL.createObjectURL
+ const originalRevokeObjectURL = globalThis.URL.revokeObjectURL
+ let originalImage: typeof Image
+
+ const mockCanvasCreation = (canvases: HTMLCanvasElement[]) => {
+ vi.spyOn(document, 'createElement').mockImplementation((...args: Parameters
+ = ({
const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
const textAreaContent = (
-
{renderSafeContent(currentValue || '')}
)
@@ -121,7 +121,7 @@ const BlockInput: FC !readonly && setIsEditing(true)}>
+
!readonly && setIsEditing(true)}>
{isEditing
? (
= ({
)
return (
-
@@ -134,10 +134,10 @@ const BlockInput: FC = ({
onBlur={() => {
blur()
setIsEditing(false)
- // click confirm also make blur. Then outer value is change. So below code has problem.
- // setTimeout(() => {
- // handleCancel()
- // }, 1000)
+ // click confirm also make blur. Then outer value is change. So below code has problem.
+ // setTimeout(() => {
+ // handleCancel()
+ // }, 1000)
}}
/>
@@ -147,7 +147,7 @@ const BlockInput: FC
+
{textAreaContent}
{/* footer */}
{!readonly && (
diff --git a/web/app/components/base/button/add-button.spec.tsx b/web/app/components/base/button/add-button.spec.tsx
new file mode 100644
index 0000000000..ad27753211
--- /dev/null
+++ b/web/app/components/base/button/add-button.spec.tsx
@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import AddButton from './add-button'
+
+describe('AddButton', () => {
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const { container } = render( = ({
onClick,
}) => {
return (
-
- = ({
}) => {
return (
-
+
)
}
diff --git a/web/app/components/base/button/sync-button.spec.tsx b/web/app/components/base/button/sync-button.spec.tsx
new file mode 100644
index 0000000000..116aaaa7b0
--- /dev/null
+++ b/web/app/components/base/button/sync-button.spec.tsx
@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import SyncButton from './sync-button'
+
+describe('SyncButton', () => {
+ describe('Rendering', () => {
+ it('should render without crashing', () => {
+ const { container } = render(
-
+let mockApi: MockEmblaApi
+const mockCarouselRef = vi.fn()
+
+const mockedUseEmblaCarousel = vi.mocked(useEmblaCarousel)
+
+const createMockEmblaApi = (): MockEmblaApi => ({
+ scrollPrev: vi.fn(),
+ scrollNext: vi.fn(),
+ scrollTo: vi.fn(),
+ selectedScrollSnap: vi.fn(() => mockSelectedIndex),
+ canScrollPrev: vi.fn(() => mockCanScrollPrev),
+ canScrollNext: vi.fn(() => mockCanScrollNext),
+ slideNodes: vi.fn(() =>
+ Array.from({ length: mockSlideCount }, () => document.createElement('div')),
+ ),
+ on: vi.fn((event: EmblaEventName, callback: EmblaListener) => {
+ listeners[event].push(callback)
+ }),
+ off: vi.fn((event: EmblaEventName, callback: EmblaListener) => {
+ listeners[event] = listeners[event].filter(listener => listener !== callback)
+ }),
+})
+
+const emitEmblaEvent = (event: EmblaEventName, api: MockEmblaApi | undefined = mockApi) => {
+ listeners[event].forEach((callback) => {
+ callback(api)
+ })
+}
+
+const renderCarouselWithControls = (orientation: 'horizontal' | 'vertical' = 'horizontal') => {
+ return render(
+
+
+ Slide 1
+ Slide 2
+ Slide 3
+
+ Prev
+ Next
+ Dot
+ ,
+ )
+}
+
+const mockPlugin = () => ({
+ name: 'mock',
+ options: {},
+ init: vi.fn(),
+ destroy: vi.fn(),
+})
+
+describe('Carousel', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockCanScrollPrev = false
+ mockCanScrollNext = false
+ mockSelectedIndex = 0
+ mockSlideCount = 3
+ listeners = { reInit: [], select: [] }
+ mockApi = createMockEmblaApi()
+
+ mockedUseEmblaCarousel.mockReturnValue(
+ [mockCarouselRef, mockApi] as unknown as ReturnType,
+ )
+ })
+
+ // Rendering and basic semantic structure.
+ describe('Rendering', () => {
+ it('should render region and slides when used with content and items', () => {
+ renderCarouselWithControls()
+
+ expect(screen.getByRole('region')).toHaveAttribute('aria-roledescription', 'carousel')
+ expect(screen.getByTestId('carousel-content')).toHaveClass('flex')
+ screen.getAllByRole('group').forEach((slide) => {
+ expect(slide).toHaveAttribute('aria-roledescription', 'slide')
+ })
+ })
+ })
+
+ // Props should be translated into Embla options and visible layout.
+ describe('Props', () => {
+ it('should configure embla with horizontal axis when orientation is omitted', () => {
+ const plugin = mockPlugin()
+ render(
+
+ ,
+ )
+
+ expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
+ { loop: true, axis: 'x' },
+ [plugin],
+ )
+ })
+
+ it('should configure embla with vertical axis and vertical content classes when orientation is vertical', () => {
+ renderCarouselWithControls('vertical')
+
+ expect(mockedUseEmblaCarousel).toHaveBeenCalledWith(
+ { axis: 'y' },
+ undefined,
+ )
+ expect(screen.getByTestId('carousel-content')).toHaveClass('flex-col')
+ })
+ })
+
+ // Users can move slides through previous and next controls.
+ describe('User interactions', () => {
+ it('should call scroll handlers when previous and next buttons are clicked', () => {
+ mockCanScrollPrev = true
+ mockCanScrollNext = true
+
+ renderCarouselWithControls()
+
+ fireEvent.click(screen.getByRole('button', { name: 'Prev' }))
+ fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+
+ expect(mockApi.scrollPrev).toHaveBeenCalledTimes(1)
+ expect(mockApi.scrollNext).toHaveBeenCalledTimes(1)
+ })
+
+ it('should call scrollTo with clicked index when a dot is clicked', () => {
+ renderCarouselWithControls()
+ const dots = screen.getAllByRole('button', { name: 'Dot' })
+
+ fireEvent.click(dots[2])
+
+ expect(mockApi.scrollTo).toHaveBeenCalledWith(2)
+ })
+ })
+
+ // Embla events should keep control states and selected index in sync.
+ describe('State synchronization', () => {
+ it('should update disabled states and active dot when select event is emitted', () => {
+ renderCarouselWithControls()
+
+ mockCanScrollPrev = true
+ mockCanScrollNext = true
+ mockSelectedIndex = 2
+
+ act(() => {
+ emitEmblaEvent('select')
+ })
+
+ const dots = screen.getAllByRole('button', { name: 'Dot' })
+ expect(screen.getByRole('button', { name: 'Prev' })).toBeEnabled()
+ expect(screen.getByRole('button', { name: 'Next' })).toBeEnabled()
+ expect(dots[2]).toHaveAttribute('data-state', 'active')
+ })
+
+ it('should subscribe to embla events and unsubscribe from select on unmount', () => {
+ const { unmount } = renderCarouselWithControls()
+
+ const selectCallback = mockApi.on.mock.calls.find(
+ call => call[0] === 'select',
+ )?.[1] as EmblaListener
+
+ expect(mockApi.on).toHaveBeenCalledWith('reInit', expect.any(Function))
+ expect(mockApi.on).toHaveBeenCalledWith('select', expect.any(Function))
+
+ unmount()
+
+ expect(mockApi.off).toHaveBeenCalledWith('select', selectCallback)
+ })
+ })
+
+ // Edge-case behavior for missing providers or missing embla api values.
+ describe('Edge cases', () => {
+ it('should throw when useCarousel is used outside Carousel provider', () => {
+ const InvalidConsumer = () => {
+ useCarousel()
+ return null
+ }
+
+ expect(() => render(,
+ )
+
+ renderCarouselWithControls()
+
+ expect(screen.getByRole('button', { name: 'Prev' })).toBeDisabled()
+ expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled()
+ expect(screen.queryByRole('button', { name: 'Dot' })).not.toBeInTheDocument()
+ })
+
+ it('should ignore select callback when embla emits an undefined api', () => {
+ renderCarouselWithControls()
+
+ expect(() => {
+ act(() => {
+ emitEmblaEvent('select', undefined)
+ })
+ }).not.toThrow()
+ })
+ })
+})
diff --git a/web/app/components/base/chat/chat/answer/agent-content.spec.tsx b/web/app/components/base/chat/chat/answer/agent-content.spec.tsx
new file mode 100644
index 0000000000..ef4143fa6f
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/agent-content.spec.tsx
@@ -0,0 +1,114 @@
+import type { ChatItem } from '../../types'
+import type { IThoughtProps } from '@/app/components/base/chat/chat/thought'
+import type { FileEntity } from '@/app/components/base/file-uploader/types'
+import type { MarkdownProps } from '@/app/components/base/markdown'
+import { render, screen } from '@testing-library/react'
+import AgentContent from './agent-content'
+
+// Mock Markdown component used only in tests
+vi.mock('@/app/components/base/markdown', () => ({
+ Markdown: (props: MarkdownProps & { 'data-testid'?: string }) => (
+ = ({
agent_thoughts,
} = item
- if (annotation?.logAnnotation)
- return
+
)
diff --git a/web/app/components/base/carousel/index.spec.tsx b/web/app/components/base/carousel/index.spec.tsx
new file mode 100644
index 0000000000..6bce414ee7
--- /dev/null
+++ b/web/app/components/base/carousel/index.spec.tsx
@@ -0,0 +1,231 @@
+import type { Mock } from 'vitest'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { Carousel, useCarousel } from './index'
+
+vi.mock('embla-carousel-react', () => ({
+ default: vi.fn(),
+}))
+
+type EmblaEventName = 'reInit' | 'select'
+type EmblaListener = (api: MockEmblaApi | undefined) => void
+
+type MockEmblaApi = {
+ scrollPrev: Mock
+ scrollNext: Mock
+ scrollTo: Mock
+ selectedScrollSnap: Mock
+ canScrollPrev: Mock
+ canScrollNext: Mock
+ slideNodes: Mock
+ on: Mock
+ off: Mock
+}
+
+let mockCanScrollPrev = false
+let mockCanScrollNext = false
+let mockSelectedIndex = 0
+let mockSlideCount = 3
+let listeners: Record
+ {String(props.content)}
+
+ ),
+}))
+
+// Mock Thought
+vi.mock('@/app/components/base/chat/chat/thought', () => ({
+ default: ({ thought, isFinished }: IThoughtProps) => (
+
+ {thought.thought}
+
+ ),
+}))
+
+// Mock FileList and Utils
+vi.mock('@/app/components/base/file-uploader', () => ({
+ FileList: ({ files }: { files: FileEntity[] }) => (
+
+ {files.map(f => f.name).join(', ')}
+
+ ),
+}))
+
+vi.mock('@/app/components/base/file-uploader/utils', () => ({
+ getProcessedFilesFromResponse: (files: FileEntity[]) => files.map(f => ({ ...f, name: `processed-${f.id}` })),
+}))
+
+describe('AgentContent', () => {
+ const mockItem: ChatItem = {
+ id: '1',
+ content: '',
+ isAnswer: true,
+ }
+
+ it('renders logAnnotation if present', () => {
+ const itemWithAnnotation = {
+ ...mockItem,
+ annotation: {
+ logAnnotation: { content: 'Log Annotation Content' },
+ },
+ }
+ render(
- {content ?
+
+ {content ? (
+
{thought.thought && (
- = ({
content,
} = item
- if (annotation?.logAnnotation)
- return = ({
item.isError && '!text-[#F04438]',
)}
content={displayContent}
+ data-testid="basic-content-markdown"
/>
)
}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx
new file mode 100644
index 0000000000..2c762f37b5
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-item.spec.tsx
@@ -0,0 +1,111 @@
+import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import ContentItem from './content-item'
+
+vi.mock('@/app/components/base/markdown', () => ({
+ Markdown: ({ content }: { content: string }) =>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx
new file mode 100644
index 0000000000..36f264a834
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/content-wrapper.spec.tsx
@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import ContentWrapper from './content-wrapper'
+
+describe('ContentWrapper', () => {
+ const defaultProps = {
+ nodeTitle: 'Human Input Node',
+ children:
+ {String(content)}
+
+ ),
+}))
+
+describe('BasicContent', () => {
+ const mockItem = {
+ id: '1',
+ content: 'Hello World',
+ isAnswer: true,
+ }
+
+ it('renders content correctly', () => {
+ render({content}
,
+}))
+
+describe('ContentItem', () => {
+ const mockOnInputChange = vi.fn()
+ const mockFormInputFields: FormInputItem[] = [
+ {
+ type: 'paragraph',
+ output_variable_name: 'user_bio',
+ default: {
+ type: 'constant',
+ value: '',
+ selector: [],
+ },
+ } as FormInputItem,
+ ]
+ const mockInputs = {
+ user_bio: 'Initial bio',
+ }
+
+ it('should render Markdown for literal content', () => {
+ render(
+ Child Content
,
+ }
+
+ it('should render node title and children by default when not collapsible', () => {
+ render(
+
{/* node icon */}
{nodeTitle}
{showExpandIcon && (
-
+
{
isExpanded
? (
-
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx
new file mode 100644
index 0000000000..3f2e6e4beb
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/executed-action.spec.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import ExecutedAction from './executed-action'
+
+describe('ExecutedAction', () => {
+ it('should render the triggered action information', () => {
+ const executedAction = {
+ id: 'btn_1',
+ title: 'Submit',
+ }
+
+ render(
+
- ()
+ return {
+ ...actual,
+ getRelativeTime: vi.fn(),
+ isRelativeTimeSameOrAfter: vi.fn(),
+ }
+})
+
+describe('ExpirationTime', () => {
+ it('should render "Future" state with relative time', () => {
+ vi.mocked(utils.getRelativeTime).mockReturnValue('in 2 hours')
+ vi.mocked(utils.isRelativeTimeSameOrAfter).mockReturnValue(true)
+
+ const { container } = render(
+
}}
+ components={{ strong: }}
values={{ actionName: executedAction.id }}
/>
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx
new file mode 100644
index 0000000000..fdf3a3244b
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/expiration-time.spec.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import ExpirationTime from './expiration-time'
+import * as utils from './utils'
+
+// Mock utils to control time-based logic
+vi.mock('./utils', async (importOriginal) => {
+ const actual = await importOriginal
@@ -28,13 +28,13 @@ const ExpirationTime = ({
isSameOrAfter
? (
<>
- ) => void
+ const submitPromise = new Promise((resolve) => {
+ resolveSubmit = resolve
+ })
+ const mockOnSubmit = vi.fn().mockReturnValue(submitPromise)
+
+ render(()
+ return {
+ ...actual,
+ useSelector: vi.fn(),
+ }
+})
+
+describe('Tips', () => {
+ const mockEmail = 'test@example.com'
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.mocked(useSelector).mockImplementation((selector: (value: AppContextValue) => unknown) => {
+ return selector({
+ userProfile: {
+ email: mockEmail,
+ },
+ } as AppContextValue)
+ })
+ })
+
+ it('should render email tip in normal mode', () => {
+ render(
+
+ {content}
+
+
+ ),
+}))
+
+describe('HumanInputForm', () => {
+ const mockFormData: HumanInputFormData = {
+ form_id: 'form_1',
+ node_id: 'node_1',
+ node_title: 'Title',
+ display_in_ui: true,
+ expiration_time: 0,
+ form_token: 'token_123',
+ form_content: 'Part 1 {{#$output.field1#}} Part 2',
+ inputs: [
+ {
+ type: 'paragraph',
+ output_variable_name: 'field1',
+ default: { type: 'constant', value: 'initial', selector: [] },
+ } as FormInputItem,
+ ],
+ actions: [
+ { id: 'action_1', title: 'Submit', button_style: UserActionButtonType.Primary },
+ { id: 'action_2', title: 'Cancel', button_style: UserActionButtonType.Default },
+ { id: 'action_3', title: 'Accent', button_style: UserActionButtonType.Accent },
+ { id: 'action_4', title: 'Ghost', button_style: UserActionButtonType.Ghost },
+ ],
+ resolved_default_values: {},
+ }
+
+ it('should render content parts and action buttons', () => {
+ render({content}
,
+}))
+
+describe('SubmittedContent', () => {
+ it('should render Markdown with the provided content', () => {
+ const content = '## Test Content'
+ render(
+
)
}
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx
new file mode 100644
index 0000000000..3ea4a25fcd
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/submitted.spec.tsx
@@ -0,0 +1,31 @@
+import type { HumanInputFilledFormData } from '@/types/workflow'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { SubmittedHumanInputContent } from './submitted'
+
+vi.mock('@/app/components/base/markdown', () => ({
+ Markdown: ({ content }: { content: string }) => {content}
,
+}))
+
+describe('SubmittedHumanInputContent Integration', () => {
+ const mockFormData: HumanInputFilledFormData = {
+ rendered_content: 'Rendered **Markdown** content',
+ action_id: 'btn_1',
+ action_text: 'Submit Action',
+ node_id: 'node_1',
+ node_title: 'Node Title',
+ }
+
+ it('should render both content and executed action', () => {
+ render(
+
{showEmailTip && !isEmailDebugMode && (
- ()
+ return {
+ ...actual,
+ useSelector: vi.fn(),
+ }
+})
+
+describe('UnsubmittedHumanInputContent Integration', () => {
+ const user = userEvent.setup()
+
+ // Helper to create valid form data
+ const createMockFormData = (overrides = {}): HumanInputFormData => ({
+ form_id: 'form_123',
+ node_id: 'node_456',
+ node_title: 'Input Form',
+ form_content: 'Fill this out: {{#$output.user_name#}}',
+ inputs: [
+ {
+ type: 'paragraph' as InputVarType,
+ output_variable_name: 'user_name',
+ default: {
+ type: 'constant',
+ value: 'Default value',
+ selector: [],
+ },
+ },
+ ],
+ actions: [
+ { id: 'btn_1', title: 'Submit', button_style: UserActionButtonType.Primary },
+ ],
+ form_token: 'token_123',
+ resolved_default_values: {},
+ expiration_time: Math.floor(Date.now() / 1000) + 3600, // 1 hour from now
+ display_in_ui: true,
+ ...overrides,
+ } as unknown as HumanInputFormData)
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.mocked(useSelector).mockImplementation((selector: (value: AppContextValue) => unknown) => {
+ return selector({
+ userProfile: {
+ id: 'user_123',
+ name: 'Test User',
+ email: 'test@example.com',
+ avatar: '',
+ avatar_url: '',
+ is_password_set: false,
+ },
+ } as AppContextValue)
+ })
+ })
+
+ describe('Rendering', () => {
+ it('should render form, tips, and expiration time when all conditions met', () => {
+ render(
+ ) => void
+ const handleSubmit = vi.fn().mockImplementation(() => new Promise((resolve) => {
+ resolveSubmit = resolve
+ }))
+ const data = createMockFormData()
+
+ render( = {},
+): HumanInputFilledFormData => ({
+ node_id: 'node-1',
+ node_title: 'Node Title',
+
+ // 👇 IMPORTANT
+ // DO NOT guess properties like `inputs`
+ // Only include fields that actually exist in your project type.
+ // Leave everything else empty via spread.
+ ...overrides,
+} as HumanInputFilledFormData)
+
+describe('HumanInputFilledFormList', () => {
+ it('renders nothing when list is empty', () => {
+ render( = ({
const { t } = useTranslation()
return (
-
{t('common.humanInputEmailTip', { ns: 'workflow' })}
+ {t('common.humanInputEmailTip', { ns: 'workflow' })}
)}
{showEmailTip && isEmailDebugMode && (
-
+
)
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx b/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx
new file mode 100644
index 0000000000..192b4f08b4
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/human-input-content/unsubmitted.spec.tsx
@@ -0,0 +1,212 @@
+import type { InputVarType } from '@/app/components/workflow/types'
+import type { AppContextValue } from '@/context/app-context'
+import type { HumanInputFormData } from '@/types/workflow'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
+import { useSelector } from '@/context/app-context'
+import { UnsubmittedHumanInputContent } from './unsubmitted'
+
+// Mock AppContext's useSelector to control user profile data
+vi.mock('@/context/app-context', async (importOriginal) => {
+ const actual = await importOriginal{t('common.humanInputWebappTip', { ns: 'workflow' })}
}
+ {showDebugModeTip && {t('common.humanInputWebappTip', { ns: 'workflow' })}
}
+ {children}
+
+ ),
+}))
+
+vi.mock('./human-input-content/unsubmitted', () => ({
+ UnsubmittedHumanInputContent: ({ showEmailTip, isEmailDebugMode, showDebugModeTip }: { showEmailTip: boolean, isEmailDebugMode: boolean, showDebugModeTip: boolean }) => (
+
+ {showEmailTip ? 'true' : 'false'}
+ {isEmailDebugMode ? 'true' : 'false'}
+ {showDebugModeTip ? 'true' : 'false'}
+
+ ),
+}))
+
+describe('HumanInputFormList', () => {
+ const mockFormData = [
+ {
+ form_id: 'form1',
+ node_id: 'node1',
+ node_title: 'Title 1',
+ display_in_ui: true,
+ },
+ {
+ form_id: 'form2',
+ node_id: 'node2',
+ node_title: 'Title 2',
+ display_in_ui: false,
+ },
+ ]
+
+ const mockGetNodeData = vi.fn()
+
+ it('should render empty list when no form data is provided', () => {
+ render(
+
diff --git a/web/app/components/base/chat/chat/answer/more.spec.tsx b/web/app/components/base/chat/chat/answer/more.spec.tsx
new file mode 100644
index 0000000000..551c15e659
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/more.spec.tsx
@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react'
+import More from './more'
+
+describe('More', () => {
+ const mockMoreData = {
+ latency: 0.5,
+ tokens: 100,
+ tokens_per_second: 200,
+ time: '2023-10-27 10:00:00',
+ }
+
+ it('should render all details when all data is provided', () => {
+ render(
{
filteredHumanInputFormDataList.map(formData => (
-
-
+
+
+
))
}
+
{
more && (
<>
= ({
= ({
= {}): ChatConfig => ({
+ opening_statement: '',
+ pre_prompt: '',
+ prompt_type: 'simple' as ChatConfig['prompt_type'],
+ user_input_form: [],
+ dataset_query_variable: '',
+ more_like_this: { enabled: false },
+ suggested_questions_after_answer: { enabled: false },
+ speech_to_text: { enabled: false },
+ text_to_speech: { enabled: false },
+ retriever_resource: { enabled: false },
+ sensitive_word_avoidance: { enabled: false },
+ agent_mode: { enabled: false, tools: [] },
+ dataset_configs: { retrieval_model: 'single' } as ChatConfig['dataset_configs'],
+ system_parameters: {
+ audio_file_size_limit: 10,
+ file_size_limit: 10,
+ image_file_size_limit: 10,
+ video_file_size_limit: 10,
+ workflow_file_upload_limit: 10,
+ },
+ supportFeedback: false,
+ supportAnnotation: false,
+ ...overrides,
+} as ChatConfig)
+
+const mockContextValue: ChatContextValue = {
+ chatList: [],
+ config: makeChatConfig({ supportFeedback: true }),
+ onFeedback: vi.fn().mockResolvedValue(undefined),
+ onRegenerate: vi.fn(),
+ onAnnotationAdded: vi.fn(),
+ onAnnotationEdited: vi.fn(),
+ onAnnotationRemoved: vi.fn(),
+}
+
+vi.mock('../context', () => ({
+ useChatContext: () => mockContextValue,
+}))
+
+vi.mock('react-i18next', () => ({
+ useTranslation: () => ({
+ t: mockT,
+ }),
+}))
+
+type OperationProps = {
+ item: ChatItem
+ question: string
+ index: number
+ showPromptLog?: boolean
+ maxSize: number
+ contentWidth: number
+ hasWorkflowProcess: boolean
+ noChatInput?: boolean
+}
+
+const baseItem: ChatItem = {
+ id: 'msg-1',
+ content: 'Hello world',
+ isAnswer: true,
+}
+
+const baseProps: OperationProps = {
+ item: baseItem,
+ question: 'What is this?',
+ index: 0,
+ maxSize: 500,
+ contentWidth: 300,
+ hasWorkflowProcess: false,
+}
+
+describe('Operation', () => {
+ const renderOperation = (props = baseProps) => {
+ return render(
+ = ({
}
const handleLikeClick = (target: 'user' | 'admin') => {
- const currentRating = target === 'admin' ? adminLocalFeedback?.rating : displayUserFeedback?.rating
- if (currentRating === 'like') {
- handleFeedback(null, undefined, target)
- return
- }
handleFeedback('like', undefined, target)
}
const handleDislikeClick = (target: 'user' | 'admin') => {
- const currentRating = target === 'admin' ? adminLocalFeedback?.rating : displayUserFeedback?.rating
- if (currentRating === 'dislike') {
- handleFeedback(null, undefined, target)
- return
- }
setFeedbackTarget(target)
setIsShowFeedbackModal(true)
}
@@ -186,6 +170,7 @@ const Operation: FC = ({
!hasWorkflowProcess && positionRight && '!top-[9px]',
)}
style={(!hasWorkflowProcess && positionRight) ? { left: contentWidth + 8 } : {}}
+ data-testid="operation-bar"
>
{shouldShowUserFeedbackBar && !humanInputFormDataList?.length && (
{`${t('detail.timeConsuming', { ns: 'appLog' })} ${more.latency}${t('detail.second', { ns: 'appLog' })}`}
{`${t('detail.tokenCost', { ns: 'appLog' })} ${formatNumber(more.tokens)}`}
@@ -33,6 +38,7 @@ const More: FC
{`${more.tokens_per_second} tokens/s`}
@@ -41,6 +47,7 @@ const More: FC
{more.time}
diff --git a/web/app/components/base/chat/chat/answer/operation.spec.tsx b/web/app/components/base/chat/chat/answer/operation.spec.tsx
new file mode 100644
index 0000000000..eb52dffe8f
--- /dev/null
+++ b/web/app/components/base/chat/chat/answer/operation.spec.tsx
@@ -0,0 +1,726 @@
+import type { ChatConfig, ChatItem } from '../../types'
+import type { ChatContextValue } from '../context'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import copy from 'copy-to-clipboard'
+import * as React from 'react'
+import { vi } from 'vitest'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import Operation from './operation'
+
+const {
+ mockSetShowAnnotationFullModal,
+ mockProviderContext,
+ mockT,
+ mockAddAnnotation,
+} = vi.hoisted(() => {
+ return {
+ mockAddAnnotation: vi.fn(),
+ mockSetShowAnnotationFullModal: vi.fn(),
+ mockT: vi.fn((key: string): string => key),
+ mockProviderContext: {
+ plan: {
+ usage: { annotatedResponse: 0 },
+ total: { annotatedResponse: 100 },
+ },
+ enableBilling: false,
+ },
+ }
+})
+
+vi.mock('copy-to-clipboard', () => ({ default: vi.fn() }))
+
+vi.mock('@/app/components/base/toast', () => ({
+ default: { notify: vi.fn() },
+}))
+
+vi.mock('@/context/modal-context', () => ({
+ useModalContext: () => ({
+ setShowAnnotationFullModal: mockSetShowAnnotationFullModal,
+ }),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: () => mockProviderContext,
+}))
+
+vi.mock('@/service/annotation', () => ({
+ addAnnotation: mockAddAnnotation,
+}))
+
+vi.mock('@/app/components/base/audio-btn/audio.player.manager', () => ({
+ AudioPlayerManager: {
+ getInstance: vi.fn(() => ({
+ getAudioPlayer: vi.fn(() => ({
+ playAudio: vi.fn(),
+ pauseAudio: vi.fn(),
+ })),
+ })),
+ },
+}))
+
+vi.mock('@/app/components/app/annotation/edit-annotation-modal', () => ({
+ default: ({ isShow, onHide, onEdited, onAdded, onRemove }: {
+ isShow: boolean
+ onHide: () => void
+ onEdited: (q: string, a: string) => void
+ onAdded: (id: string, name: string, q: string, a: string) => void
+ onRemove: () => void
+ }) =>
+ isShow
+ ? (
+
+
+
+
+
+
+ )
+ : null,
+}))
+
+vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button', () => ({
+ default: function AnnotationCtrlMock({ onAdded, onEdit, cached }: {
+ onAdded: (id: string, authorName: string) => void
+ onEdit: () => void
+ cached: boolean
+ }) {
+ const { setShowAnnotationFullModal } = useModalContext()
+ const { plan, enableBilling } = useProviderContext()
+ const handleAdd = () => {
+ if (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse) {
+ setShowAnnotationFullModal()
+ return
+ }
+ onAdded('ann-new', 'Test User')
+ }
+ return (
+
+ {cached
+ ? (
+
+ )
+ : (
+
+ )}
+
+ )
+ },
+}))
+
+vi.mock('@/app/components/base/new-audio-button', () => ({
+ default: () => ,
+}))
+
+vi.mock('@/app/components/base/chat/chat/log', () => ({
+ default: () => ,
+}))
+
+vi.mock('next/navigation', () => ({
+ useParams: vi.fn(() => ({ appId: 'test-app' })),
+ usePathname: vi.fn(() => '/apps/test-app'),
+}))
+
+const makeChatConfig = (overrides: Partial
+
,
+ )
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockContextValue.config = makeChatConfig({ supportFeedback: true })
+ mockContextValue.onFeedback = vi.fn().mockResolvedValue(undefined)
+ mockContextValue.onRegenerate = vi.fn()
+ mockContextValue.onAnnotationAdded = vi.fn()
+ mockContextValue.onAnnotationEdited = vi.fn()
+ mockContextValue.onAnnotationRemoved = vi.fn()
+ mockProviderContext.plan.usage.annotatedResponse = 0
+ mockProviderContext.enableBilling = false
+ mockAddAnnotation.mockResolvedValue({ id: 'ann-new', account: { name: 'Test User' } })
+ })
+
+ describe('Rendering', () => {
+ it('should hide action buttons for opening statements', () => {
+ const item = { ...baseItem, isOpeningStatement: true }
+ renderOperation({ ...baseProps, item })
+ expect(screen.queryByTestId('operation-actions')).not.toBeInTheDocument()
+ })
+
+ it('should show copy and regenerate buttons', () => {
+ renderOperation()
+ expect(screen.getByTestId('copy-btn')).toBeInTheDocument()
+ expect(screen.getByTestId('regenerate-btn')).toBeInTheDocument()
+ })
+
+ it('should hide regenerate button when noChatInput is true', () => {
+ renderOperation({ ...baseProps, noChatInput: true })
+ expect(screen.queryByTestId('regenerate-btn')).not.toBeInTheDocument()
+ })
+
+ it('should show TTS button when text_to_speech is enabled', () => {
+ mockContextValue.config = makeChatConfig({ text_to_speech: { enabled: true } })
+ renderOperation()
+ expect(screen.getByTestId('audio-btn')).toBeInTheDocument()
+ })
+
+ it('should show annotation button when config supports it', () => {
+ mockContextValue.config = makeChatConfig({
+ supportAnnotation: true,
+ annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+ })
+ renderOperation()
+ expect(screen.getByTestId('annotation-ctrl')).toBeInTheDocument()
+ })
+
+ it('should show prompt log when showPromptLog is true', () => {
+ renderOperation({ ...baseProps, showPromptLog: true })
+ expect(screen.getByTestId('log-btn')).toBeInTheDocument()
+ })
+
+ it('should not show prompt log for opening statements', () => {
+ const item = { ...baseItem, isOpeningStatement: true }
+ renderOperation({ ...baseProps, item, showPromptLog: true })
+ expect(screen.queryByTestId('log-btn')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('Copy functionality', () => {
+ it('should copy content on copy click', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ await user.click(screen.getByTestId('copy-btn'))
+ expect(copy).toHaveBeenCalledWith('Hello world')
+ })
+
+ it('should aggregate agent_thoughts for copy content', async () => {
+ const user = userEvent.setup()
+ const item: ChatItem = {
+ ...baseItem,
+ content: 'ignored',
+ agent_thoughts: [
+ { id: '1', thought: 'Hello ', tool: '', tool_input: '', observation: '', message_id: '', conversation_id: '', position: 0 },
+ { id: '2', thought: 'World', tool: '', tool_input: '', observation: '', message_id: '', conversation_id: '', position: 1 },
+ ],
+ }
+ renderOperation({ ...baseProps, item })
+ await user.click(screen.getByTestId('copy-btn'))
+ expect(copy).toHaveBeenCalledWith('Hello World')
+ })
+ })
+
+ describe('Regenerate', () => {
+ it('should call onRegenerate on regenerate click', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ await user.click(screen.getByTestId('regenerate-btn'))
+ expect(mockContextValue.onRegenerate).toHaveBeenCalledWith(baseItem)
+ })
+ })
+
+ describe('Hiding controls with humanInputFormDataList', () => {
+ it('should hide TTS/copy/annotation when humanInputFormDataList is present', () => {
+ mockContextValue.config = makeChatConfig({
+ supportFeedback: false,
+ text_to_speech: { enabled: true },
+ supportAnnotation: true,
+ annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+ })
+ const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+ renderOperation({ ...baseProps, item })
+ expect(screen.queryByTestId('audio-btn')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('copy-btn')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('User feedback (no annotation support)', () => {
+ beforeEach(() => {
+ mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: false })
+ })
+
+ it('should show like/dislike buttons', () => {
+ renderOperation()
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.i-ri-thumb-up-line')).toBeInTheDocument()
+ expect(bar.querySelector('.i-ri-thumb-down-line')).toBeInTheDocument()
+ })
+
+ it('should call onFeedback with like on like click', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+ await user.click(thumbUp)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+ })
+
+ it('should open feedback modal on dislike click', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ })
+
+ it('should submit dislike feedback from modal', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ const textarea = screen.getByRole('textbox')
+ await user.type(textarea, 'Bad response')
+ const confirmBtn = screen.getByText(/submit/i)
+ await user.click(confirmBtn)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: 'Bad response' })
+ })
+
+ it('should cancel feedback modal', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ const cancelBtn = screen.getByText(/cancel/i)
+ await user.click(cancelBtn)
+ expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+ })
+
+ it('should show existing like feedback and allow undo', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, feedback: { rating: 'like' as const } }
+ renderOperation({ ...baseProps, item })
+ const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+ await user.click(thumbUp)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should show existing dislike feedback and allow undo', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, feedback: { rating: 'dislike' as const, content: 'bad' } }
+ renderOperation({ ...baseProps, item })
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should undo like when already liked', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ // First click to like
+ const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+ await user.click(thumbUp)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+
+ // Second click to undo - re-query as it might be a different node
+ const thumbUpUndo = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+ await user.click(thumbUpUndo)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should undo dislike when already disliked', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ const submitBtn = screen.getByText(/submit/i)
+ await user.click(submitBtn)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: '' })
+
+ // Re-query for undo
+ const thumbDownUndo = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDownUndo)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should show tooltip with dislike and content', () => {
+ const item = { ...baseItem, feedback: { rating: 'dislike' as const, content: 'Too slow' } }
+ renderOperation({ ...baseProps, item })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.i-ri-thumb-down-line')).toBeInTheDocument()
+ })
+
+ it('should show tooltip with only rating', () => {
+ const item = { ...baseItem, feedback: { rating: 'like' as const } }
+ renderOperation({ ...baseProps, item })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.i-ri-thumb-up-line')).toBeInTheDocument()
+ })
+
+ it('should not show feedback bar for opening statements', () => {
+ const item = { ...baseItem, isOpeningStatement: true }
+ renderOperation({ ...baseProps, item })
+ expect(screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+ })
+
+ it('should not show user feedback bar when humanInputFormDataList is present', () => {
+ const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+ renderOperation({ ...baseProps, item })
+ expect(screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+ })
+
+ it('should not call feedback when supportFeedback is disabled', async () => {
+ mockContextValue.config = makeChatConfig({ supportFeedback: false })
+ mockContextValue.onFeedback = undefined
+ renderOperation()
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBe(0)
+ })
+ })
+
+ describe('Admin feedback (with annotation support)', () => {
+ beforeEach(() => {
+ mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: true })
+ })
+
+ it('should show admin like/dislike buttons', () => {
+ renderOperation()
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBeGreaterThanOrEqual(1)
+ expect(bar.querySelectorAll('.i-ri-thumb-down-line').length).toBeGreaterThanOrEqual(1)
+ })
+
+ it('should call onFeedback with like for admin', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+ const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+ await user.click(adminThumb)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+ })
+
+ it('should open feedback modal on admin dislike click', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+ const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+ await user.click(adminThumb)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ })
+
+ it('should show user feedback read-only in admin bar when user has liked', () => {
+ const item = { ...baseItem, feedback: { rating: 'like' as const } }
+ renderOperation({ ...baseProps, item })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelectorAll('.i-ri-thumb-up-line').length).toBeGreaterThanOrEqual(2)
+ })
+
+ it('should show separator in admin bar when user has feedback', () => {
+ const item = { ...baseItem, feedback: { rating: 'dislike' as const } }
+ renderOperation({ ...baseProps, item })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.bg-components-actionbar-border')).toBeInTheDocument()
+ })
+
+ it('should show existing admin like feedback and allow undo', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, adminFeedback: { rating: 'like' as const } }
+ renderOperation({ ...baseProps, item })
+ const thumbUp = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-up-line')!.closest('button')!
+ await user.click(thumbUp)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should show existing admin dislike and allow undo', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, adminFeedback: { rating: 'dislike' as const } }
+ renderOperation({ ...baseProps, item })
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should undo admin like when already liked', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+ const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+ await user.click(adminThumb)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'like', content: undefined })
+
+ const thumbsUndo = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line')
+ const adminThumbUndo = thumbsUndo[thumbsUndo.length - 1].closest('button')!
+ await user.click(adminThumbUndo)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should undo admin dislike when already disliked', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const thumbs = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+ const adminThumb = thumbs[thumbs.length - 1].closest('button')!
+ await user.click(adminThumb)
+ const submitBtn = screen.getByText(/submit/i)
+ await user.click(submitBtn)
+
+ const thumbsUndo = screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-down-line')
+ const adminThumbUndo = thumbsUndo[thumbsUndo.length - 1].closest('button')!
+ await user.click(adminThumbUndo)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: null, content: undefined })
+ })
+
+ it('should not show admin feedback bar when humanInputFormDataList is present', () => {
+ const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+ renderOperation({ ...baseProps, item })
+ expect(screen.getByTestId('operation-bar').querySelectorAll('.i-ri-thumb-up-line').length).toBe(0)
+ })
+ })
+
+ describe('Positioning and layout', () => {
+ it('should position right when operationWidth < maxSize', () => {
+ renderOperation({ ...baseProps, maxSize: 500 })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.style.left).toBeTruthy()
+ })
+
+ it('should position bottom when operationWidth >= maxSize', () => {
+ renderOperation({ ...baseProps, maxSize: 1 })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.style.left).toBeFalsy()
+ })
+
+ it('should apply workflow process class when hasWorkflowProcess is true', () => {
+ renderOperation({ ...baseProps, hasWorkflowProcess: true })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.className).toContain('-bottom-4')
+ })
+
+ it('should calculate width correctly for all features combined', () => {
+ mockContextValue.config = makeChatConfig({
+ text_to_speech: { enabled: true },
+ supportAnnotation: true,
+ annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+ supportFeedback: true,
+ })
+ const item = { ...baseItem, feedback: { rating: 'like' as const }, adminFeedback: { rating: 'dislike' as const } }
+ renderOperation({ ...baseProps, item, showPromptLog: true })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar).toBeInTheDocument()
+ })
+
+ it('should show separator when user has feedback in admin mode', () => {
+ mockContextValue.config = makeChatConfig({ supportFeedback: true, supportAnnotation: true })
+ const item = { ...baseItem, feedback: { rating: 'like' as const } }
+ renderOperation({ ...baseProps, item })
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.bg-components-actionbar-border')).toBeInTheDocument()
+ })
+
+ it('should handle missing translation fallbacks in buildFeedbackTooltip', () => {
+ // Mock t to return null for specific keys
+ mockT.mockImplementation((key: string): string => {
+ if (key.includes('Rate') || key.includes('like'))
+ return '' // Safe string fallback
+
+ return key
+ })
+
+ renderOperation()
+ expect(screen.getByTestId('operation-bar')).toBeInTheDocument()
+
+ // Reset to default behavior
+ mockT.mockImplementation(key => key)
+ })
+ })
+
+ describe('Annotation integration', () => {
+ beforeEach(() => {
+ mockContextValue.config = makeChatConfig({
+ supportAnnotation: true,
+ annotation_reply: { id: 'ar-1', score_threshold: 0.5, embedding_model: { embedding_provider_name: '', embedding_model_name: '' }, enabled: true },
+ appId: 'test-app',
+ })
+ })
+
+ it('should add annotation via annotation ctrl button', async () => {
+ const user = userEvent.setup()
+ renderOperation()
+ const addBtn = screen.getByTestId('annotation-add-btn')
+ await user.click(addBtn)
+ expect(mockContextValue.onAnnotationAdded).toHaveBeenCalledWith('ann-new', 'Test User', 'What is this?', 'Hello world', 0)
+ })
+
+ it('should show annotation full modal when limit reached', async () => {
+ const user = userEvent.setup()
+ mockProviderContext.enableBilling = true
+ mockProviderContext.plan.usage.annotatedResponse = 100
+ renderOperation()
+ const addBtn = screen.getByTestId('annotation-add-btn')
+ await user.click(addBtn)
+ expect(mockSetShowAnnotationFullModal).toHaveBeenCalled()
+ expect(mockAddAnnotation).not.toHaveBeenCalled()
+ })
+
+ it('should open edit reply modal when cached annotation exists', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+ renderOperation({ ...baseProps, item })
+ const editBtn = screen.getByTestId('annotation-edit-btn')
+ await user.click(editBtn)
+ expect(screen.getByTestId('edit-reply-modal')).toBeInTheDocument()
+ })
+
+ it('should call onAnnotationEdited from edit reply modal', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+ renderOperation({ ...baseProps, item })
+ const editBtn = screen.getByTestId('annotation-edit-btn')
+ await user.click(editBtn)
+ await user.click(screen.getByTestId('modal-edit'))
+ expect(mockContextValue.onAnnotationEdited).toHaveBeenCalledWith('eq', 'ea', 0)
+ })
+
+ it('should call onAnnotationAdded from edit reply modal', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+ renderOperation({ ...baseProps, item })
+ const editBtn = screen.getByTestId('annotation-edit-btn')
+ await user.click(editBtn)
+ await user.click(screen.getByTestId('modal-add'))
+ expect(mockContextValue.onAnnotationAdded).toHaveBeenCalledWith('a1', 'author', 'eq', 'ea', 0)
+ })
+
+ it('should call onAnnotationRemoved from edit reply modal', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+ renderOperation({ ...baseProps, item })
+ const editBtn = screen.getByTestId('annotation-edit-btn')
+ await user.click(editBtn)
+ await user.click(screen.getByTestId('modal-remove'))
+ expect(mockContextValue.onAnnotationRemoved).toHaveBeenCalledWith(0)
+ })
+
+ it('should close edit reply modal via onHide', async () => {
+ const user = userEvent.setup()
+ const item = { ...baseItem, annotation: { id: 'ann-1', created_at: 123, authorName: 'test author' } }
+ renderOperation({ ...baseProps, item })
+ const editBtn = screen.getByTestId('annotation-edit-btn')
+ await user.click(editBtn)
+ expect(screen.getByTestId('edit-reply-modal')).toBeInTheDocument()
+ await user.click(screen.getByTestId('modal-hide'))
+ expect(screen.queryByTestId('edit-reply-modal')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('TTS audio button', () => {
+ beforeEach(() => {
+ mockContextValue.config = makeChatConfig({ text_to_speech: { enabled: true, voice: 'test-voice' } })
+ })
+
+ it('should show audio play button when TTS enabled', () => {
+ renderOperation()
+ expect(screen.getByTestId('audio-btn')).toBeInTheDocument()
+ })
+
+ it('should not show audio button for humanInputFormDataList', () => {
+ const item = { ...baseItem, humanInputFormDataList: [{}] } as ChatItem
+ renderOperation({ ...baseProps, item })
+ expect(screen.queryByTestId('audio-btn')).not.toBeInTheDocument()
+ })
+ })
+
+ describe('Edge cases', () => {
+ it('should handle feedback content with only whitespace', async () => {
+ const user = userEvent.setup()
+ mockContextValue.config = makeChatConfig({ supportFeedback: true })
+ renderOperation()
+ const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
+ await user.click(thumbDown)
+ const textarea = screen.getByRole('textbox')
+ await user.type(textarea, ' ')
+ const confirmBtn = screen.getByText(/submit/i)
+ await user.click(confirmBtn)
+ expect(mockContextValue.onFeedback).toHaveBeenCalledWith('msg-1', { rating: 'dislike', content: ' ' })
+ })
+
+ it('should handle missing onFeedback callback gracefully', async () => {
+ mockContextValue.onFeedback = undefined
+ mockContextValue.config = makeChatConfig({ supportFeedback: true })
+ renderOperation()
+ const bar = screen.getByTestId('operation-bar')
+ expect(bar.querySelector('.i-ri-thumb-up-line')).not.toBeInTheDocument()
+ })
+
+ it('should handle empty agent_thoughts array', async () => {
+ const user = userEvent.setup()
+ const item: ChatItem = { ...baseItem, agent_thoughts: [] }
+ renderOperation({ ...baseProps, item })
+ await user.click(screen.getByTestId('copy-btn'))
+ expect(copy).toHaveBeenCalledWith('Hello world')
+ })
+ })
+})
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 4acf107232..f0d077975c 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -3,12 +3,6 @@ import type {
ChatItem,
Feedback,
} from '../../types'
-import {
- RiClipboardLine,
- RiResetLeftLine,
- RiThumbDownLine,
- RiThumbUpLine,
-} from '@remixicon/react'
import copy from 'copy-to-clipboard'
import {
memo,
@@ -127,20 +121,10 @@ const Operation: FC = ({
onClick={() => handleFeedback(null, undefined, 'user')}
>
{displayUserFeedback?.rating === 'like'
- ? = ({
state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
onClick={() => handleLikeClick('user')}
>
- handleDislikeClick('user')}
>
-
)}
@@ -242,12 +227,12 @@ const Operation: FC = ({
{displayUserFeedback.rating === 'like'
? (
-
)
: (
-
)}
@@ -266,8 +251,8 @@ const Operation: FC = ({
onClick={() => handleFeedback(null, undefined, 'admin')}
>
{adminLocalFeedback?.rating === 'like'
- ? = ({
state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
onClick={() => handleLikeClick('admin')}
>
- = ({
state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
onClick={() => handleDislikeClick('admin')}
>
-
@@ -305,7 +290,7 @@ const Operation: FC = ({
)}
{!isOpeningStatement && (
-
+
{(config?.text_to_speech?.enabled && !humanInputFormDataList?.length) && (
= ({
/>
)}
{!humanInputFormDataList?.length && (
- {
- copy(content)
- Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
- }}
+ {
+ copy(content)
+ Toast.notify({ type: 'success', message: t('actionMsg.copySuccessfully', { ns: 'common' }) })
+ }}
+ data-testid="copy-btn"
>
-
)}
{!noChatInput && (
- onRegenerate?.(item)}>
- onRegenerate?.(item)} data-testid="regenerate-btn">
+
)}
{config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
@@ -366,7 +353,7 @@ const Operation: FC = ({
>
diff --git a/web/app/components/base/timezone-label/index.spec.tsx b/web/app/components/base/timezone-label/index.spec.tsx
new file mode 100644
index 0000000000..c43aa61936
--- /dev/null
+++ b/web/app/components/base/timezone-label/index.spec.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import TimezoneLabel from './index'
+
+describe('TimezoneLabel', () => {
+ it('should render correctly with various timezones', () => {
+ const { rerender } = render( = ({
return (
{offsetStr}
diff --git a/web/app/components/base/tooltip/content.spec.tsx b/web/app/components/base/tooltip/content.spec.tsx
new file mode 100644
index 0000000000..314c773ce1
--- /dev/null
+++ b/web/app/components/base/tooltip/content.spec.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { ToolTipContent } from './content'
+
+describe('ToolTipContent', () => {
+ it('should render children correctly', () => {
+ render(
+
+ Tooltip body text
+ ,
+ )
+ expect(screen.getByTestId('tooltip-content')).toBeInTheDocument()
+ expect(screen.getByTestId('tooltip-content-body')).toHaveTextContent('Tooltip body text')
+ expect(screen.queryByTestId('tooltip-content-title')).not.toBeInTheDocument()
+ expect(screen.queryByTestId('tooltip-content-action')).not.toBeInTheDocument()
+ })
+
+ it('should render title when provided', () => {
+ render(
+
+ Tooltip body text
+ ,
+ )
+ expect(screen.getByTestId('tooltip-content-title')).toHaveTextContent('Tooltip Title')
+ })
+
+ it('should render action when provided', () => {
+ render(
+ Action Text}>
+ Tooltip body text
+ ,
+ )
+ expect(screen.getByTestId('tooltip-content-action')).toHaveTextContent('Action Text')
+ })
+
+ it('should handle action click', async () => {
+ const user = userEvent.setup()
+ const handleActionClick = vi.fn()
+ render(
+ Action Text}>
+ Tooltip body text
+ ,
+ )
+
+ await user.click(screen.getByText('Action Text'))
+ expect(handleActionClick).toHaveBeenCalledTimes(1)
+ })
+})
diff --git a/web/app/components/base/tooltip/content.tsx b/web/app/components/base/tooltip/content.tsx
index 1879e077e5..a5a31a2a5c 100644
--- a/web/app/components/base/tooltip/content.tsx
+++ b/web/app/components/base/tooltip/content.tsx
@@ -11,12 +11,12 @@ export const ToolTipContent: FC = ({
children,
}) => {
return (
-
-
-
+
handleThemeChange('light')}
+ data-testid="light-theme-container"
>
-
+
-
handleThemeChange('dark')}
+ data-testid="dark-theme-container"
>
-
+ = ({ src, srcs }) => {
}, [])
return (
- = ({ srcs }) => {
return null
return (
-
{!!title && (
-
)
}
diff --git a/web/app/components/base/video-gallery/VideoPlayer.spec.tsx b/web/app/components/base/video-gallery/VideoPlayer.spec.tsx
new file mode 100644
index 0000000000..04d9ccc4c8
--- /dev/null
+++ b/web/app/components/base/video-gallery/VideoPlayer.spec.tsx
@@ -0,0 +1,262 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import VideoPlayer from './VideoPlayer'
+
+describe('VideoPlayer', () => {
+ const mockSrc = 'video.mp4'
+ const mockSrcs = ['video1.mp4', 'video2.mp4']
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.useRealTimers()
+
+ // Mock HTMLVideoElement methods
+ window.HTMLVideoElement.prototype.play = vi.fn().mockResolvedValue(undefined)
+ window.HTMLVideoElement.prototype.pause = vi.fn()
+ window.HTMLVideoElement.prototype.load = vi.fn()
+ window.HTMLVideoElement.prototype.requestFullscreen = vi.fn().mockResolvedValue(undefined)
+
+ // Mock document methods
+ document.exitFullscreen = vi.fn().mockResolvedValue(undefined)
+
+ // Mock offsetWidth to avoid smallSize mode by default
+ Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+ configurable: true,
+ value: 500,
+ })
+
+ // Define properties on HTMLVideoElement prototype
+ Object.defineProperty(window.HTMLVideoElement.prototype, 'duration', {
+ configurable: true,
+ get() { return 100 },
+ })
+
+ // Use a descriptor check to avoid re-defining if it exists
+ if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'currentTime')) {
+ Object.defineProperty(window.HTMLVideoElement.prototype, 'currentTime', {
+ configurable: true,
+ // eslint-disable-next-line ts/no-explicit-any
+ get() { return (this as any)._currentTime || 0 },
+ // eslint-disable-next-line ts/no-explicit-any
+ set(v) { (this as any)._currentTime = v },
+ })
+ }
+
+ if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'volume')) {
+ Object.defineProperty(window.HTMLVideoElement.prototype, 'volume', {
+ configurable: true,
+ // eslint-disable-next-line ts/no-explicit-any
+ get() { return (this as any)._volume || 1 },
+ // eslint-disable-next-line ts/no-explicit-any
+ set(v) { (this as any)._volume = v },
+ })
+ }
+
+ if (!Object.getOwnPropertyDescriptor(window.HTMLVideoElement.prototype, 'muted')) {
+ Object.defineProperty(window.HTMLVideoElement.prototype, 'muted', {
+ configurable: true,
+ // eslint-disable-next-line ts/no-explicit-any
+ get() { return (this as any)._muted || false },
+ // eslint-disable-next-line ts/no-explicit-any
+ set(v) { (this as any)._muted = v },
+ })
+ }
+ })
+
+ describe('Rendering', () => {
+ it('should render with single src', () => {
+ render({title}
+ {title}
)}
- {children}
- {!!action && {action}
}
+ {children}
+ {!!action && {action}
}
-
diff --git a/web/app/components/base/video-gallery/index.spec.tsx b/web/app/components/base/video-gallery/index.spec.tsx
new file mode 100644
index 0000000000..717e57e1ff
--- /dev/null
+++ b/web/app/components/base/video-gallery/index.spec.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import VideoGallery from './index'
+
+describe('VideoGallery', () => {
+ const mockSrcs = ['video1.mp4', 'video2.mp4']
+
+ it('should render nothing when srcs is empty', () => {
+ const { container } = render(
+
,
+ pathname: '/test',
+ recorderInstances: [] as unknown[],
+ startOverride: null as (() => Promise) | null,
+ analyseData: new Uint8Array(1024).fill(150) as Uint8Array,
+ }
+
+ class MockRecorderClass {
+ start = vi.fn((..._args: unknown[]) => {
+ if (state.startOverride)
+ return state.startOverride()
+ return Promise.resolve()
+ })
+
+ stop = vi.fn()
+ getRecordAnalyseData = vi.fn(() => state.analyseData)
+ getWAV = vi.fn(() => new ArrayBuffer(0))
+ getChannelData = vi.fn(() => ({
+ left: { buffer: new ArrayBuffer(2048), byteLength: 2048 },
+ right: { buffer: new ArrayBuffer(2048), byteLength: 2048 },
+ }))
+
+ constructor() {
+ state.recorderInstances.push(this)
+ }
+ }
+
+ return { mockState: state, MockRecorder: MockRecorderClass }
+})
+
+vi.mock('js-audio-recorder', () => ({
+ default: MockRecorder,
+}))
+
+vi.mock('@/service/share', () => ({
+ AppSourceType: { webApp: 'webApp', installedApp: 'installedApp' },
+ audioToText: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+ useParams: vi.fn(() => mockState.params),
+ usePathname: vi.fn(() => mockState.pathname),
+}))
+
+vi.mock('./utils', () => ({
+ convertToMp3: vi.fn(() => new Blob(['test'], { type: 'audio/mp3' })),
+}))
+
+describe('VoiceInput', () => {
+ const onConverted = vi.fn()
+ const onCancel = vi.fn()
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockState.params = {}
+ mockState.pathname = '/test'
+ mockState.recorderInstances = []
+ mockState.startOverride = null
+
+ // Ensure canvas has non-zero dimensions for initCanvas()
+ HTMLCanvasElement.prototype.getBoundingClientRect = vi.fn(() => ({
+ width: 300,
+ height: 32,
+ top: 0,
+ left: 0,
+ right: 300,
+ bottom: 32,
+ x: 0,
+ y: 0,
+ toJSON: vi.fn(),
+ }))
+
+ vi.spyOn(window, 'requestAnimationFrame').mockImplementation(() => 1)
+ vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(() => { })
+ })
+
+ it('should start recording on mount and show speaking state', async () => {
+ render(
{
- startConvert && ()
+ return {
+ ...actual,
+ memo: vi.fn(fn => fn),
+ }
+})
+
+// Mock config
+vi.mock('@/config', () => ({
+ get IS_CE_EDITION() { return mockIsCeEdition },
+ get ZENDESK_WIDGET_KEY() { return mockZendeskWidgetKey },
+ get IS_PROD() { return mockIsProd },
+}))
+
+// Mock next/headers
+vi.mock('next/headers', () => ({
+ headers: vi.fn(() => ({
+ get: vi.fn((name: string) => {
+ if (name === 'x-nonce')
+ return mockNonce
+ return null
+ }),
+ })),
+}))
+
+// Mock next/script
+type ScriptProps = {
+ 'children'?: ReactNode
+ 'id'?: string
+ 'src'?: string
+ 'nonce'?: string
+ 'data-testid'?: string
+}
+vi.mock('next/script', () => ({
+ __esModule: true,
+ default: vi.fn(({ children, id, src, nonce, 'data-testid': testId }: ScriptProps) => (
+
+ return await Component()
+ }
+
+ it('should render nothing when IS_CE_EDITION is true', async () => {
+ mockIsCeEdition = true
+ const result = await renderZendesk()
+ expect(result).toBeNull()
+ })
+
+ it('should render nothing when ZENDESK_WIDGET_KEY is missing', async () => {
+ mockZendeskWidgetKey = undefined
+ const result = await renderZendesk()
+ expect(result).toBeNull()
+ })
+
+ it('should render scripts correctly in non-production environment', async () => {
+ mockIsProd = false
+ const result = await renderZendesk()
+ render(result as React.ReactElement) // result is ReactNode, which render accepts but types might be picky
+
+ const snippet = screen.getByTestId('ze-snippet')
+ expect(snippet).toBeInTheDocument()
+ expect(snippet).toHaveAttribute('id', 'ze-snippet')
+ expect(snippet).toHaveAttribute('data-src', 'https://static.zdassets.com/ekr/snippet.js?key=test-key')
+ expect(snippet).toHaveAttribute('data-nonce', '')
+
+ const init = screen.getByTestId('ze-init')
+ expect(init).toBeInTheDocument()
+ expect(init).toHaveAttribute('id', 'ze-init')
+ expect(init).toHaveTextContent('window.zE(\'messenger\', \'hide\')')
+ expect(init).toHaveAttribute('data-nonce', '')
+ })
+
+ it('should render scripts with nonce in production environment', async () => {
+ mockIsProd = true
+ mockNonce = 'prod-nonce'
+ const result = await renderZendesk()
+ render(result as React.ReactElement)
+
+ const snippet = screen.getByTestId('ze-snippet')
+ expect(snippet).toHaveAttribute('data-nonce', 'prod-nonce')
+
+ const init = screen.getByTestId('ze-init')
+ expect(init).toHaveAttribute('data-nonce', 'prod-nonce')
+ })
+
+ it('should render scripts with empty nonce in production when header is missing', async () => {
+ mockIsProd = true
+ mockNonce = null
+ const result = await renderZendesk()
+ render(result as React.ReactElement)
+
+ const snippet = screen.getByTestId('ze-snippet')
+ expect(snippet).toHaveAttribute('data-nonce', '')
+
+ const init = screen.getByTestId('ze-init')
+ expect(init).toHaveAttribute('data-nonce', '')
+ })
+})
diff --git a/web/app/components/base/zendesk/index.tsx b/web/app/components/base/zendesk/index.tsx
index e12a128a02..d1fac9ff1e 100644
--- a/web/app/components/base/zendesk/index.tsx
+++ b/web/app/components/base/zendesk/index.tsx
@@ -15,8 +15,9 @@ const Zendesk = async () => {
nonce={nonce ?? undefined}
id="ze-snippet"
src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+ data-testid="ze-snippet"
/>
-
{
@@ -182,7 +176,7 @@ const VoiceInput = ({
}
{
startConvert && (
-
)
diff --git a/web/app/components/base/zendesk/index.spec.tsx b/web/app/components/base/zendesk/index.spec.tsx
new file mode 100644
index 0000000000..abf0210f37
--- /dev/null
+++ b/web/app/components/base/zendesk/index.spec.tsx
@@ -0,0 +1,126 @@
+import type { ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Zendesk from './index'
+
+// Shared state for mocks
+let mockIsCeEdition = false
+let mockZendeskWidgetKey: string | undefined = 'test-key'
+let mockIsProd = false
+let mockNonce: string | null = 'test-nonce'
+
+// Mock react's memo to just return the function
+vi.mock('react', async (importOriginal) => {
+ const actual = await importOriginal
+
{t('voiceInput.converting', { ns: 'common' })}
)
@@ -191,24 +185,26 @@ const VoiceInput = ({
{
startRecord && (
-
)
}
{
startConvert && (
-
)
}
- 500 ? 'text-[#F04438]' : 'text-gray-700'}`}>{`0${minutes.toFixed(0)}:${seconds >= 10 ? seconds : `0${seconds}`}`}
+ 500 ? 'text-[#F04438]' : 'text-gray-700'}`} data-testid="voice-input-timer">{`0${minutes.toFixed(0)}:${seconds >= 10 ? seconds : `0${seconds}`}`}
+ {children}
+
+ )),
+}))
+
+describe('Zendesk', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockIsCeEdition = false
+ mockZendeskWidgetKey = 'test-key'
+ mockIsProd = false
+ mockNonce = 'test-nonce'
+ })
+
+ // Helper to call the async component
+ const renderZendesk = async () => {
+ const Component = Zendesk as unknown as () => Promise