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

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

web/app/components/base/markdown-blocks/__tests__/audio-block.spec.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 // AudioBlock.integration.spec.tsx
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import AudioBlock from './audio-block'
+import AudioBlock from '../audio-block'
 
 // Mock the nested AudioPlayer used by AudioGallery (do not mock AudioGallery itself)
 const audioPlayerMock = vi.fn()

web/app/components/base/markdown-blocks/__tests__/button.spec.tsx

@@ -7,11 +7,11 @@ import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
 
-import MarkdownButton from './button'
+import MarkdownButton from '../button'
 
 // Only mock the URL utility so behavior is deterministic
 const isValidUrlSpy = vi.fn()
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   isValidUrl: (u: string) => isValidUrlSpy(u),
 })) // test subject
 

web/app/components/base/markdown-blocks/__tests__/code-block.spec.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Theme } from '@/types/app'
 
-import CodeBlock from './code-block'
+import CodeBlock from '../code-block'
 
 type UseThemeReturn = {
   theme: Theme

web/app/components/base/markdown-blocks/__tests__/form.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import dayjs from '@/app/components/base/date-and-time-picker/utils/dayjs'
-import MarkdownForm from './form'
+import MarkdownForm from '../form'
 
 type TextNode = {
   type: 'text'

web/app/components/base/markdown-blocks/__tests__/link.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import Link from './link'
+import Link from '../link'
 
 // ---- mocks ----
 const mockOnSend = vi.fn()
@@ -13,7 +13,7 @@ vi.mock('@/app/components/base/chat/chat/context', () => ({
 }))
 
 const mockIsValidUrl = vi.fn()
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   isValidUrl: (url: string) => mockIsValidUrl(url),
 }))
 

web/app/components/base/markdown-blocks/__tests__/music.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ErrorBoundary from '@/app/components/base/markdown/error-boundary'
-import MarkdownMusic from './music'
+import MarkdownMusic from '../music'
 
 describe('MarkdownMusic', () => {
   beforeEach(() => {

web/app/components/base/markdown-blocks/__tests__/paragraph.spec.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import Paragraph from './paragraph'
+import Paragraph from '../paragraph'
 
 vi.mock('@/app/components/base/image-gallery', () => ({
   default: ({ srcs }: { srcs: string[] }) => (

web/app/components/base/markdown-blocks/__tests__/plugin-img.spec.tsx

@@ -2,7 +2,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { PluginImg } from './plugin-img'
+import { PluginImg } from '../plugin-img'
 
 /* -------------------- Mocks -------------------- */
 
@@ -19,7 +19,7 @@ vi.mock('@/service/use-plugins', () => ({
 }))
 
 const mockGetMarkdownImageURL = vi.fn()
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   getMarkdownImageURL: (src: string, pluginId?: string) =>
     mockGetMarkdownImageURL(src, pluginId),
 }))

web/app/components/base/markdown-blocks/__tests__/plugin-paragraph.spec.tsx

@@ -3,15 +3,15 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { usePluginReadmeAsset } from '@/service/use-plugins'
-import { PluginParagraph } from './plugin-paragraph'
-import { getMarkdownImageURL } from './utils'
+import { PluginParagraph } from '../plugin-paragraph'
+import { getMarkdownImageURL } from '../utils'
 
 // Mock dependencies
 vi.mock('@/service/use-plugins', () => ({
   usePluginReadmeAsset: vi.fn(),
 }))
 
-vi.mock('./utils', () => ({
+vi.mock('../utils', () => ({
   getMarkdownImageURL: vi.fn(),
 }))
 

web/app/components/base/markdown-blocks/__tests__/pre-code.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it } from 'vitest'
-import PreCode from './pre-code'
+import PreCode from '../pre-code'
 
 describe('PreCode Component', () => {
   it('renders children correctly inside the pre tag', () => {

web/app/components/base/markdown-blocks/__tests__/script-block.spec.tsx

@@ -1,7 +1,7 @@
 import { cleanup, render } from '@testing-library/react'
 import * as React from 'react'
 import { afterEach, describe, expect, it } from 'vitest'
-import ScriptBlock from './script-block'
+import ScriptBlock from '../script-block'
 
 afterEach(() => {
   cleanup()

web/app/components/base/markdown-blocks/__tests__/think-block.spec.tsx

@@ -1,7 +1,7 @@
 import { act, render, screen } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ChatContextProvider } from '@/app/components/base/chat/chat/context'
-import ThinkBlock from './think-block'
+import ThinkBlock from '../think-block'
 
 // Mock react-i18next
 vi.mock('react-i18next', () => ({

web/app/components/base/markdown-blocks/__tests__/video-block.spec.tsx

@@ -2,8 +2,8 @@ import { render } from '@testing-library/react'
 import * as React from 'react'
 import { describe, expect, it } from 'vitest'
 
-import VideoGallery from '../video-gallery'
-import VideoBlock from './video-block'
+import VideoGallery from '../../video-gallery'
+import VideoBlock from '../video-block'
 
 type ChildNode = {
   properties?: {