+
)
@@ -53,21 +53,17 @@ const NavLink = ({
key={name}
type='button'
disabled
- className={classNames(
- 'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
- 'pl-3 pr-1',
- )}
+ className={cn('system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
+ 'pl-3 pr-1')}
title={mode === 'collapse' ? name : ''}
aria-disabled
>
{renderIcon()}
{name}
@@ -79,22 +75,18 @@ const NavLink = ({
{renderIcon()}
{name}
diff --git a/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx b/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
index 54dde5fbd4..dd3b230e9b 100644
--- a/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
+++ b/web/app/components/app-sidebar/sidebar-animation-issues.spec.tsx
@@ -1,6 +1,5 @@
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
// Simple Mock Components that reproduce the exact UI issues
const MockNavLink = ({ name, mode }: { name: string; mode: string }) => {
@@ -108,7 +107,7 @@ const MockAppInfo = ({ expand }: { expand: boolean }) => {
describe('Sidebar Animation Issues Reproduction', () => {
beforeEach(() => {
// Mock getBoundingClientRect for position testing
- Element.prototype.getBoundingClientRect = jest.fn(() => ({
+ Element.prototype.getBoundingClientRect = vi.fn(() => ({
width: 200,
height: 40,
x: 10,
@@ -117,7 +116,7 @@ describe('Sidebar Animation Issues Reproduction', () => {
right: 210,
top: 10,
bottom: 50,
- toJSON: jest.fn(),
+ toJSON: vi.fn(),
}))
})
@@ -152,7 +151,7 @@ describe('Sidebar Animation Issues Reproduction', () => {
})
it('should verify sidebar width animation is working correctly', () => {
- const handleToggle = jest.fn()
+ const handleToggle = vi.fn()
const { rerender } = render(
)
const container = screen.getByTestId('sidebar-container')
diff --git a/web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx b/web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx
index 1612606e9d..c28ba26d30 100644
--- a/web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx
+++ b/web/app/components/app-sidebar/text-squeeze-fix-verification.spec.tsx
@@ -5,15 +5,14 @@
import React from 'react'
import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
// Mock Next.js navigation
-jest.mock('next/navigation', () => ({
+vi.mock('next/navigation', () => ({
useSelectedLayoutSegment: () => 'overview',
}))
// Mock classnames utility
-jest.mock('@/utils/classnames', () => ({
+vi.mock('@/utils/classnames', () => ({
__esModule: true,
default: (...classes: any[]) => classes.filter(Boolean).join(' '),
}))
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 8de6f887f6..4f69adfc34 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import Button from '../base/button'
import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import Tooltip from '../base/tooltip'
import { useTranslation } from 'react-i18next'
import { getKeyboardKeyNameBySystem } from '../workflow/utils'
diff --git a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
index 356f813afc..1cbf5d1738 100644
--- a/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
+++ b/web/app/components/app/annotation/add-annotation-modal/edit-item/index.spec.tsx
@@ -2,19 +2,13 @@ import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import EditItem, { EditItemType } from './index'
-jest.mock('react-i18next', () => ({
- useTranslation: () => ({
- t: (key: string) => key,
- }),
-}))
-
describe('AddAnnotationModal/EditItem', () => {
test('should render query inputs with user avatar and placeholder strings', () => {
render(
,
)
@@ -28,7 +22,7 @@ describe('AddAnnotationModal/EditItem', () => {
,
)
@@ -38,7 +32,7 @@ describe('AddAnnotationModal/EditItem', () => {
})
test('should propagate changes when answer content updates', () => {
- const handleChange = jest.fn()
+ const handleChange = vi.fn()
render(
({
- useProviderContext: jest.fn(),
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: vi.fn(),
}))
-const mockToastNotify = jest.fn()
-jest.mock('@/app/components/base/toast', () => ({
+const mockToastNotify = vi.fn()
+vi.mock('@/app/components/base/toast', () => ({
__esModule: true,
default: {
- notify: jest.fn(args => mockToastNotify(args)),
+ notify: vi.fn(args => mockToastNotify(args)),
},
}))
-jest.mock('@/app/components/billing/annotation-full', () => () => )
+vi.mock('@/app/components/billing/annotation-full', () => ({
+ default: () => ,
+}))
-const mockUseProviderContext = useProviderContext as jest.Mock
+const mockUseProviderContext = useProviderContext as Mock
const getProviderContext = ({ usage = 0, total = 10, enableBilling = false } = {}) => ({
plan: {
@@ -30,12 +33,12 @@ const getProviderContext = ({ usage = 0, total = 10, enableBilling = false } = {
describe('AddAnnotationModal', () => {
const baseProps = {
isShow: true,
- onHide: jest.fn(),
- onAdd: jest.fn(),
+ onHide: vi.fn(),
+ onAdd: vi.fn(),
}
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
mockUseProviderContext.mockReturnValue(getProviderContext())
})
@@ -78,7 +81,7 @@ describe('AddAnnotationModal', () => {
})
test('should call onAdd with form values when create next enabled', async () => {
- const onAdd = jest.fn().mockResolvedValue(undefined)
+ const onAdd = vi.fn().mockResolvedValue(undefined)
render()
typeQuestion('Question value')
@@ -93,7 +96,7 @@ describe('AddAnnotationModal', () => {
})
test('should reset fields after saving when create next enabled', async () => {
- const onAdd = jest.fn().mockResolvedValue(undefined)
+ const onAdd = vi.fn().mockResolvedValue(undefined)
render()
typeQuestion('Question value')
@@ -133,7 +136,7 @@ describe('AddAnnotationModal', () => {
})
test('should close modal when save completes and create next unchecked', async () => {
- const onAdd = jest.fn().mockResolvedValue(undefined)
+ const onAdd = vi.fn().mockResolvedValue(undefined)
render()
typeQuestion('Q')
diff --git a/web/app/components/app/annotation/batch-action.spec.tsx b/web/app/components/app/annotation/batch-action.spec.tsx
new file mode 100644
index 0000000000..70765f6a32
--- /dev/null
+++ b/web/app/components/app/annotation/batch-action.spec.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchAction from './batch-action'
+
+describe('BatchAction', () => {
+ const baseProps = {
+ selectedIds: ['1', '2', '3'],
+ onBatchDelete: vi.fn(),
+ onCancel: vi.fn(),
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should show the selected count and trigger cancel action', () => {
+ render()
+
+ expect(screen.getByText('3')).toBeInTheDocument()
+ expect(screen.getByText('appAnnotation.batchAction.selected')).toBeInTheDocument()
+
+ fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+ expect(baseProps.onCancel).toHaveBeenCalledTimes(1)
+ })
+
+ it('should confirm before running batch delete', async () => {
+ const onBatchDelete = vi.fn().mockResolvedValue(undefined)
+ render()
+
+ fireEvent.click(screen.getByRole('button', { name: 'common.operation.delete' }))
+ await screen.findByText('appAnnotation.list.delete.title')
+
+ await act(async () => {
+ fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.delete' })[1])
+ })
+
+ await waitFor(() => {
+ expect(onBatchDelete).toHaveBeenCalledTimes(1)
+ })
+ })
+})
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 6e80d0c4c8..6ff392d17e 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -3,7 +3,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useBoolean } from 'ahooks'
import Divider from '@/app/components/base/divider'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import Confirm from '@/app/components/base/confirm'
const i18nPrefix = 'appAnnotation.batchAction'
@@ -38,7 +38,7 @@ const BatchAction: FC = ({
setIsNotDeleting()
}
return (
-
+
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
new file mode 100644
index 0000000000..eeeed8dcb4
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-downloader.spec.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import CSVDownload from './csv-downloader'
+import I18nContext from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import type { Locale } from '@/i18n-config'
+
+const downloaderProps: any[] = []
+
+vi.mock('react-papaparse', () => ({
+ useCSVDownloader: vi.fn(() => ({
+ CSVDownloader: ({ children, ...props }: any) => {
+ downloaderProps.push(props)
+ return {children}
+ },
+ Type: { Link: 'link' },
+ })),
+}))
+
+const renderWithLocale = (locale: Locale) => {
+ return render(
+
+
+ ,
+ )
+}
+
+describe('CSVDownload', () => {
+ const englishTemplate = [
+ ['question', 'answer'],
+ ['question1', 'answer1'],
+ ['question2', 'answer2'],
+ ]
+ const chineseTemplate = [
+ ['问题', '答案'],
+ ['问题 1', '答案 1'],
+ ['问题 2', '答案 2'],
+ ]
+
+ beforeEach(() => {
+ downloaderProps.length = 0
+ })
+
+ it('should render the structure preview and pass English template data by default', () => {
+ renderWithLocale('en-US' as Locale)
+
+ expect(screen.getByText('share.generation.csvStructureTitle')).toBeInTheDocument()
+ expect(screen.getByText('appAnnotation.batchModal.template')).toBeInTheDocument()
+
+ expect(downloaderProps[0]).toMatchObject({
+ filename: 'template-en-US',
+ type: 'link',
+ bom: true,
+ data: englishTemplate,
+ })
+ })
+
+ it('should switch to the Chinese template when locale matches the secondary language', () => {
+ const locale = LanguagesSupported[1] as Locale
+ renderWithLocale(locale)
+
+ expect(downloaderProps[0]).toMatchObject({
+ filename: `template-${locale}`,
+ data: chineseTemplate,
+ })
+ })
+})
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
index d94295c31c..041cd7ec71 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.spec.tsx
@@ -4,8 +4,8 @@ import CSVUploader, { type Props } from './csv-uploader'
import { ToastContext } from '@/app/components/base/toast'
describe('CSVUploader', () => {
- const notify = jest.fn()
- const updateFile = jest.fn()
+ const notify = vi.fn()
+ const updateFile = vi.fn()
const getDropElements = () => {
const title = screen.getByText('appAnnotation.batchModal.csvUploadTitle')
@@ -23,18 +23,18 @@ describe('CSVUploader', () => {
...props,
}
return render(
-
+
,
)
}
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
it('should open the file picker when clicking browse', () => {
- const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+ const clickSpy = vi.spyOn(HTMLInputElement.prototype, 'click')
renderComponent()
fireEvent.click(screen.getByText('appAnnotation.batchModal.browse'))
@@ -100,12 +100,12 @@ describe('CSVUploader', () => {
expect(screen.getByText('report')).toBeInTheDocument()
expect(screen.getByText('.csv')).toBeInTheDocument()
- const clickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+ const clickSpy = vi.spyOn(HTMLInputElement.prototype, 'click')
fireEvent.click(screen.getByText('datasetCreation.stepOne.uploader.change'))
expect(clickSpy).toHaveBeenCalled()
clickSpy.mockRestore()
- const valueSetter = jest.spyOn(fileInput, 'value', 'set')
+ const valueSetter = vi.spyOn(fileInput, 'value', 'set')
const removeTrigger = screen.getByTestId('remove-file-button')
fireEvent.click(removeTrigger)
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index ccad46b860..c9766135df 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useContext } from 'use-context-selector'
import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
import { ToastContext } from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
new file mode 100644
index 0000000000..3d0e799801
--- /dev/null
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/index.spec.tsx
@@ -0,0 +1,165 @@
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import BatchModal, { ProcessStatus } from './index'
+import { useProviderContext } from '@/context/provider-context'
+import { annotationBatchImport, checkAnnotationBatchImportProgress } from '@/service/annotation'
+import type { IBatchModalProps } from './index'
+import Toast from '@/app/components/base/toast'
+import type { Mock } from 'vitest'
+
+vi.mock('@/app/components/base/toast', () => ({
+ __esModule: true,
+ default: {
+ notify: vi.fn(),
+ },
+}))
+
+vi.mock('@/service/annotation', () => ({
+ annotationBatchImport: vi.fn(),
+ checkAnnotationBatchImportProgress: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: vi.fn(),
+}))
+
+vi.mock('./csv-downloader', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+let lastUploadedFile: File | undefined
+
+vi.mock('./csv-uploader', () => ({
+ __esModule: true,
+ default: ({ file, updateFile }: { file?: File; updateFile: (file?: File) => void }) => (
+
+
+ {file && {file.name}}
+
+ ),
+}))
+
+vi.mock('@/app/components/billing/annotation-full', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+const mockNotify = Toast.notify as Mock
+const useProviderContextMock = useProviderContext as Mock
+const annotationBatchImportMock = annotationBatchImport as Mock
+const checkAnnotationBatchImportProgressMock = checkAnnotationBatchImportProgress as Mock
+
+const renderComponent = (props: Partial = {}) => {
+ const mergedProps: IBatchModalProps = {
+ appId: 'app-id',
+ isShow: true,
+ onCancel: vi.fn(),
+ onAdded: vi.fn(),
+ ...props,
+ }
+ return {
+ ...render(),
+ props: mergedProps,
+ }
+}
+
+describe('BatchModal', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ lastUploadedFile = undefined
+ useProviderContextMock.mockReturnValue({
+ plan: {
+ usage: { annotatedResponse: 0 },
+ total: { annotatedResponse: 10 },
+ },
+ enableBilling: false,
+ })
+ })
+
+ it('should disable run action and show billing hint when annotation quota is full', () => {
+ useProviderContextMock.mockReturnValue({
+ plan: {
+ usage: { annotatedResponse: 10 },
+ total: { annotatedResponse: 10 },
+ },
+ enableBilling: true,
+ })
+
+ renderComponent()
+
+ expect(screen.getByTestId('annotation-full')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'appAnnotation.batchModal.run' })).toBeDisabled()
+ })
+
+ it('should reset uploader state when modal closes and allow manual cancellation', () => {
+ const { rerender, props } = renderComponent()
+
+ fireEvent.click(screen.getByTestId('mock-uploader'))
+ expect(screen.getByTestId('selected-file')).toHaveTextContent('batch.csv')
+
+ rerender()
+ rerender()
+
+ expect(screen.queryByTestId('selected-file')).toBeNull()
+
+ fireEvent.click(screen.getByRole('button', { name: 'appAnnotation.batchModal.cancel' }))
+ expect(props.onCancel).toHaveBeenCalledTimes(1)
+ })
+
+ it('should submit the csv file, poll status, and notify when import completes', async () => {
+ vi.useFakeTimers({ shouldAdvanceTime: true })
+ const { props } = renderComponent()
+ const fileTrigger = screen.getByTestId('mock-uploader')
+ fireEvent.click(fileTrigger)
+
+ const runButton = screen.getByRole('button', { name: 'appAnnotation.batchModal.run' })
+ expect(runButton).not.toBeDisabled()
+
+ annotationBatchImportMock.mockResolvedValue({ job_id: 'job-1', job_status: ProcessStatus.PROCESSING })
+ checkAnnotationBatchImportProgressMock
+ .mockResolvedValueOnce({ job_id: 'job-1', job_status: ProcessStatus.PROCESSING })
+ .mockResolvedValueOnce({ job_id: 'job-1', job_status: ProcessStatus.COMPLETED })
+
+ await act(async () => {
+ fireEvent.click(runButton)
+ })
+
+ await waitFor(() => {
+ expect(annotationBatchImportMock).toHaveBeenCalledTimes(1)
+ })
+
+ const formData = annotationBatchImportMock.mock.calls[0][0].body as FormData
+ expect(formData.get('file')).toBe(lastUploadedFile)
+
+ await waitFor(() => {
+ expect(checkAnnotationBatchImportProgressMock).toHaveBeenCalledTimes(1)
+ })
+
+ await act(async () => {
+ vi.runOnlyPendingTimers()
+ })
+
+ await waitFor(() => {
+ expect(checkAnnotationBatchImportProgressMock).toHaveBeenCalledTimes(2)
+ })
+
+ await waitFor(() => {
+ expect(mockNotify).toHaveBeenCalledWith({
+ type: 'success',
+ message: 'appAnnotation.batchModal.completed',
+ })
+ expect(props.onAdded).toHaveBeenCalledTimes(1)
+ expect(props.onCancel).toHaveBeenCalledTimes(1)
+ })
+ vi.useRealTimers()
+ })
+})
diff --git a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx
index fd6d900aa4..8722f682eb 100644
--- a/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/clear-all-annotations-confirm-modal/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import ClearAllAnnotationsConfirmModal from './index'
-jest.mock('react-i18next', () => ({
+vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record = {
@@ -16,7 +16,7 @@ jest.mock('react-i18next', () => ({
}))
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
describe('ClearAllAnnotationsConfirmModal', () => {
@@ -27,8 +27,8 @@ describe('ClearAllAnnotationsConfirmModal', () => {
render(
,
)
@@ -43,8 +43,8 @@ describe('ClearAllAnnotationsConfirmModal', () => {
render(
,
)
@@ -56,8 +56,8 @@ describe('ClearAllAnnotationsConfirmModal', () => {
// User confirms or cancels clearing annotations
describe('Interactions', () => {
test('should trigger onHide when cancel is clicked', () => {
- const onHide = jest.fn()
- const onConfirm = jest.fn()
+ const onHide = vi.fn()
+ const onConfirm = vi.fn()
// Arrange
render(
{
})
test('should trigger onConfirm when confirm is clicked', () => {
- const onHide = jest.fn()
- const onConfirm = jest.fn()
+ const onHide = vi.fn()
+ const onConfirm = vi.fn()
// Arrange
render(
{
const defaultProps = {
type: EditItemType.Query,
content: 'Test content',
- onSave: jest.fn(),
+ onSave: vi.fn(),
}
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
// Rendering tests (REQUIRED)
@@ -167,7 +167,7 @@ describe('EditItem', () => {
it('should save new content when save button is clicked', async () => {
// Arrange
- const mockSave = jest.fn().mockResolvedValue(undefined)
+ const mockSave = vi.fn().mockResolvedValue(undefined)
const props = {
...defaultProps,
onSave: mockSave,
@@ -223,7 +223,7 @@ describe('EditItem', () => {
it('should call onSave with correct content when saving', async () => {
// Arrange
- const mockSave = jest.fn().mockResolvedValue(undefined)
+ const mockSave = vi.fn().mockResolvedValue(undefined)
const props = {
...defaultProps,
onSave: mockSave,
@@ -245,9 +245,9 @@ describe('EditItem', () => {
expect(mockSave).toHaveBeenCalledWith('Test save content')
})
- it('should show delete option when content changes', async () => {
+ it('should show delete option and restore original content when delete is clicked', async () => {
// Arrange
- const mockSave = jest.fn().mockResolvedValue(undefined)
+ const mockSave = vi.fn().mockResolvedValue(undefined)
const props = {
...defaultProps,
onSave: mockSave,
@@ -267,7 +267,13 @@ describe('EditItem', () => {
await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
// Assert
- expect(mockSave).toHaveBeenCalledWith('Modified content')
+ expect(mockSave).toHaveBeenNthCalledWith(1, 'Modified content')
+ expect(await screen.findByText('common.operation.delete')).toBeInTheDocument()
+
+ await user.click(screen.getByText('common.operation.delete'))
+
+ expect(mockSave).toHaveBeenNthCalledWith(2, 'Test content')
+ expect(screen.queryByText('common.operation.delete')).not.toBeInTheDocument()
})
it('should handle keyboard interactions in edit mode', async () => {
@@ -393,5 +399,68 @@ describe('EditItem', () => {
expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
expect(screen.getByText('Test content')).toBeInTheDocument()
})
+
+ it('should handle save failure gracefully in edit mode', async () => {
+ // Arrange
+ const mockSave = vi.fn().mockRejectedValueOnce(new Error('Save failed'))
+ const props = {
+ ...defaultProps,
+ onSave: mockSave,
+ }
+ const user = userEvent.setup()
+
+ // Act
+ render()
+
+ // Enter edit mode and save (should fail)
+ await user.click(screen.getByText('common.operation.edit'))
+ const textarea = screen.getByRole('textbox')
+ await user.type(textarea, 'New content')
+
+ // Save should fail but not throw
+ await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ // Assert - Should remain in edit mode when save fails
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+ expect(mockSave).toHaveBeenCalledWith('New content')
+ })
+
+ it('should handle delete action failure gracefully', async () => {
+ // Arrange
+ const mockSave = vi.fn()
+ .mockResolvedValueOnce(undefined) // First save succeeds
+ .mockRejectedValueOnce(new Error('Delete failed')) // Delete fails
+ const props = {
+ ...defaultProps,
+ onSave: mockSave,
+ }
+ const user = userEvent.setup()
+
+ // Act
+ render()
+
+ // Edit content to show delete button
+ await user.click(screen.getByText('common.operation.edit'))
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'Modified content')
+
+ // Save to create new content
+ await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+ await screen.findByText('common.operation.delete')
+
+ // Click delete (should fail but not throw)
+ await user.click(screen.getByText('common.operation.delete'))
+
+ // Assert - Delete action should handle error gracefully
+ expect(mockSave).toHaveBeenCalledTimes(2)
+ expect(mockSave).toHaveBeenNthCalledWith(1, 'Modified content')
+ expect(mockSave).toHaveBeenNthCalledWith(2, 'Test content')
+
+ // When delete fails, the delete button should still be visible (state not changed)
+ expect(screen.getByText('common.operation.delete')).toBeInTheDocument()
+ expect(screen.getByText('Modified content')).toBeInTheDocument()
+ })
})
})
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index e808d0b48a..6ba830967d 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -6,7 +6,7 @@ import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
import Textarea from '@/app/components/base/textarea'
import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
export enum EditItemType {
Query = 'query',
@@ -52,8 +52,14 @@ const EditItem: FC = ({
}, [content])
const handleSave = async () => {
- await onSave(newContent)
- setIsEdit(false)
+ try {
+ await onSave(newContent)
+ setIsEdit(false)
+ }
+ catch {
+ // Keep edit mode open when save fails
+ // Error notification is handled by the parent component
+ }
}
const handleCancel = () => {
@@ -96,9 +102,16 @@ const EditItem: FC = ({
·
{
- setNewContent(content)
- onSave(content)
+ onClick={async () => {
+ try {
+ await onSave(content)
+ // Only update UI state after successful delete
+ setNewContent(content)
+ }
+ catch {
+ // Delete action failed - error is already handled by parent
+ // UI state remains unchanged, user can retry
+ }
}}
>
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
index a2e2527605..e4e9f23505 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.spec.tsx
@@ -1,15 +1,20 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Toast, { type IToastProps, type ToastHandle } from '@/app/components/base/toast'
import EditAnnotationModal from './index'
-// Mock only external dependencies
-jest.mock('@/service/annotation', () => ({
- addAnnotation: jest.fn(),
- editAnnotation: jest.fn(),
+const { mockAddAnnotation, mockEditAnnotation } = vi.hoisted(() => ({
+ mockAddAnnotation: vi.fn(),
+ mockEditAnnotation: vi.fn(),
}))
-jest.mock('@/context/provider-context', () => ({
+// Mock only external dependencies
+vi.mock('@/service/annotation', () => ({
+ addAnnotation: mockAddAnnotation,
+ editAnnotation: mockEditAnnotation,
+}))
+
+vi.mock('@/context/provider-context', () => ({
useProviderContext: () => ({
plan: {
usage: { annotatedResponse: 5 },
@@ -19,16 +24,16 @@ jest.mock('@/context/provider-context', () => ({
}),
}))
-jest.mock('@/hooks/use-timestamp', () => ({
+vi.mock('@/hooks/use-timestamp', () => ({
__esModule: true,
default: () => ({
formatTime: () => '2023-12-01 10:30:00',
}),
}))
-// Note: i18n is automatically mocked by Jest via __mocks__/react-i18next.ts
+// Note: i18n is automatically mocked by Vitest via web/vitest.setup.ts
-jest.mock('@/app/components/billing/annotation-full', () => ({
+vi.mock('@/app/components/billing/annotation-full', () => ({
__esModule: true,
default: () =>
,
}))
@@ -36,23 +41,18 @@ jest.mock('@/app/components/billing/annotation-full', () => ({
type ToastNotifyProps = Pick
type ToastWithNotify = typeof Toast & { notify: (props: ToastNotifyProps) => ToastHandle }
const toastWithNotify = Toast as unknown as ToastWithNotify
-const toastNotifySpy = jest.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: jest.fn() })
-
-const { addAnnotation: mockAddAnnotation, editAnnotation: mockEditAnnotation } = jest.requireMock('@/service/annotation') as {
- addAnnotation: jest.Mock
- editAnnotation: jest.Mock
-}
+const toastNotifySpy = vi.spyOn(toastWithNotify, 'notify').mockReturnValue({ clear: vi.fn() })
describe('EditAnnotationModal', () => {
const defaultProps = {
isShow: true,
- onHide: jest.fn(),
+ onHide: vi.fn(),
appId: 'test-app-id',
query: 'Test query',
answer: 'Test answer',
- onEdited: jest.fn(),
- onAdded: jest.fn(),
- onRemove: jest.fn(),
+ onEdited: vi.fn(),
+ onAdded: vi.fn(),
+ onRemove: vi.fn(),
}
afterAll(() => {
@@ -60,7 +60,7 @@ describe('EditAnnotationModal', () => {
})
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
mockAddAnnotation.mockResolvedValue({
id: 'test-id',
account: { name: 'Test User' },
@@ -168,7 +168,7 @@ describe('EditAnnotationModal', () => {
it('should save content when edited', async () => {
// Arrange
- const mockOnAdded = jest.fn()
+ const mockOnAdded = vi.fn()
const props = {
...defaultProps,
onAdded: mockOnAdded,
@@ -210,7 +210,7 @@ describe('EditAnnotationModal', () => {
describe('API Calls', () => {
it('should call addAnnotation when saving new annotation', async () => {
// Arrange
- const mockOnAdded = jest.fn()
+ const mockOnAdded = vi.fn()
const props = {
...defaultProps,
onAdded: mockOnAdded,
@@ -247,7 +247,7 @@ describe('EditAnnotationModal', () => {
it('should call editAnnotation when updating existing annotation', async () => {
// Arrange
- const mockOnEdited = jest.fn()
+ const mockOnEdited = vi.fn()
const props = {
...defaultProps,
annotationId: 'test-annotation-id',
@@ -314,7 +314,7 @@ describe('EditAnnotationModal', () => {
it('should call onRemove when removal is confirmed', async () => {
// Arrange
- const mockOnRemove = jest.fn()
+ const mockOnRemove = vi.fn()
const props = {
...defaultProps,
annotationId: 'test-annotation-id',
@@ -405,4 +405,276 @@ describe('EditAnnotationModal', () => {
expect(editLinks).toHaveLength(1) // Only answer should have edit button
})
})
+
+ // Error Handling (CRITICAL for coverage)
+ describe('Error Handling', () => {
+ it('should show error toast and skip callbacks when addAnnotation fails', async () => {
+ // Arrange
+ const mockOnAdded = vi.fn()
+ const props = {
+ ...defaultProps,
+ onAdded: mockOnAdded,
+ }
+ const user = userEvent.setup()
+
+ // Mock API failure
+ mockAddAnnotation.mockRejectedValueOnce(new Error('API Error'))
+
+ // Act
+ render()
+
+ // Find and click edit link for query
+ const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+ await user.click(editLinks[0])
+
+ // Find textarea and enter new content
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'New query content')
+
+ // Click save button
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await user.click(saveButton)
+
+ // Assert
+ await waitFor(() => {
+ expect(toastNotifySpy).toHaveBeenCalledWith({
+ message: 'API Error',
+ type: 'error',
+ })
+ })
+ expect(mockOnAdded).not.toHaveBeenCalled()
+
+ // Verify edit mode remains open (textarea should still be visible)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+ })
+
+ it('should show fallback error message when addAnnotation error has no message', async () => {
+ // Arrange
+ const mockOnAdded = vi.fn()
+ const props = {
+ ...defaultProps,
+ onAdded: mockOnAdded,
+ }
+ const user = userEvent.setup()
+
+ mockAddAnnotation.mockRejectedValueOnce({})
+
+ // Act
+ render()
+
+ const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+ await user.click(editLinks[0])
+
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'New query content')
+
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await user.click(saveButton)
+
+ // Assert
+ await waitFor(() => {
+ expect(toastNotifySpy).toHaveBeenCalledWith({
+ message: 'common.api.actionFailed',
+ type: 'error',
+ })
+ })
+ expect(mockOnAdded).not.toHaveBeenCalled()
+
+ // Verify edit mode remains open (textarea should still be visible)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+ })
+
+ it('should show error toast and skip callbacks when editAnnotation fails', async () => {
+ // Arrange
+ const mockOnEdited = vi.fn()
+ const props = {
+ ...defaultProps,
+ annotationId: 'test-annotation-id',
+ messageId: 'test-message-id',
+ onEdited: mockOnEdited,
+ }
+ const user = userEvent.setup()
+
+ // Mock API failure
+ mockEditAnnotation.mockRejectedValueOnce(new Error('API Error'))
+
+ // Act
+ render()
+
+ // Edit query content
+ const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+ await user.click(editLinks[0])
+
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'Modified query')
+
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await user.click(saveButton)
+
+ // Assert
+ await waitFor(() => {
+ expect(toastNotifySpy).toHaveBeenCalledWith({
+ message: 'API Error',
+ type: 'error',
+ })
+ })
+ expect(mockOnEdited).not.toHaveBeenCalled()
+
+ // Verify edit mode remains open (textarea should still be visible)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+ })
+
+ it('should show fallback error message when editAnnotation error is not an Error instance', async () => {
+ // Arrange
+ const mockOnEdited = vi.fn()
+ const props = {
+ ...defaultProps,
+ annotationId: 'test-annotation-id',
+ messageId: 'test-message-id',
+ onEdited: mockOnEdited,
+ }
+ const user = userEvent.setup()
+
+ mockEditAnnotation.mockRejectedValueOnce('oops')
+
+ // Act
+ render()
+
+ const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+ await user.click(editLinks[0])
+
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'Modified query')
+
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await user.click(saveButton)
+
+ // Assert
+ await waitFor(() => {
+ expect(toastNotifySpy).toHaveBeenCalledWith({
+ message: 'common.api.actionFailed',
+ type: 'error',
+ })
+ })
+ expect(mockOnEdited).not.toHaveBeenCalled()
+
+ // Verify edit mode remains open (textarea should still be visible)
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+ })
+ })
+
+ // Billing & Plan Features
+ describe('Billing & Plan Features', () => {
+ it('should show createdAt time when provided', () => {
+ // Arrange
+ const props = {
+ ...defaultProps,
+ annotationId: 'test-annotation-id',
+ createdAt: 1701381000, // 2023-12-01 10:30:00
+ }
+
+ // Act
+ render()
+
+ // Assert - Check that the formatted time appears somewhere in the component
+ const container = screen.getByRole('dialog')
+ expect(container).toHaveTextContent('2023-12-01 10:30:00')
+ })
+
+ it('should not show createdAt when not provided', () => {
+ // Arrange
+ const props = {
+ ...defaultProps,
+ annotationId: 'test-annotation-id',
+ // createdAt is undefined
+ }
+
+ // Act
+ render()
+
+ // Assert - Should not contain any timestamp
+ const container = screen.getByRole('dialog')
+ expect(container).not.toHaveTextContent('2023-12-01 10:30:00')
+ })
+
+ it('should display remove section when annotationId exists', () => {
+ // Arrange
+ const props = {
+ ...defaultProps,
+ annotationId: 'test-annotation-id',
+ }
+
+ // Act
+ render()
+
+ // Assert - Should have remove functionality
+ expect(screen.getByText('appAnnotation.editModal.removeThisCache')).toBeInTheDocument()
+ })
+ })
+
+ // Toast Notifications (Success)
+ describe('Toast Notifications', () => {
+ it('should show success notification when save operation completes', async () => {
+ // Arrange
+ const props = { ...defaultProps }
+ const user = userEvent.setup()
+
+ // Act
+ render()
+
+ const editLinks = screen.getAllByText(/common\.operation\.edit/i)
+ await user.click(editLinks[0])
+
+ const textarea = screen.getByRole('textbox')
+ await user.clear(textarea)
+ await user.type(textarea, 'Updated query')
+
+ const saveButton = screen.getByRole('button', { name: 'common.operation.save' })
+ await user.click(saveButton)
+
+ // Assert
+ await waitFor(() => {
+ expect(toastNotifySpy).toHaveBeenCalledWith({
+ message: 'common.api.actionSuccess',
+ type: 'success',
+ })
+ })
+ })
+ })
+
+ // React.memo Performance Testing
+ describe('React.memo Performance', () => {
+ it('should not re-render when props are the same', () => {
+ // Arrange
+ const props = { ...defaultProps }
+ const { rerender } = render()
+
+ // Act - Re-render with same props
+ rerender()
+
+ // Assert - Component should still be visible (no errors thrown)
+ expect(screen.getByText('appAnnotation.editModal.title')).toBeInTheDocument()
+ })
+
+ it('should re-render when props change', () => {
+ // Arrange
+ const props = { ...defaultProps }
+ const { rerender } = render()
+
+ // Act - Re-render with different props
+ const newProps = { ...props, query: 'New query content' }
+ rerender()
+
+ // Assert - Should show new content
+ expect(screen.getByText('New query content')).toBeInTheDocument()
+ })
+ })
})
diff --git a/web/app/components/app/annotation/edit-annotation-modal/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
index 2961ce393c..6172a215e4 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/index.tsx
@@ -53,27 +53,39 @@ const EditAnnotationModal: FC = ({
postQuery = editedContent
else
postAnswer = editedContent
- if (!isAdd) {
- await editAnnotation(appId, annotationId, {
- message_id: messageId,
- question: postQuery,
- answer: postAnswer,
- })
- onEdited(postQuery, postAnswer)
- }
- else {
- const res: any = await addAnnotation(appId, {
- question: postQuery,
- answer: postAnswer,
- message_id: messageId,
- })
- onAdded(res.id, res.account?.name, postQuery, postAnswer)
- }
+ try {
+ if (!isAdd) {
+ await editAnnotation(appId, annotationId, {
+ message_id: messageId,
+ question: postQuery,
+ answer: postAnswer,
+ })
+ onEdited(postQuery, postAnswer)
+ }
+ else {
+ const res = await addAnnotation(appId, {
+ question: postQuery,
+ answer: postAnswer,
+ message_id: messageId,
+ })
+ onAdded(res.id, res.account?.name ?? '', postQuery, postAnswer)
+ }
- Toast.notify({
- message: t('common.api.actionSuccess') as string,
- type: 'success',
- })
+ Toast.notify({
+ message: t('common.api.actionSuccess') as string,
+ type: 'success',
+ })
+ }
+ catch (error) {
+ const fallbackMessage = t('common.api.actionFailed') as string
+ const message = error instanceof Error && error.message ? error.message : fallbackMessage
+ Toast.notify({
+ message,
+ type: 'error',
+ })
+ // Re-throw to preserve edit mode behavior for UI components
+ throw error
+ }
}
const [showModal, setShowModal] = useState(false)
diff --git a/web/app/components/app/annotation/empty-element.spec.tsx b/web/app/components/app/annotation/empty-element.spec.tsx
new file mode 100644
index 0000000000..56ebb96121
--- /dev/null
+++ b/web/app/components/app/annotation/empty-element.spec.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import EmptyElement from './empty-element'
+
+describe('EmptyElement', () => {
+ it('should render the empty state copy and supporting icon', () => {
+ const { container } = render()
+
+ expect(screen.getByText('appAnnotation.noData.title')).toBeInTheDocument()
+ expect(screen.getByText('appAnnotation.noData.description')).toBeInTheDocument()
+ expect(container.querySelector('svg')).not.toBeNull()
+ })
+})
diff --git a/web/app/components/app/annotation/filter.spec.tsx b/web/app/components/app/annotation/filter.spec.tsx
new file mode 100644
index 0000000000..47a758b17a
--- /dev/null
+++ b/web/app/components/app/annotation/filter.spec.tsx
@@ -0,0 +1,71 @@
+import type { Mock } from 'vitest'
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Filter, { type QueryParam } from './filter'
+import useSWR from 'swr'
+
+vi.mock('swr', () => ({
+ __esModule: true,
+ default: vi.fn(),
+}))
+
+vi.mock('@/service/log', () => ({
+ fetchAnnotationsCount: vi.fn(),
+}))
+
+const mockUseSWR = useSWR as unknown as Mock
+
+describe('Filter', () => {
+ const appId = 'app-1'
+ const childContent = 'child-content'
+
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ it('should render nothing until annotation count is fetched', () => {
+ mockUseSWR.mockReturnValue({ data: undefined })
+
+ const { container } = render(
+
+ {childContent}
+ ,
+ )
+
+ expect(container.firstChild).toBeNull()
+ expect(mockUseSWR).toHaveBeenCalledWith(
+ { url: `/apps/${appId}/annotations/count` },
+ expect.any(Function),
+ )
+ })
+
+ it('should propagate keyword changes and clearing behavior', () => {
+ mockUseSWR.mockReturnValue({ data: { total: 20 } })
+ const queryParams: QueryParam = { keyword: 'prefill' }
+ const setQueryParams = vi.fn()
+
+ const { container } = render(
+
+ {childContent}
+ ,
+ )
+
+ const input = screen.getByPlaceholderText('common.operation.search') as HTMLInputElement
+ fireEvent.change(input, { target: { value: 'updated' } })
+ expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: 'updated' })
+
+ const clearButton = input.parentElement?.querySelector('div.cursor-pointer') as HTMLElement
+ fireEvent.click(clearButton)
+ expect(setQueryParams).toHaveBeenCalledWith({ ...queryParams, keyword: '' })
+
+ expect(container).toHaveTextContent(childContent)
+ })
+})
diff --git a/web/app/components/app/annotation/header-opts/index.spec.tsx b/web/app/components/app/annotation/header-opts/index.spec.tsx
new file mode 100644
index 0000000000..84a1aa86d5
--- /dev/null
+++ b/web/app/components/app/annotation/header-opts/index.spec.tsx
@@ -0,0 +1,457 @@
+import * as React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ComponentProps } from 'react'
+import HeaderOptions from './index'
+import I18NContext from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import type { AnnotationItemBasic } from '../type'
+import { clearAllAnnotations, fetchExportAnnotationList } from '@/service/annotation'
+
+vi.mock('@headlessui/react', () => {
+ type PopoverContextValue = { open: boolean; setOpen: (open: boolean) => void }
+ type MenuContextValue = { open: boolean; setOpen: (open: boolean) => void }
+ const PopoverContext = React.createContext(null)
+ const MenuContext = React.createContext(null)
+
+ const Popover = ({ children }: { children: React.ReactNode | ((props: { open: boolean }) => React.ReactNode) }) => {
+ const [open, setOpen] = React.useState(false)
+ const value = React.useMemo(() => ({ open, setOpen }), [open])
+ return (
+
+ {typeof children === 'function' ? children({ open }) : children}
+
+ )
+ }
+
+ const PopoverButton = React.forwardRef(({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }, ref: React.Ref) => {
+ const context = React.useContext(PopoverContext)
+ const handleClick = () => {
+ context?.setOpen(!context.open)
+ onClick?.()
+ }
+ return (
+
+ )
+ })
+
+ const PopoverPanel = React.forwardRef(({ children, ...props }: { children: React.ReactNode | ((props: { close: () => void }) => React.ReactNode) }, ref: React.Ref) => {
+ const context = React.useContext(PopoverContext)
+ if (!context?.open) return null
+ const content = typeof children === 'function' ? children({ close: () => context.setOpen(false) }) : children
+ return (
+
+ {content}
+
+ )
+ })
+
+ const Menu = ({ children }: { children: React.ReactNode }) => {
+ const [open, setOpen] = React.useState(false)
+ const value = React.useMemo(() => ({ open, setOpen }), [open])
+ return (
+
+ {children}
+
+ )
+ }
+
+ const MenuButton = ({ onClick, children, ...props }: { onClick?: () => void; children?: React.ReactNode }) => {
+ const context = React.useContext(MenuContext)
+ const handleClick = () => {
+ context?.setOpen(!context.open)
+ onClick?.()
+ }
+ return (
+
+ )
+ }
+
+ const MenuItems = ({ children, ...props }: { children: React.ReactNode }) => {
+ const context = React.useContext(MenuContext)
+ if (!context?.open) return null
+ return (
+
+ {children}
+
+ )
+ }
+
+ return {
+ Dialog: ({ open, children, className }: { open?: boolean; children: React.ReactNode; className?: string }) => {
+ if (open === false) return null
+ return (
+
+ {children}
+
+ )
+ },
+ DialogBackdrop: ({ children, className, onClick }: { children?: React.ReactNode; className?: string; onClick?: () => void }) => (
+
+ {children}
+
+ ),
+ DialogPanel: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ DialogTitle: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ Popover,
+ PopoverButton,
+ PopoverPanel,
+ Menu,
+ MenuButton,
+ MenuItems,
+ Transition: ({ show = true, children }: { show?: boolean; children: React.ReactNode }) => (show ? <>{children} : null),
+ TransitionChild: ({ children }: { children: React.ReactNode }) => <>{children},
+ }
+})
+
+let lastCSVDownloaderProps: Record | undefined
+const mockCSVDownloader = vi.fn(({ children, ...props }) => {
+ lastCSVDownloaderProps = props
+ return (
+
+ {children}
+
+ )
+})
+
+vi.mock('react-papaparse', () => ({
+ useCSVDownloader: () => ({
+ CSVDownloader: (props: any) => mockCSVDownloader(props),
+ Type: { Link: 'link' },
+ }),
+}))
+
+vi.mock('@/service/annotation', () => ({
+ fetchExportAnnotationList: vi.fn(),
+ clearAllAnnotations: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: () => ({
+ plan: {
+ usage: { annotatedResponse: 0 },
+ total: { annotatedResponse: 10 },
+ },
+ enableBilling: false,
+ }),
+}))
+
+vi.mock('@/app/components/billing/annotation-full', () => ({
+ __esModule: true,
+ default: () => ,
+}))
+
+type HeaderOptionsProps = ComponentProps
+
+const renderComponent = (
+ props: Partial = {},
+ locale: string = LanguagesSupported[0] as string,
+) => {
+ const defaultProps: HeaderOptionsProps = {
+ appId: 'test-app-id',
+ onAdd: vi.fn(),
+ onAdded: vi.fn(),
+ controlUpdateList: 0,
+ ...props,
+ }
+
+ return render(
+
+
+ ,
+ )
+}
+
+const openOperationsPopover = async (user: ReturnType) => {
+ const trigger = document.querySelector('button.btn.btn-secondary') as HTMLButtonElement
+ expect(trigger).toBeTruthy()
+ await user.click(trigger)
+}
+
+const expandExportMenu = async (user: ReturnType) => {
+ await openOperationsPopover(user)
+ const exportLabel = await screen.findByText('appAnnotation.table.header.bulkExport')
+ const exportButton = exportLabel.closest('button') as HTMLButtonElement
+ expect(exportButton).toBeTruthy()
+ await user.click(exportButton)
+}
+
+const getExportButtons = async () => {
+ const csvLabel = await screen.findByText('CSV')
+ const jsonLabel = await screen.findByText('JSONL')
+ const csvButton = csvLabel.closest('button') as HTMLButtonElement
+ const jsonButton = jsonLabel.closest('button') as HTMLButtonElement
+ expect(csvButton).toBeTruthy()
+ expect(jsonButton).toBeTruthy()
+ return {
+ csvButton,
+ jsonButton,
+ }
+}
+
+const clickOperationAction = async (
+ user: ReturnType,
+ translationKey: string,
+) => {
+ const label = await screen.findByText(translationKey)
+ const button = label.closest('button') as HTMLButtonElement
+ expect(button).toBeTruthy()
+ await user.click(button)
+}
+
+const mockAnnotations: AnnotationItemBasic[] = [
+ {
+ question: 'Question 1',
+ answer: 'Answer 1',
+ },
+]
+
+const mockedFetchAnnotations = vi.mocked(fetchExportAnnotationList)
+const mockedClearAllAnnotations = vi.mocked(clearAllAnnotations)
+
+describe('HeaderOptions', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ vi.useRealTimers()
+ mockCSVDownloader.mockClear()
+ lastCSVDownloaderProps = undefined
+ mockedFetchAnnotations.mockResolvedValue({ data: [] })
+ })
+
+ it('should fetch annotations on mount and render enabled export actions when data exist', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ renderComponent()
+
+ await waitFor(() => {
+ expect(mockedFetchAnnotations).toHaveBeenCalledWith('test-app-id')
+ })
+
+ await expandExportMenu(user)
+
+ const { csvButton, jsonButton } = await getExportButtons()
+
+ expect(csvButton).not.toBeDisabled()
+ expect(jsonButton).not.toBeDisabled()
+
+ await waitFor(() => {
+ expect(lastCSVDownloaderProps).toMatchObject({
+ bom: true,
+ filename: 'annotations-en-US',
+ type: 'link',
+ data: [
+ ['Question', 'Answer'],
+ ['Question 1', 'Answer 1'],
+ ],
+ })
+ })
+ })
+
+ it('should disable export actions when there are no annotations', async () => {
+ const user = userEvent.setup()
+ renderComponent()
+
+ await expandExportMenu(user)
+
+ const { csvButton, jsonButton } = await getExportButtons()
+
+ expect(csvButton).toBeDisabled()
+ expect(jsonButton).toBeDisabled()
+
+ expect(lastCSVDownloaderProps).toMatchObject({
+ data: [['Question', 'Answer']],
+ })
+ })
+
+ it('should open the add annotation modal and forward the onAdd callback', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ const onAdd = vi.fn().mockResolvedValue(undefined)
+ renderComponent({ onAdd })
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalled())
+
+ await user.click(
+ screen.getByRole('button', { name: 'appAnnotation.table.header.addAnnotation' }),
+ )
+
+ await screen.findByText('appAnnotation.addModal.title')
+ const questionInput = screen.getByPlaceholderText('appAnnotation.addModal.queryPlaceholder')
+ const answerInput = screen.getByPlaceholderText('appAnnotation.addModal.answerPlaceholder')
+
+ await user.type(questionInput, 'Integration question')
+ await user.type(answerInput, 'Integration answer')
+ await user.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+ await waitFor(() => {
+ expect(onAdd).toHaveBeenCalledWith({
+ question: 'Integration question',
+ answer: 'Integration answer',
+ })
+ })
+ })
+
+ it('should allow bulk import through the batch modal', async () => {
+ const user = userEvent.setup()
+ const onAdded = vi.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.bulkImport')
+
+ expect(await screen.findByText('appAnnotation.batchModal.title')).toBeInTheDocument()
+ await user.click(
+ screen.getByRole('button', { name: 'appAnnotation.batchModal.cancel' }),
+ )
+ expect(onAdded).not.toHaveBeenCalled()
+ })
+
+ it('should trigger JSONL download with locale-specific filename', async () => {
+ mockedFetchAnnotations.mockResolvedValue({ data: mockAnnotations })
+ const user = userEvent.setup()
+ const originalCreateElement = document.createElement.bind(document)
+ const anchor = originalCreateElement('a') as HTMLAnchorElement
+ const clickSpy = vi.spyOn(anchor, 'click').mockImplementation(vi.fn())
+ const createElementSpy = vi.spyOn(document, 'createElement')
+ .mockImplementation((tagName: Parameters[0]) => {
+ if (tagName === 'a')
+ return anchor
+ return originalCreateElement(tagName)
+ })
+ let capturedBlob: Blob | null = null
+ const objectURLSpy = vi.spyOn(URL, 'createObjectURL')
+ .mockImplementation((blob) => {
+ capturedBlob = blob as Blob
+ return 'blob://mock-url'
+ })
+ const revokeSpy = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(vi.fn())
+
+ renderComponent({}, LanguagesSupported[1] as string)
+
+ await expandExportMenu(user)
+
+ await waitFor(() => expect(mockCSVDownloader).toHaveBeenCalled())
+
+ const { jsonButton } = await getExportButtons()
+ await user.click(jsonButton)
+
+ expect(createElementSpy).toHaveBeenCalled()
+ expect(anchor.download).toBe(`annotations-${LanguagesSupported[1]}.jsonl`)
+ expect(clickSpy).toHaveBeenCalled()
+ expect(revokeSpy).toHaveBeenCalledWith('blob://mock-url')
+
+ // Verify the blob was created with correct content
+ expect(capturedBlob).toBeInstanceOf(Blob)
+ expect(capturedBlob!.type).toBe('application/jsonl')
+
+ const blobContent = await new Promise((resolve) => {
+ const reader = new FileReader()
+ reader.onload = () => resolve(reader.result as string)
+ reader.readAsText(capturedBlob!)
+ })
+ const lines = blobContent.trim().split('\n')
+ expect(lines).toHaveLength(1)
+ expect(JSON.parse(lines[0])).toEqual({
+ messages: [
+ { role: 'system', content: '' },
+ { role: 'user', content: 'Question 1' },
+ { role: 'assistant', content: 'Answer 1' },
+ ],
+ })
+
+ clickSpy.mockRestore()
+ createElementSpy.mockRestore()
+ objectURLSpy.mockRestore()
+ revokeSpy.mockRestore()
+ })
+
+ it('should clear all annotations when confirmation succeeds', async () => {
+ mockedClearAllAnnotations.mockResolvedValue(undefined)
+ const user = userEvent.setup()
+ const onAdded = vi.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+
+ await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+ const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+ await user.click(confirmButton)
+
+ await waitFor(() => {
+ expect(mockedClearAllAnnotations).toHaveBeenCalledWith('test-app-id')
+ expect(onAdded).toHaveBeenCalled()
+ })
+ })
+
+ it('should handle clear all failures gracefully', async () => {
+ const consoleSpy = vi.spyOn(console, 'error').mockImplementation(vi.fn())
+ mockedClearAllAnnotations.mockRejectedValue(new Error('network'))
+ const user = userEvent.setup()
+ const onAdded = vi.fn()
+ renderComponent({ onAdded })
+
+ await openOperationsPopover(user)
+ await clickOperationAction(user, 'appAnnotation.table.header.clearAll')
+ await screen.findByText('appAnnotation.table.header.clearAllConfirm')
+ const confirmButton = screen.getByRole('button', { name: 'common.operation.confirm' })
+ await user.click(confirmButton)
+
+ await waitFor(() => {
+ expect(mockedClearAllAnnotations).toHaveBeenCalled()
+ expect(onAdded).not.toHaveBeenCalled()
+ expect(consoleSpy).toHaveBeenCalled()
+ })
+
+ consoleSpy.mockRestore()
+ })
+
+ it('should refetch annotations when controlUpdateList changes', async () => {
+ const view = renderComponent({ controlUpdateList: 0 })
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(1))
+
+ view.rerender(
+
+
+ ,
+ )
+
+ await waitFor(() => expect(mockedFetchAnnotations).toHaveBeenCalledTimes(2))
+ })
+})
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 024f75867c..5f8ef658e7 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -17,7 +17,7 @@ import Button from '../../../base/button'
import AddAnnotationModal from '../add-annotation-modal'
import type { AnnotationItemBasic } from '../type'
import BatchAddModal from '../batch-add-annotation-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import CustomPopover from '@/app/components/base/popover'
import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/app/annotation/index.spec.tsx b/web/app/components/app/annotation/index.spec.tsx
new file mode 100644
index 0000000000..43c718d235
--- /dev/null
+++ b/web/app/components/app/annotation/index.spec.tsx
@@ -0,0 +1,242 @@
+import type { Mock } from 'vitest'
+import React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import Annotation from './index'
+import type { AnnotationItem } from './type'
+import { JobStatus } from './type'
+import { type App, AppModeEnum } from '@/types/app'
+import {
+ addAnnotation,
+ delAnnotation,
+ delAnnotations,
+ fetchAnnotationConfig,
+ fetchAnnotationList,
+ queryAnnotationJobStatus,
+} from '@/service/annotation'
+import { useProviderContext } from '@/context/provider-context'
+import Toast from '@/app/components/base/toast'
+
+vi.mock('@/app/components/base/toast', () => ({
+ __esModule: true,
+ default: { notify: vi.fn() },
+}))
+
+vi.mock('ahooks', () => ({
+ useDebounce: (value: any) => value,
+}))
+
+vi.mock('@/service/annotation', () => ({
+ addAnnotation: vi.fn(),
+ delAnnotation: vi.fn(),
+ delAnnotations: vi.fn(),
+ fetchAnnotationConfig: vi.fn(),
+ editAnnotation: vi.fn(),
+ fetchAnnotationList: vi.fn(),
+ queryAnnotationJobStatus: vi.fn(),
+ updateAnnotationScore: vi.fn(),
+ updateAnnotationStatus: vi.fn(),
+}))
+
+vi.mock('@/context/provider-context', () => ({
+ useProviderContext: vi.fn(),
+}))
+
+vi.mock('./filter', () => ({
+ default: ({ children }: { children: React.ReactNode }) => (
+ {children}
+ ),
+}))
+
+vi.mock('./empty-element', () => ({
+ default: () => ,
+}))
+
+vi.mock('./header-opts', () => ({
+ default: (props: any) => (
+
+
+
+ ),
+}))
+
+let latestListProps: any
+
+vi.mock('./list', () => ({
+ default: (props: any) => {
+ latestListProps = props
+ if (!props.list.length)
+ return
+ return (
+
+
+
+
+
+ )
+ },
+}))
+
+vi.mock('./view-annotation-modal', () => ({
+ default: (props: any) => {
+ if (!props.isShow)
+ return null
+ return (
+
+
{props.item.question}
+
+
+
,
+ )
+
+ fireEvent.click(screen.getByText(item.question))
+
+ expect(onView).toHaveBeenCalledWith(item)
+ expect(mockFormatTime).toHaveBeenCalledWith(item.created_at, 'appLog.dateTimeFormat')
+ })
+
+ it('should toggle single and bulk selection states', () => {
+ const list = [createAnnotation({ id: 'a', question: 'A' }), createAnnotation({ id: 'b', question: 'B' })]
+ const onSelectedIdsChange = vi.fn()
+ const { container, rerender } = render(
+
,
+ )
+
+ const checkboxes = getCheckboxes(container)
+ fireEvent.click(checkboxes[1])
+ expect(onSelectedIdsChange).toHaveBeenCalledWith(['a'])
+
+ rerender(
+
,
+ )
+ const updatedCheckboxes = getCheckboxes(container)
+ fireEvent.click(updatedCheckboxes[1])
+ expect(onSelectedIdsChange).toHaveBeenCalledWith([])
+
+ fireEvent.click(updatedCheckboxes[0])
+ expect(onSelectedIdsChange).toHaveBeenCalledWith(['a', 'b'])
+ })
+
+ it('should confirm before removing an annotation and expose batch actions', async () => {
+ const item = createAnnotation({ id: 'to-delete', question: 'Delete me' })
+ const onRemove = vi.fn()
+ render(
+
,
+ )
+
+ const row = screen.getByText(item.question).closest('tr') as HTMLTableRowElement
+ const actionButtons = within(row).getAllByRole('button')
+ fireEvent.click(actionButtons[1])
+
+ expect(await screen.findByText('appDebug.feature.annotation.removeConfirm')).toBeInTheDocument()
+ const confirmButton = await screen.findByRole('button', { name: 'common.operation.confirm' })
+ fireEvent.click(confirmButton)
+ expect(onRemove).toHaveBeenCalledWith(item.id)
+
+ expect(screen.getByText('appAnnotation.batchAction.selected')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 4135b4362e..62a0c50e60 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -7,7 +7,7 @@ import type { AnnotationItem } from './type'
import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
import ActionButton from '@/app/components/base/action-button'
import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import Checkbox from '@/app/components/base/checkbox'
import BatchAction from './batch-action'
diff --git a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx
index 347ba7880b..77648ace02 100644
--- a/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx
+++ b/web/app/components/app/annotation/remove-annotation-confirm-modal/index.spec.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import RemoveAnnotationConfirmModal from './index'
-jest.mock('react-i18next', () => ({
+vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record = {
@@ -16,7 +16,7 @@ jest.mock('react-i18next', () => ({
}))
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
describe('RemoveAnnotationConfirmModal', () => {
@@ -27,8 +27,8 @@ describe('RemoveAnnotationConfirmModal', () => {
render(
,
)
@@ -43,8 +43,8 @@ describe('RemoveAnnotationConfirmModal', () => {
render(
,
)
@@ -56,8 +56,8 @@ describe('RemoveAnnotationConfirmModal', () => {
// User interactions with confirm and cancel buttons
describe('Interactions', () => {
test('should call onHide when cancel button is clicked', () => {
- const onHide = jest.fn()
- const onRemove = jest.fn()
+ const onHide = vi.fn()
+ const onRemove = vi.fn()
// Arrange
render(
{
})
test('should call onRemove when confirm button is clicked', () => {
- const onHide = jest.fn()
- const onRemove = jest.fn()
+ const onHide = vi.fn()
+ const onRemove = vi.fn()
// Arrange
render(
'formatted-time')
+
+vi.mock('@/hooks/use-timestamp', () => ({
+ __esModule: true,
+ default: () => ({
+ formatTime: mockFormatTime,
+ }),
+}))
+
+vi.mock('@/service/annotation', () => ({
+ fetchHitHistoryList: vi.fn(),
+}))
+
+vi.mock('../edit-annotation-modal/edit-item', () => {
+ const EditItemType = {
+ Query: 'query',
+ Answer: 'answer',
+ }
+ return {
+ __esModule: true,
+ default: ({ type, content, onSave }: { type: string; content: string; onSave: (value: string) => void }) => (
+
+
{content}
+
+
{children}
+ )
+ DialogComponent.Panel = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const DialogTitle = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const DialogDescription = ({ children, className, ...rest }: any) => (
+ {children}
+ )
+ const TransitionChild = ({ children }: any) => (
+ <>{typeof children === 'function' ? children({}) : children}
+ )
+ const Transition = ({ show = true, children }: any) => (
+ show ? <>{typeof children === 'function' ? children({}) : children} : null
+ )
+ Transition.Child = TransitionChild
+ return {
+ Dialog: DialogComponent,
+ Transition,
+ DialogTitle,
+ Description: DialogDescription,
+ }
+})
+
+vi.mock('ahooks', async (importOriginal) => {
+ const actual = await importOriginal()
+ return {
+ ...actual,
+ useDebounce: (value: unknown) => value,
+ }
+})
+
+const createGroup = (overrides: Partial = {}): AccessControlGroup => ({
+ id: 'group-1',
+ name: 'Group One',
+ groupSize: 5,
+ ...overrides,
+} as AccessControlGroup)
+
+const createMember = (overrides: Partial = {}): AccessControlAccount => ({
+ id: 'member-1',
+ name: 'Member One',
+ email: 'member@example.com',
+ avatar: '',
+ avatarUrl: '',
+ ...overrides,
+} as AccessControlAccount)
+
+const baseGroup = createGroup()
+const baseMember = createMember()
+const groupSubject: Subject = {
+ subjectId: baseGroup.id,
+ subjectType: SubjectType.GROUP,
+ groupData: baseGroup,
+} as Subject
+const memberSubject: Subject = {
+ subjectId: baseMember.id,
+ subjectType: SubjectType.ACCOUNT,
+ accountData: baseMember,
+} as Subject
+
+const resetAccessControlStore = () => {
+ useAccessControlStore.setState({
+ appId: '',
+ specificGroups: [],
+ specificMembers: [],
+ currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+ selectedGroupsForBreadcrumb: [],
+ })
+}
+
+const resetGlobalStore = () => {
+ useGlobalPublicStore.setState({
+ systemFeatures: defaultSystemFeatures,
+ isGlobalPending: false,
+ })
+}
+
+beforeAll(() => {
+ class MockIntersectionObserver {
+ observe = vi.fn(() => undefined)
+ disconnect = vi.fn(() => undefined)
+ unobserve = vi.fn(() => undefined)
+ }
+ // @ts-expect-error jsdom does not implement IntersectionObserver
+ globalThis.IntersectionObserver = MockIntersectionObserver
+})
+
+beforeEach(() => {
+ vi.clearAllMocks()
+ resetAccessControlStore()
+ resetGlobalStore()
+ mockMutateAsync.mockResolvedValue(undefined)
+ mockUseUpdateAccessMode.mockReturnValue({
+ isPending: false,
+ mutateAsync: mockMutateAsync,
+ })
+ mockUseAppWhiteListSubjects.mockReturnValue({
+ isPending: false,
+ data: {
+ groups: [baseGroup],
+ members: [baseMember],
+ },
+ })
+ mockUseSearchForWhiteListCandidates.mockReturnValue({
+ isLoading: false,
+ isFetchingNextPage: false,
+ fetchNextPage: vi.fn(),
+ data: { pages: [{ currPage: 1, subjects: [groupSubject, memberSubject], hasMore: false }] },
+ })
+})
+
+// AccessControlItem handles selected vs. unselected styling and click state updates
+describe('AccessControlItem', () => {
+ it('should update current menu when selecting a different access type', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.PUBLIC })
+ render(
+
+ Organization Only
+ ,
+ )
+
+ const option = screen.getByText('Organization Only').parentElement as HTMLElement
+ expect(option).toHaveClass('cursor-pointer')
+
+ fireEvent.click(option)
+
+ expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+ })
+
+ it('should keep current menu when clicking the selected access type', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+ render(
+
+ Organization Only
+ ,
+ )
+
+ const option = screen.getByText('Organization Only').parentElement as HTMLElement
+ fireEvent.click(option)
+
+ expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.ORGANIZATION)
+ })
+})
+
+// AccessControlDialog renders a headless UI dialog with a manual close control
+describe('AccessControlDialog', () => {
+ it('should render dialog content when visible', () => {
+ render(
+
+ Dialog Content
+ ,
+ )
+
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
+ expect(screen.getByText('Dialog Content')).toBeInTheDocument()
+ })
+
+ it('should trigger onClose when clicking the close control', async () => {
+ const handleClose = vi.fn()
+ const { container } = render(
+
+ Dialog Content
+ ,
+ )
+
+ const closeButton = container.querySelector('.absolute.right-5.top-5') as HTMLElement
+ fireEvent.click(closeButton)
+
+ await waitFor(() => {
+ expect(handleClose).toHaveBeenCalledTimes(1)
+ })
+ })
+})
+
+// SpecificGroupsOrMembers syncs store state with fetched data and supports removals
+describe('SpecificGroupsOrMembers', () => {
+ it('should render collapsed view when not in specific selection mode', () => {
+ useAccessControlStore.setState({ currentMenu: AccessMode.ORGANIZATION })
+
+ render()
+
+ expect(screen.getByText('app.accessControlDialog.accessItems.specific')).toBeInTheDocument()
+ expect(screen.queryByText(baseGroup.name)).not.toBeInTheDocument()
+ })
+
+ it('should show loading state while pending', async () => {
+ useAccessControlStore.setState({ appId: 'app-1', currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS })
+ mockUseAppWhiteListSubjects.mockReturnValue({
+ isPending: true,
+ data: undefined,
+ })
+
+ const { container } = render()
+
+ await waitFor(() => {
+ expect(container.querySelector('.spin-animation')).toBeInTheDocument()
+ })
+ })
+
+ it('should render fetched groups and members and support removal', async () => {
+ useAccessControlStore.setState({ appId: 'app-1', currentMenu: AccessMode.SPECIFIC_GROUPS_MEMBERS })
+
+ render()
+
+ await waitFor(() => {
+ expect(screen.getByText(baseGroup.name)).toBeInTheDocument()
+ expect(screen.getByText(baseMember.name)).toBeInTheDocument()
+ })
+
+ const groupItem = screen.getByText(baseGroup.name).closest('div')
+ const groupRemove = groupItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+ fireEvent.click(groupRemove)
+
+ await waitFor(() => {
+ expect(screen.queryByText(baseGroup.name)).not.toBeInTheDocument()
+ })
+
+ const memberItem = screen.getByText(baseMember.name).closest('div')
+ const memberRemove = memberItem?.querySelector('.h-4.w-4.cursor-pointer') as HTMLElement
+ fireEvent.click(memberRemove)
+
+ await waitFor(() => {
+ expect(screen.queryByText(baseMember.name)).not.toBeInTheDocument()
+ })
+ })
+})
+
+// AddMemberOrGroupDialog renders search results and updates store selections
+describe('AddMemberOrGroupDialog', () => {
+ it('should open search popover and display candidates', async () => {
+ const user = userEvent.setup()
+
+ render()
+
+ await user.click(screen.getByText('common.operation.add'))
+
+ expect(screen.getByPlaceholderText('app.accessControlDialog.operateGroupAndMember.searchPlaceholder')).toBeInTheDocument()
+ expect(screen.getByText(baseGroup.name)).toBeInTheDocument()
+ expect(screen.getByText(baseMember.name)).toBeInTheDocument()
+ })
+
+ it('should allow selecting members and expanding groups', async () => {
+ const user = userEvent.setup()
+ render()
+
+ await user.click(screen.getByText('common.operation.add'))
+
+ const expandButton = screen.getByText('app.accessControlDialog.operateGroupAndMember.expand')
+ await user.click(expandButton)
+ expect(useAccessControlStore.getState().selectedGroupsForBreadcrumb).toEqual([baseGroup])
+
+ const memberLabel = screen.getByText(baseMember.name)
+ const memberCheckbox = memberLabel.parentElement?.previousElementSibling as HTMLElement
+ fireEvent.click(memberCheckbox)
+
+ expect(useAccessControlStore.getState().specificMembers).toEqual([baseMember])
+ })
+
+ it('should show empty state when no candidates are returned', async () => {
+ mockUseSearchForWhiteListCandidates.mockReturnValue({
+ isLoading: false,
+ isFetchingNextPage: false,
+ fetchNextPage: vi.fn(),
+ data: { pages: [] },
+ })
+
+ const user = userEvent.setup()
+ render()
+
+ await user.click(screen.getByText('common.operation.add'))
+
+ expect(screen.getByText('app.accessControlDialog.operateGroupAndMember.noResult')).toBeInTheDocument()
+ })
+})
+
+// AccessControl integrates dialog, selection items, and confirm flow
+describe('AccessControl', () => {
+ it('should initialize menu from app and call update on confirm', async () => {
+ const onClose = vi.fn()
+ const onConfirm = vi.fn()
+ const toastSpy = vi.spyOn(Toast, 'notify').mockReturnValue({})
+ useAccessControlStore.setState({
+ specificGroups: [baseGroup],
+ specificMembers: [baseMember],
+ })
+ const app = {
+ id: 'app-id-1',
+ access_mode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+ } as App
+
+ render(
+ ,
+ )
+
+ await waitFor(() => {
+ expect(useAccessControlStore.getState().currentMenu).toBe(AccessMode.SPECIFIC_GROUPS_MEMBERS)
+ })
+
+ fireEvent.click(screen.getByText('common.operation.confirm'))
+
+ await waitFor(() => {
+ expect(mockMutateAsync).toHaveBeenCalledWith({
+ appId: app.id,
+ accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
+ subjects: [
+ { subjectId: baseGroup.id, subjectType: SubjectType.GROUP },
+ { subjectId: baseMember.id, subjectType: SubjectType.ACCOUNT },
+ ],
+ })
+ expect(toastSpy).toHaveBeenCalled()
+ expect(onConfirm).toHaveBeenCalled()
+ })
+ })
+
+ it('should expose the external members tip when SSO is disabled', () => {
+ const app = {
+ id: 'app-id-2',
+ access_mode: AccessMode.PUBLIC,
+ } as App
+
+ render(
+ ,
+ )
+
+ expect(screen.getByText('app.accessControlDialog.accessItems.external')).toBeInTheDocument()
+ expect(screen.getByText('app.accessControlDialog.accessItems.anyone')).toBeInTheDocument()
+ })
+})
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index e9519aeedf..17263fdd46 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -11,7 +11,7 @@ import Input from '../../base/input'
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
import Loading from '../../base/loading'
import useAccessControlStore from '../../../../context/access-control-store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import { useSearchForWhiteListCandidates } from '@/service/access-control'
import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
import { SubjectType } from '@/models/access-control'
@@ -32,7 +32,7 @@ export default function AddMemberOrGroupDialog() {
const anchorRef = useRef(null)
useEffect(() => {
- const hasMore = data?.pages?.[0].hasMore ?? false
+ const hasMore = data?.pages?.[0]?.hasMore ?? false
let observer: IntersectionObserver | undefined
if (anchorRef.current) {
observer = new IntersectionObserver((entries) => {
@@ -106,7 +106,7 @@ function SelectedGroupsBreadCrumb() {
setSelectedGroupsForBreadcrumb([])
}, [setSelectedGroupsForBreadcrumb])
return
-
0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}
+
0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}
{selectedGroupsForBreadcrumb.map((group, index) => {
return
/
@@ -198,7 +198,7 @@ type BaseItemProps = {
children: React.ReactNode
}
function BaseItem({ children, className }: BaseItemProps) {
- return
+ return
{children}
}
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 2535de6654..154bacc361 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,6 +1,6 @@
import type { HTMLProps, PropsWithChildren } from 'react'
import { RiArrowRightUpLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
export type SuggestedActionProps = PropsWithChildren
& {
icon?: React.ReactNode
@@ -19,11 +19,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
href={disabled ? undefined : link}
target='_blank'
rel='noreferrer'
- className={classNames(
- 'flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+ className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent',
- className,
- )}
+ className)}
onClick={handleClick}
{...props}
>
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index ec5ab96d76..c9ebfefbe5 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -1,7 +1,7 @@
'use client'
import type { FC, ReactNode } from 'react'
import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
export type IFeaturePanelProps = {
className?: string
diff --git a/web/app/components/app/configuration/base/group-name/index.spec.tsx b/web/app/components/app/configuration/base/group-name/index.spec.tsx
index ac504247f2..be698c3233 100644
--- a/web/app/components/app/configuration/base/group-name/index.spec.tsx
+++ b/web/app/components/app/configuration/base/group-name/index.spec.tsx
@@ -3,7 +3,7 @@ import GroupName from './index'
describe('GroupName', () => {
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
describe('Rendering', () => {
diff --git a/web/app/components/app/configuration/base/operation-btn/index.spec.tsx b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
index 615a1769e8..5a16135c55 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.spec.tsx
@@ -1,7 +1,7 @@
import { fireEvent, render, screen } from '@testing-library/react'
import OperationBtn from './index'
-jest.mock('@remixicon/react', () => ({
+vi.mock('@remixicon/react', () => ({
RiAddLine: (props: { className?: string }) => (
),
@@ -12,7 +12,7 @@ jest.mock('@remixicon/react', () => ({
describe('OperationBtn', () => {
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
// Rendering icons and translation labels
@@ -29,7 +29,7 @@ describe('OperationBtn', () => {
})
it('should render add icon when type is add', () => {
// Arrange
- const onClick = jest.fn()
+ const onClick = vi.fn()
// Act
render()
@@ -57,7 +57,7 @@ describe('OperationBtn', () => {
describe('Interactions', () => {
it('should execute click handler when button is clicked', () => {
// Arrange
- const onClick = jest.fn()
+ const onClick = vi.fn()
render()
// Act
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index aba35cded2..db19d2976e 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -6,7 +6,7 @@ import {
RiAddLine,
RiEditLine,
} from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import { noop } from 'lodash-es'
export type IOperationBtnProps = {
diff --git a/web/app/components/app/configuration/base/var-highlight/index.spec.tsx b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
index 9e84aa09ac..77fe1f2b28 100644
--- a/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
+++ b/web/app/components/app/configuration/base/var-highlight/index.spec.tsx
@@ -3,7 +3,7 @@ import VarHighlight, { varHighlightHTML } from './index'
describe('VarHighlight', () => {
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
// Rendering highlighted variable tags
@@ -19,7 +19,9 @@ describe('VarHighlight', () => {
expect(screen.getByText('userInput')).toBeInTheDocument()
expect(screen.getAllByText('{{')[0]).toBeInTheDocument()
expect(screen.getAllByText('}}')[0]).toBeInTheDocument()
- expect(container.firstChild).toHaveClass('item')
+ // CSS modules add a hash to class names, so we check that the class attribute contains 'item'
+ const firstChild = container.firstChild as HTMLElement
+ expect(firstChild.className).toContain('item')
})
it('should apply custom class names when provided', () => {
@@ -56,7 +58,9 @@ describe('VarHighlight', () => {
const html = varHighlightHTML(props)
// Assert
- expect(html).toContain('class="item text-primary')
+ // CSS modules add a hash to class names, so the class attribute may contain _item_xxx
+ expect(html).toContain('text-primary')
+ expect(html).toContain('item')
})
})
})
diff --git a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
index d625e9fb72..accbcf9f5d 100644
--- a/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/cannot-query-dataset.spec.tsx
@@ -4,7 +4,7 @@ import CannotQueryDataset from './cannot-query-dataset'
describe('CannotQueryDataset WarningMask', () => {
test('should render dataset warning copy and action button', () => {
- const onConfirm = jest.fn()
+ const onConfirm = vi.fn()
render()
expect(screen.getByText('appDebug.feature.dataSet.queryVariable.unableToQueryDataSet')).toBeInTheDocument()
@@ -13,7 +13,7 @@ describe('CannotQueryDataset WarningMask', () => {
})
test('should invoke onConfirm when OK button clicked', () => {
- const onConfirm = jest.fn()
+ const onConfirm = vi.fn()
render()
fireEvent.click(screen.getByRole('button', { name: 'appDebug.feature.dataSet.queryVariable.ok' }))
diff --git a/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
index a968bde272..0db857d7c4 100644
--- a/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
+++ b/web/app/components/app/configuration/base/warning-mask/formatting-changed.spec.tsx
@@ -4,8 +4,8 @@ import FormattingChanged from './formatting-changed'
describe('FormattingChanged WarningMask', () => {
test('should display translation text and both actions', () => {
- const onConfirm = jest.fn()
- const onCancel = jest.fn()
+ const onConfirm = vi.fn()
+ const onCancel = vi.fn()
render(
{
})
test('should call callbacks when buttons are clicked', () => {
- const onConfirm = jest.fn()
- const onCancel = jest.fn()
+ const onConfirm = vi.fn()
+ const onCancel = vi.fn()
render(
{
test('should show default title when trial not finished', () => {
- render()
+ render()
expect(screen.getByText('appDebug.notSetAPIKey.title')).toBeInTheDocument()
expect(screen.getByText('appDebug.notSetAPIKey.description')).toBeInTheDocument()
})
test('should show trail finished title when flag is true', () => {
- render()
+ render()
expect(screen.getByText('appDebug.notSetAPIKey.trailFinished')).toBeInTheDocument()
})
test('should call onSetting when primary button clicked', () => {
- const onSetting = jest.fn()
+ const onSetting = vi.fn()
render()
fireEvent.click(screen.getByRole('button', { name: 'appDebug.notSetAPIKey.settingBtn' }))
diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 5bf2f177ff..6492864ce2 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
@@ -14,7 +14,7 @@ import s from './style.module.css'
import MessageTypeSelector from './message-type-selector'
import ConfirmAddVar from './confirm-add-var'
import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
import type { PromptRole, PromptVariable } from '@/models/debug'
import {
Copy,
diff --git a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
index 211b43c5ba..2c15a2b9b4 100644
--- a/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/confirm-add-var/index.spec.tsx
@@ -2,18 +2,18 @@ import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import ConfirmAddVar from './index'
-jest.mock('../../base/var-highlight', () => ({
+vi.mock('../../base/var-highlight', () => ({
__esModule: true,
default: ({ name }: { name: string }) => {name},
}))
describe('ConfirmAddVar', () => {
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
it('should render variable names', () => {
- render()
+ render()
const highlights = screen.getAllByTestId('var-highlight')
expect(highlights).toHaveLength(2)
@@ -22,9 +22,9 @@ describe('ConfirmAddVar', () => {
})
it('should trigger cancel actions', () => {
- const onConfirm = jest.fn()
- const onCancel = jest.fn()
- render()
+ const onConfirm = vi.fn()
+ const onCancel = vi.fn()
+ render()
fireEvent.click(screen.getByText('common.operation.cancel'))
@@ -32,9 +32,9 @@ describe('ConfirmAddVar', () => {
})
it('should trigger confirm actions', () => {
- const onConfirm = jest.fn()
- const onCancel = jest.fn()
- render()
+ const onConfirm = vi.fn()
+ const onCancel = vi.fn()
+ render()
fireEvent.click(screen.getByText('common.operation.add'))
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
index 2e75cd62ca..a0175dc710 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.spec.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
import EditModal from './edit-modal'
import type { ConversationHistoriesRole } from '@/models/debug'
-jest.mock('@/app/components/base/modal', () => ({
+vi.mock('@/app/components/base/modal', () => ({
__esModule: true,
default: ({ children }: { children: React.ReactNode }) => {children}
,
}))
@@ -15,19 +15,19 @@ describe('Conversation history edit modal', () => {
}
beforeEach(() => {
- jest.clearAllMocks()
+ vi.clearAllMocks()
})
it('should render provided prefixes', () => {
- render()
+ render()
expect(screen.getByDisplayValue('user')).toBeInTheDocument()
expect(screen.getByDisplayValue('assistant')).toBeInTheDocument()
})
it('should update prefixes and save changes', () => {
- const onSave = jest.fn()
- render()
+ const onSave = vi.fn()
+ render()
fireEvent.change(screen.getByDisplayValue('user'), { target: { value: 'member' } })
fireEvent.change(screen.getByDisplayValue('assistant'), { target: { value: 'helper' } })
@@ -40,8 +40,8 @@ describe('Conversation history edit modal', () => {
})
it('should call close handler', () => {
- const onClose = jest.fn()
- render()
+ const onClose = vi.fn()
+ render()
fireEvent.click(screen.getByText('common.operation.cancel'))
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
index c92bb48e4a..eaae6bb5b9 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
+++ b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.spec.tsx
@@ -2,12 +2,12 @@ import React from 'react'
import { render, screen } from '@testing-library/react'
import HistoryPanel from './history-panel'
-const mockDocLink = jest.fn(() => 'doc-link')
-jest.mock('@/context/i18n', () => ({
+const mockDocLink = vi.fn(() => 'doc-link')
+vi.mock('@/context/i18n', () => ({
useDocLink: () => mockDocLink,
}))
-jest.mock('@/app/components/app/configuration/base/operation-btn', () => ({
+vi.mock('@/app/components/app/configuration/base/operation-btn', () => ({
__esModule: true,
default: ({ onClick }: { onClick: () => void }) => (