test: add unit tests for base components (#32818)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>

web/app/components/base/features/__tests__/context.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { useContext } from 'react'
-import { FeaturesContext, FeaturesProvider } from './context'
+import { FeaturesContext, FeaturesProvider } from '../context'
 
 const TestConsumer = () => {
   const store = useContext(FeaturesContext)

web/app/components/base/features/__tests__/hooks.spec.ts

@@ -1,8 +1,8 @@
 import { renderHook } from '@testing-library/react'
 import * as React from 'react'
-import { FeaturesContext } from './context'
-import { useFeatures, useFeaturesStore } from './hooks'
-import { createFeaturesStore } from './store'
+import { FeaturesContext } from '../context'
+import { useFeatures, useFeaturesStore } from '../hooks'
+import { createFeaturesStore } from '../store'
 
 describe('useFeatures', () => {
   it('should return selected state from the store when useFeatures is called with selector', () => {

web/app/components/base/features/__tests__/store.spec.ts

@@ -1,5 +1,5 @@
 import { Resolution, TransferMethod } from '@/types/app'
-import { createFeaturesStore } from './store'
+import { createFeaturesStore } from '../store'
 
 describe('createFeaturesStore', () => {
   describe('Default State', () => {

web/app/components/base/features/new-feature-panel/__tests__/citation.spec.tsx

@@ -1,8 +1,8 @@
-import type { OnFeaturesChange } from '../types'
+import type { OnFeaturesChange } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { FeaturesProvider } from '../context'
-import Citation from './citation'
+import { FeaturesProvider } from '../../context'
+import Citation from '../citation'
 
 const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
   return render(

web/app/components/base/features/new-feature-panel/__tests__/dialog-wrapper.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import DialogWrapper from './dialog-wrapper'
+import DialogWrapper from '../dialog-wrapper'
 
 describe('DialogWrapper', () => {
   beforeEach(() => {

web/app/components/base/features/new-feature-panel/__tests__/feature-bar.spec.tsx

@@ -1,7 +1,7 @@
-import type { Features } from '../types'
+import type { Features } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../context'
-import FeatureBar from './feature-bar'
+import { FeaturesProvider } from '../../context'
+import FeatureBar from '../feature-bar'
 
 const defaultFeatures: Features = {
   moreLikeThis: { enabled: false },

web/app/components/base/features/new-feature-panel/__tests__/feature-card.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import FeatureCard from './feature-card'
+import FeatureCard from '../feature-card'
 
 describe('FeatureCard', () => {
   const defaultProps = {

web/app/components/base/features/new-feature-panel/__tests__/follow-up.spec.tsx

@@ -1,8 +1,8 @@
-import type { OnFeaturesChange } from '../types'
+import type { OnFeaturesChange } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { FeaturesProvider } from '../context'
-import FollowUp from './follow-up'
+import { FeaturesProvider } from '../../context'
+import FollowUp from '../follow-up'
 
 const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
   return render(

web/app/components/base/features/new-feature-panel/__tests__/index.spec.tsx

@@ -1,7 +1,7 @@
-import type { Features } from '../types'
+import type { Features } from '../../types'
 import { render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../context'
-import NewFeaturePanel from './index'
+import { FeaturesProvider } from '../../context'
+import NewFeaturePanel from '../index'
 
 vi.mock('next/navigation', () => ({
   useRouter: () => ({ push: vi.fn() }),

web/app/components/base/features/new-feature-panel/__tests__/more-like-this.spec.tsx

@@ -1,8 +1,8 @@
-import type { OnFeaturesChange } from '../types'
+import type { OnFeaturesChange } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { FeaturesProvider } from '../context'
-import MoreLikeThis from './more-like-this'
+import { FeaturesProvider } from '../../context'
+import MoreLikeThis from '../more-like-this'
 
 const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
   return render(

web/app/components/base/features/new-feature-panel/__tests__/speech-to-text.spec.tsx

@@ -1,8 +1,8 @@
-import type { OnFeaturesChange } from '../types'
+import type { OnFeaturesChange } from '../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { FeaturesProvider } from '../context'
-import SpeechToText from './speech-to-text'
+import { FeaturesProvider } from '../../context'
+import SpeechToText from '../speech-to-text'
 
 const renderWithProvider = (props: { disabled?: boolean, onChange?: OnFeaturesChange } = {}) => {
   return render(

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/annotation-ctrl-button.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import AnnotationCtrlButton from './annotation-ctrl-button'
+import AnnotationCtrlButton from '../annotation-ctrl-button'
 
 const mockSetShowAnnotationFullModal = vi.fn()
 vi.mock('@/context/modal-context', () => ({

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param-modal.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import Toast from '@/app/components/base/toast'
-import ConfigParamModal from './config-param-modal'
+import ConfigParamModal from '../config-param-modal'
 
 let mockHooksReturn: {
   modelList: { provider: { provider: string }, models: { model: string }[] }[]

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/config-param.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { Item } from './config-param'
+import { Item } from '../config-param'
 
 describe('ConfigParam Item', () => {
   it('should render title text', () => {

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import AnnotationReply from './index'
+import { FeaturesProvider } from '../../../context'
+import AnnotationReply from '../index'
 
 const mockPush = vi.fn()
 vi.mock('next/navigation', () => ({

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/type.spec.ts

@@ -1,4 +1,4 @@
-import { PageType } from './type'
+import { PageType } from '../type'
 
 describe('PageType', () => {
   it('should have log and annotation values', () => {

web/app/components/base/features/new-feature-panel/annotation-reply/__tests__/use-annotation-config.spec.ts

@@ -1,6 +1,6 @@
 import type { AnnotationReplyConfig } from '@/models/debug'
 import { act, renderHook } from '@testing-library/react'
-import useAnnotationConfig from './use-annotation-config'
+import useAnnotationConfig from '../use-annotation-config'
 
 let mockIsAnnotationFull = false
 vi.mock('@/context/provider-context', () => ({

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import ScoreSlider from './index'
+import ScoreSlider from '../index'
 
 vi.mock('@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider', () => ({
   default: ({ value, onChange, min, max }: { value: number, onChange: (v: number) => void, min: number, max: number }) => (

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/__tests__/index.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import Slider from './index'
+import Slider from '../index'
 
 describe('BaseSlider', () => {
   beforeEach(() => {

web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import ConversationOpener from './index'
+import { FeaturesProvider } from '../../../context'
+import ConversationOpener from '../index'
 
 const mockSetShowOpeningModal = vi.fn()
 vi.mock('@/context/modal-context', () => ({

web/app/components/base/features/new-feature-panel/conversation-opener/__tests__/modal.spec.tsx

@@ -3,7 +3,7 @@ import type { InputVar } from '@/app/components/workflow/types'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { InputVarType } from '@/app/components/workflow/types'
-import OpeningSettingModal from './modal'
+import OpeningSettingModal from '../modal'
 
 const getPromptEditor = () => {
   const editor = document.querySelector('[data-lexical-editor="true"]')

web/app/components/base/features/new-feature-panel/file-upload/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import FileUpload from './index'
+import { FeaturesProvider } from '../../../context'
+import FileUpload from '../index'
 
 vi.mock('@/service/use-common', () => ({
   useFileUploadConfig: () => ({ data: undefined }),

web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-content.spec.tsx

@@ -1,10 +1,10 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { TransferMethod } from '@/types/app'
-import { FeaturesProvider } from '../../context'
-import SettingContent from './setting-content'
+import { FeaturesProvider } from '../../../context'
+import SettingContent from '../setting-content'
 
 vi.mock('@/app/components/workflow/nodes/_base/components/file-upload-setting', () => ({
   default: ({ payload, onChange }: { payload: Record<string, unknown>, onChange: (p: Record<string, unknown>) => void }) => (

web/app/components/base/features/new-feature-panel/file-upload/__tests__/setting-modal.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { TransferMethod } from '@/types/app'
-import { FeaturesProvider } from '../../context'
-import FileUploadSettings from './setting-modal'
+import { FeaturesProvider } from '../../../context'
+import FileUploadSettings from '../setting-modal'
 
 vi.mock('@/service/use-common', () => ({
   useFileUploadConfig: () => ({ data: undefined }),

web/app/components/base/features/new-feature-panel/image-upload/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import ImageUpload from './index'
+import { FeaturesProvider } from '../../../context'
+import ImageUpload from '../index'
 
 vi.mock('@/service/use-common', () => ({
   useFileUploadConfig: () => ({ data: undefined }),

web/app/components/base/features/new-feature-panel/moderation/__tests__/form-generation.spec.tsx

@@ -1,7 +1,7 @@
 import type { I18nText } from '@/i18n-config/language'
 import type { CodeBasedExtensionForm } from '@/models/common'
 import { fireEvent, render, screen } from '@testing-library/react'
-import FormGeneration from './form-generation'
+import FormGeneration from '../form-generation'
 
 const i18n = (en: string, zh = en): I18nText =>
   ({ 'en-US': en, 'zh-Hans': zh }) as unknown as I18nText

web/app/components/base/features/new-feature-panel/moderation/__tests__/index.spec.tsx

@@ -1,8 +1,8 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import Moderation from './index'
+import { FeaturesProvider } from '../../../context'
+import Moderation from '../index'
 
 const mockSetShowModerationSettingModal = vi.fn()
 vi.mock('@/context/modal-context', () => ({

web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-content.spec.tsx

@@ -1,6 +1,6 @@
 import type { ModerationContentConfig } from '@/models/debug'
 import { fireEvent, render, screen } from '@testing-library/react'
-import ModerationContent from './moderation-content'
+import ModerationContent from '../moderation-content'
 
 const defaultConfig: ModerationContentConfig = {
   enabled: false,

web/app/components/base/features/new-feature-panel/moderation/__tests__/moderation-setting-modal.spec.tsx

@@ -1,6 +1,6 @@
 import type { ModerationConfig } from '@/models/debug'
 import { fireEvent, render, screen } from '@testing-library/react'
-import ModerationSettingModal from './moderation-setting-modal'
+import ModerationSettingModal from '../moderation-setting-modal'
 
 const mockNotify = vi.fn()
 vi.mock('@/app/components/base/toast', () => ({

web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/index.spec.tsx

@@ -1,9 +1,9 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { TtsAutoPlay } from '@/types/app'
-import { FeaturesProvider } from '../../context'
-import TextToSpeech from './index'
+import { FeaturesProvider } from '../../../context'
+import TextToSpeech from '../index'
 
 vi.mock('@/i18n-config/language', () => ({
   languages: [

web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/param-config-content.spec.tsx

@@ -1,10 +1,10 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { TtsAutoPlay } from '@/types/app'
-import { FeaturesProvider } from '../../context'
-import ParamConfigContent from './param-config-content'
+import { FeaturesProvider } from '../../../context'
+import ParamConfigContent from '../param-config-content'
 
 let mockLanguages = [
   { value: 'en-US', name: 'English', example: 'Hello world' },

web/app/components/base/features/new-feature-panel/text-to-speech/__tests__/voice-settings.spec.tsx

@@ -1,7 +1,7 @@
-import type { Features } from '../../types'
+import type { Features } from '../../../types'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { FeaturesProvider } from '../../context'
-import VoiceSettings from './voice-settings'
+import { FeaturesProvider } from '../../../context'
+import VoiceSettings from '../voice-settings'
 
 vi.mock('next/navigation', () => ({
   usePathname: () => '/app/test-app-id/configuration',