From 6100acb780f925c27c052dd88b8cef18234d1f38 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Wed, 18 Mar 2026 10:49:30 +0800
Subject: [PATCH] refactor(web): move component tests into sibling __tests__
 directories (#33623)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
---
 .agents/skills/frontend-testing/SKILL.md      |  3 +-
 .../browser-initializer.spec.ts               |  0
 .../AmplitudeProvider.spec.tsx                |  2 +-
 .../amplitude/{ => __tests__}/index.spec.ts   |  6 +--
 .../amplitude/{ => __tests__}/utils.spec.ts   |  4 +-
 .../dynamic-pdf-preview.spec.tsx              |  6 +--
 .../{ => __tests__}/index.spec.tsx            |  8 ++--
 .../markdown-with-directive-schema.spec.ts    |  2 +-
 .../with-icon-card-item.spec.tsx              |  2 +-
 .../with-icon-card-list.spec.tsx              |  2 +-
 .../use-llm-model-plugin-installed.spec.ts    |  2 +-
 .../menu-dialog.dialog.spec.tsx               |  2 +-
 .../{ => __tests__}/dialog.spec.tsx           |  2 +-
 .../{ => __tests__}/atoms.spec.tsx            |  2 +-
 .../derive-model-status.spec.ts               |  8 ++--
 .../{ => __tests__}/index.non-cloud.spec.tsx  | 14 +++---
 .../{ => __tests__}/supports-credits.spec.ts  |  6 +--
 .../{ => __tests__}/dialog.spec.tsx           | 12 ++---
 .../derive-trigger-status.spec.ts             |  8 ++--
 .../parameter-item.select.spec.tsx            |  4 +-
 .../model-selector-trigger.spec.tsx           |  8 ++--
 .../{ => __tests__}/popover.spec.tsx          |  8 ++--
 .../provider-card-actions.spec.tsx            |  2 +-
 .../system-quota-card.spec.tsx                |  2 +-
 .../use-change-provider-priority.spec.ts      |  8 ++--
 .../use-credential-panel-state.spec.ts        |  8 ++--
 .../{ => __tests__}/use-trial-credits.spec.ts |  2 +-
 .../{ => __tests__}/api-key-section.spec.tsx  |  6 +--
 .../credits-exhausted-alert.spec.tsx          |  4 +-
 .../{ => __tests__}/dialog.spec.tsx           | 18 ++++----
 .../{ => __tests__}/dropdown-content.spec.tsx | 16 +++----
 .../{ => __tests__}/index.spec.tsx            | 14 +++---
 .../usage-priority-section.spec.tsx           |  4 +-
 .../use-activate-credential.spec.tsx          |  6 +--
 .../use-plugins-with-latest-version.spec.ts}  |  6 +--
 .../components/__tests__/index.spec.tsx       | 44 ++++++++++---------
 .../{ => __tests__}/utils.test.ts             |  4 +-
 web/docs/test.md                              |  3 +-
 38 files changed, 132 insertions(+), 126 deletions(-)
 rename web/app/components/{ => __tests__}/browser-initializer.spec.ts (100%)
 rename web/app/components/base/amplitude/{ => __tests__}/AmplitudeProvider.spec.tsx (98%)
 rename web/app/components/base/amplitude/{ => __tests__}/index.spec.ts (87%)
 rename web/app/components/base/amplitude/{ => __tests__}/utils.spec.ts (98%)
 rename web/app/components/base/file-uploader/{ => __tests__}/dynamic-pdf-preview.spec.tsx (94%)
 rename web/app/components/base/markdown-with-directive/{ => __tests__}/index.spec.tsx (96%)
 rename web/app/components/base/markdown-with-directive/components/{ => __tests__}/markdown-with-directive-schema.spec.ts (97%)
 rename web/app/components/base/markdown-with-directive/components/{ => __tests__}/with-icon-card-item.spec.tsx (96%)
 rename web/app/components/base/markdown-with-directive/components/{ => __tests__}/with-icon-card-list.spec.tsx (95%)
 rename web/app/components/base/prompt-editor/plugins/workflow-variable-block/{ => __tests__}/use-llm-model-plugin-installed.spec.ts (96%)
 rename web/app/components/header/account-setting/{ => __tests__}/menu-dialog.dialog.spec.tsx (96%)
 rename web/app/components/header/account-setting/members-page/edit-workspace-modal/{ => __tests__}/dialog.spec.tsx (97%)
 rename web/app/components/header/account-setting/model-provider-page/{ => __tests__}/atoms.spec.tsx (99%)
 rename web/app/components/header/account-setting/model-provider-page/{ => __tests__}/derive-model-status.spec.ts (95%)
 rename web/app/components/header/account-setting/model-provider-page/{ => __tests__}/index.non-cloud.spec.tsx (87%)
 rename web/app/components/header/account-setting/model-provider-page/{ => __tests__}/supports-credits.spec.ts (88%)
 rename web/app/components/header/account-setting/model-provider-page/model-modal/{ => __tests__}/dialog.spec.tsx (97%)
 rename web/app/components/header/account-setting/model-provider-page/model-parameter-modal/{ => __tests__}/derive-trigger-status.spec.ts (93%)
 rename web/app/components/header/account-setting/model-provider-page/model-parameter-modal/{ => __tests__}/parameter-item.select.spec.tsx (95%)
 rename web/app/components/header/account-setting/model-provider-page/model-selector/{ => __tests__}/model-selector-trigger.spec.tsx (97%)
 rename web/app/components/header/account-setting/model-provider-page/model-selector/{ => __tests__}/popover.spec.tsx (93%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/{ => __tests__}/provider-card-actions.spec.tsx (99%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/{ => __tests__}/system-quota-card.spec.tsx (98%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/{ => __tests__}/use-change-provider-priority.spec.ts (97%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/{ => __tests__}/use-credential-panel-state.spec.ts (98%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/{ => __tests__}/use-trial-credits.spec.ts (97%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/api-key-section.spec.tsx (96%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/credits-exhausted-alert.spec.tsx (96%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/dialog.spec.tsx (90%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/dropdown-content.spec.tsx (97%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/index.spec.tsx (95%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/usage-priority-section.spec.tsx (94%)
 rename web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/{ => __tests__}/use-activate-credential.spec.tsx (95%)
 rename web/app/components/plugins/{hooks.spec.ts => __tests__/use-plugins-with-latest-version.spec.ts} (96%)
 rename web/app/components/tools/workflow-tool/{ => __tests__}/utils.test.ts (97%)

diff --git a/.agents/skills/frontend-testing/SKILL.md b/.agents/skills/frontend-testing/SKILL.md
index 69c099a262..4da070bdbf 100644
--- a/.agents/skills/frontend-testing/SKILL.md
+++ b/.agents/skills/frontend-testing/SKILL.md
@@ -63,7 +63,8 @@ pnpm analyze-component <path> --review
 
 ### File Naming
 
-- Test files: `ComponentName.spec.tsx` (same directory as component)
+- Test files: `ComponentName.spec.tsx` inside a same-level `__tests__/` directory
+- Placement rule: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
 - Integration tests: `web/__tests__/` directory
 
 ## Test Structure Template
diff --git a/web/app/components/browser-initializer.spec.ts b/web/app/components/__tests__/browser-initializer.spec.ts
similarity index 100%
rename from web/app/components/browser-initializer.spec.ts
rename to web/app/components/__tests__/browser-initializer.spec.ts
diff --git a/web/app/components/base/amplitude/AmplitudeProvider.spec.tsx b/web/app/components/base/amplitude/__tests__/AmplitudeProvider.spec.tsx
similarity index 98%
rename from web/app/components/base/amplitude/AmplitudeProvider.spec.tsx
rename to web/app/components/base/amplitude/__tests__/AmplitudeProvider.spec.tsx
index 2402c84a3e..b30da72091 100644
--- a/web/app/components/base/amplitude/AmplitudeProvider.spec.tsx
+++ b/web/app/components/base/amplitude/__tests__/AmplitudeProvider.spec.tsx
@@ -2,7 +2,7 @@ import * as amplitude from '@amplitude/analytics-browser'
 import { sessionReplayPlugin } from '@amplitude/plugin-session-replay-browser'
 import { render } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import AmplitudeProvider, { isAmplitudeEnabled } from './AmplitudeProvider'
+import AmplitudeProvider, { isAmplitudeEnabled } from '../AmplitudeProvider'
 
 const mockConfig = vi.hoisted(() => ({
   AMPLITUDE_API_KEY: 'test-api-key',
diff --git a/web/app/components/base/amplitude/index.spec.ts b/web/app/components/base/amplitude/__tests__/index.spec.ts
similarity index 87%
rename from web/app/components/base/amplitude/index.spec.ts
rename to web/app/components/base/amplitude/__tests__/index.spec.ts
index 919c0b68d1..2d7ad6ab84 100644
--- a/web/app/components/base/amplitude/index.spec.ts
+++ b/web/app/components/base/amplitude/__tests__/index.spec.ts
@@ -1,18 +1,18 @@
 import { describe, expect, it } from 'vitest'
-import AmplitudeProvider, { isAmplitudeEnabled } from './AmplitudeProvider'
+import AmplitudeProvider, { isAmplitudeEnabled } from '../AmplitudeProvider'
 import indexDefault, {
   isAmplitudeEnabled as indexIsAmplitudeEnabled,
   resetUser,
   setUserId,
   setUserProperties,
   trackEvent,
-} from './index'
+} from '../index'
 import {
   resetUser as utilsResetUser,
   setUserId as utilsSetUserId,
   setUserProperties as utilsSetUserProperties,
   trackEvent as utilsTrackEvent,
-} from './utils'
+} from '../utils'
 
 describe('Amplitude index exports', () => {
   it('exports AmplitudeProvider as default', () => {
diff --git a/web/app/components/base/amplitude/utils.spec.ts b/web/app/components/base/amplitude/__tests__/utils.spec.ts
similarity index 98%
rename from web/app/components/base/amplitude/utils.spec.ts
rename to web/app/components/base/amplitude/__tests__/utils.spec.ts
index c69fc93aa4..ecbc57e387 100644
--- a/web/app/components/base/amplitude/utils.spec.ts
+++ b/web/app/components/base/amplitude/__tests__/utils.spec.ts
@@ -1,4 +1,4 @@
-import { resetUser, setUserId, setUserProperties, trackEvent } from './utils'
+import { resetUser, setUserId, setUserProperties, trackEvent } from '../utils'
 
 const mockState = vi.hoisted(() => ({
   enabled: true,
@@ -20,7 +20,7 @@ const MockIdentify = vi.hoisted(() =>
   },
 )
 
-vi.mock('./AmplitudeProvider', () => ({
+vi.mock('../AmplitudeProvider', () => ({
   isAmplitudeEnabled: () => mockState.enabled,
 }))
 
diff --git a/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx b/web/app/components/base/file-uploader/__tests__/dynamic-pdf-preview.spec.tsx
similarity index 94%
rename from web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx
rename to web/app/components/base/file-uploader/__tests__/dynamic-pdf-preview.spec.tsx
index 1f15c419eb..cdae4a2e4f 100644
--- a/web/app/components/base/file-uploader/dynamic-pdf-preview.spec.tsx
+++ b/web/app/components/base/file-uploader/__tests__/dynamic-pdf-preview.spec.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import DynamicPdfPreview from './dynamic-pdf-preview'
+import DynamicPdfPreview from '../dynamic-pdf-preview'
 
 type DynamicPdfPreviewProps = {
   url: string
@@ -44,7 +44,7 @@ vi.mock('next/dynamic', () => ({
   default: mockDynamic,
 }))
 
-vi.mock('./pdf-preview', () => ({
+vi.mock('../pdf-preview', () => ({
   default: mockPdfPreview,
 }))
 
@@ -78,7 +78,7 @@ describe('dynamic-pdf-preview', () => {
     expect(loaded).toBeInstanceOf(Promise)
 
     const loadedModule = (await loaded) as { default: unknown }
-    const pdfPreviewModule = await import('./pdf-preview')
+    const pdfPreviewModule = await import('../pdf-preview')
     expect(loadedModule.default).toBe(pdfPreviewModule.default)
   })
 
diff --git a/web/app/components/base/markdown-with-directive/index.spec.tsx b/web/app/components/base/markdown-with-directive/__tests__/index.spec.tsx
similarity index 96%
rename from web/app/components/base/markdown-with-directive/index.spec.tsx
rename to web/app/components/base/markdown-with-directive/__tests__/index.spec.tsx
index fc4b813247..e71abd6620 100644
--- a/web/app/components/base/markdown-with-directive/index.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/__tests__/index.spec.tsx
@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import DOMPurify from 'dompurify'
-import { validateDirectiveProps } from './components/markdown-with-directive-schema'
-import WithIconCardItem from './components/with-icon-card-item'
-import WithIconCardList from './components/with-icon-card-list'
-import { MarkdownWithDirective } from './index'
+import { validateDirectiveProps } from '../components/markdown-with-directive-schema'
+import WithIconCardItem from '../components/with-icon-card-item'
+import WithIconCardList from '../components/with-icon-card-list'
+import { MarkdownWithDirective } from '../index'
 
 const FOUR_COLON_RE = /:{4}/
 
diff --git a/web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.spec.ts b/web/app/components/base/markdown-with-directive/components/__tests__/markdown-with-directive-schema.spec.ts
similarity index 97%
rename from web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.spec.ts
rename to web/app/components/base/markdown-with-directive/components/__tests__/markdown-with-directive-schema.spec.ts
index 9e74ed43b4..c69bdf4987 100644
--- a/web/app/components/base/markdown-with-directive/components/markdown-with-directive-schema.spec.ts
+++ b/web/app/components/base/markdown-with-directive/components/__tests__/markdown-with-directive-schema.spec.ts
@@ -1,4 +1,4 @@
-import { validateDirectiveProps } from './markdown-with-directive-schema'
+import { validateDirectiveProps } from '../markdown-with-directive-schema'
 
 describe('markdown-with-directive-schema', () => {
   beforeEach(() => {
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx b/web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-item.spec.tsx
similarity index 96%
rename from web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx
rename to web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-item.spec.tsx
index dbe293dcf6..8a2d4a552b 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-item.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-item.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import WithIconCardItem from './with-icon-card-item'
+import WithIconCardItem from '../with-icon-card-item'
 
 describe('WithIconCardItem', () => {
   beforeEach(() => {
diff --git a/web/app/components/base/markdown-with-directive/components/with-icon-card-list.spec.tsx b/web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-list.spec.tsx
similarity index 95%
rename from web/app/components/base/markdown-with-directive/components/with-icon-card-list.spec.tsx
rename to web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-list.spec.tsx
index d5b701b01c..5698b4a921 100644
--- a/web/app/components/base/markdown-with-directive/components/with-icon-card-list.spec.tsx
+++ b/web/app/components/base/markdown-with-directive/components/__tests__/with-icon-card-list.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import WithIconCardList from './with-icon-card-list'
+import WithIconCardList from '../with-icon-card-list'
 
 describe('WithIconCardList', () => {
   beforeEach(() => {
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/use-llm-model-plugin-installed.spec.ts
similarity index 96%
rename from web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts
rename to web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/use-llm-model-plugin-installed.spec.ts
index f64865317f..fd77302d13 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.spec.ts
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/__tests__/use-llm-model-plugin-installed.spec.ts
@@ -1,7 +1,7 @@
 import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
 import { renderHook } from '@testing-library/react'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
+import { useLlmModelPluginInstalled } from '../use-llm-model-plugin-installed'
 
 let mockModelProviders: Array<{ provider: string }> = []
 
diff --git a/web/app/components/header/account-setting/menu-dialog.dialog.spec.tsx b/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
similarity index 96%
rename from web/app/components/header/account-setting/menu-dialog.dialog.spec.tsx
rename to web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
index 627b764eb2..db8aec4ec1 100644
--- a/web/app/components/header/account-setting/menu-dialog.dialog.spec.tsx
+++ b/web/app/components/header/account-setting/__tests__/menu-dialog.dialog.spec.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { render } from '@testing-library/react'
-import MenuDialog from './menu-dialog'
+import MenuDialog from '../menu-dialog'
 
 type DialogProps = {
   children: ReactNode
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/dialog.spec.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
similarity index 97%
rename from web/app/components/header/account-setting/members-page/edit-workspace-modal/dialog.spec.tsx
rename to web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
index f489d64912..1714c3ceee 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/__tests__/dialog.spec.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { render } from '@testing-library/react'
 import { ToastContext } from '@/app/components/base/toast/context'
 import { useAppContext } from '@/context/app-context'
-import EditWorkspaceModal from './index'
+import EditWorkspaceModal from '../index'
 
 type DialogProps = {
   children: ReactNode
diff --git a/web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx b/web/app/components/header/account-setting/model-provider-page/__tests__/atoms.spec.tsx
similarity index 99%
rename from web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/__tests__/atoms.spec.tsx
index 1ef33d1093..aa27583daf 100644
--- a/web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/atoms.spec.tsx
@@ -7,7 +7,7 @@ import {
   useModelProviderListExpanded,
   useResetModelProviderListExpanded,
   useSetModelProviderListExpanded,
-} from './atoms'
+} from '../atoms'
 
 const createWrapper = () => {
   return ({ children }: { children: ReactNode }) => (
diff --git a/web/app/components/header/account-setting/model-provider-page/derive-model-status.spec.ts b/web/app/components/header/account-setting/model-provider-page/__tests__/derive-model-status.spec.ts
similarity index 95%
rename from web/app/components/header/account-setting/model-provider-page/derive-model-status.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/__tests__/derive-model-status.spec.ts
index 1b248e98f2..8ef80e5025 100644
--- a/web/app/components/header/account-setting/model-provider-page/derive-model-status.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/derive-model-status.spec.ts
@@ -1,11 +1,11 @@
-import type { Model, ModelItem, ModelProvider } from './declarations'
-import type { CredentialPanelState } from './provider-added-card/use-credential-panel-state'
+import type { Model, ModelItem, ModelProvider } from '../declarations'
+import type { CredentialPanelState } from '../provider-added-card/use-credential-panel-state'
 import {
   ConfigurationMethodEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from './declarations'
-import { deriveModelStatus } from './derive-model-status'
+} from '../declarations'
+import { deriveModelStatus } from '../derive-model-status'
 
 const createCredentialState = (overrides: Partial<CredentialPanelState> = {}): CredentialPanelState => ({
   variant: 'credits-active',
diff --git a/web/app/components/header/account-setting/model-provider-page/index.non-cloud.spec.tsx b/web/app/components/header/account-setting/model-provider-page/__tests__/index.non-cloud.spec.tsx
similarity index 87%
rename from web/app/components/header/account-setting/model-provider-page/index.non-cloud.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/__tests__/index.non-cloud.spec.tsx
index c543c74472..0fbed45fa6 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.non-cloud.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/index.non-cloud.spec.tsx
@@ -3,8 +3,8 @@ import {
   CurrentSystemQuotaTypeEnum,
   CustomConfigurationStatusEnum,
   QuotaUnitEnum,
-} from './declarations'
-import ModelProviderPage from './index'
+} from '../declarations'
+import ModelProviderPage from '../index'
 
 const mockQuotaConfig = {
   quota_type: CurrentSystemQuotaTypeEnum.free,
@@ -42,23 +42,23 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-vi.mock('./hooks', () => ({
+vi.mock('../hooks', () => ({
   useDefaultModel: () => ({ data: null, isLoading: false }),
 }))
 
-vi.mock('./provider-added-card', () => ({
+vi.mock('../provider-added-card', () => ({
   default: () => <div data-testid="provider-card" />,
 }))
 
-vi.mock('./provider-added-card/quota-panel', () => ({
+vi.mock('../provider-added-card/quota-panel', () => ({
   default: () => <div data-testid="quota-panel" />,
 }))
 
-vi.mock('./system-model-selector', () => ({
+vi.mock('../system-model-selector', () => ({
   default: () => <div data-testid="system-model-selector" />,
 }))
 
-vi.mock('./install-from-marketplace', () => ({
+vi.mock('../install-from-marketplace', () => ({
   default: () => <div data-testid="install-from-marketplace" />,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/supports-credits.spec.ts b/web/app/components/header/account-setting/model-provider-page/__tests__/supports-credits.spec.ts
similarity index 88%
rename from web/app/components/header/account-setting/model-provider-page/supports-credits.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/__tests__/supports-credits.spec.ts
index ef2e79c79b..b8ed478a93 100644
--- a/web/app/components/header/account-setting/model-provider-page/supports-credits.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/__tests__/supports-credits.spec.ts
@@ -1,6 +1,6 @@
-import type { ModelProvider } from './declarations'
-import { CurrentSystemQuotaTypeEnum } from './declarations'
-import { providerSupportsCredits } from './supports-credits'
+import type { ModelProvider } from '../declarations'
+import { CurrentSystemQuotaTypeEnum } from '../declarations'
+import { providerSupportsCredits } from '../supports-credits'
 
 vi.mock('@/config', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/config')>()
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/dialog.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
similarity index 97%
rename from web/app/components/header/account-setting/model-provider-page/model-modal/dialog.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
index 9c08560a25..21f8d554c4 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/__tests__/dialog.spec.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import type { Credential, ModelProvider } from '../declarations'
+import type { Credential, ModelProvider } from '../../declarations'
 import { act, render, screen } from '@testing-library/react'
-import { ConfigurationMethodEnum, ModelModalModeEnum } from '../declarations'
-import ModelModal from './index'
+import { ConfigurationMethodEnum, ModelModalModeEnum } from '../../declarations'
+import ModelModal from '../index'
 
 type DialogProps = {
   children: ReactNode
@@ -27,7 +27,7 @@ vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
   default: () => <div data-testid="auth-form" />,
 }))
 
-vi.mock('../model-auth', () => ({
+vi.mock('../../model-auth', () => ({
   CredentialSelector: ({ credentials }: { credentials: Credential[] }) => <div>{`credentials:${credentials.length}`}</div>,
 }))
 
@@ -52,7 +52,7 @@ vi.mock('@/app/components/base/ui/alert-dialog', () => ({
   AlertDialogTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('../model-auth/hooks', () => ({
+vi.mock('../../model-auth/hooks', () => ({
   useCredentialData: () => ({
     isLoading: false,
     credentialData: {
@@ -87,7 +87,7 @@ vi.mock('@/hooks/use-i18n', () => ({
   useRenderI18nObject: () => (value: Record<string, string>) => value[mockLanguage] || value.en_US,
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => mockLanguage,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/derive-trigger-status.spec.ts b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/derive-trigger-status.spec.ts
similarity index 93%
rename from web/app/components/header/account-setting/model-provider-page/model-parameter-modal/derive-trigger-status.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/derive-trigger-status.spec.ts
index 828895d35a..3186199524 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/derive-trigger-status.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/derive-trigger-status.spec.ts
@@ -1,7 +1,7 @@
-import type { ModelItem, ModelProvider } from '../declarations'
-import type { CredentialPanelState } from '../provider-added-card/use-credential-panel-state'
-import { ModelStatusEnum } from '../declarations'
-import { deriveTriggerStatus } from './derive-trigger-status'
+import type { ModelItem, ModelProvider } from '../../declarations'
+import type { CredentialPanelState } from '../../provider-added-card/use-credential-panel-state'
+import { ModelStatusEnum } from '../../declarations'
+import { deriveTriggerStatus } from '../derive-trigger-status'
 
 const baseCredentialState: CredentialPanelState = {
   variant: 'api-active',
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.select.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
similarity index 95%
rename from web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.select.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
index 21703fbed6..ff30f69a84 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.select.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/parameter-item.select.spec.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
-import ParameterItem from './parameter-item'
+import ParameterItem from '../parameter-item'
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/model-selector-trigger.spec.tsx
similarity index 97%
rename from web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/model-selector-trigger.spec.tsx
index ff4a38a9a3..d2929b48f6 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/model-selector-trigger.spec.tsx
@@ -1,4 +1,4 @@
-import type { Model, ModelItem } from '../declarations'
+import type { Model, ModelItem } from '../../declarations'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {
@@ -6,15 +6,15 @@ import {
   ModelFeatureEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-} from '../declarations'
-import ModelSelectorTrigger from './model-selector-trigger'
+} from '../../declarations'
+import ModelSelectorTrigger from '../model-selector-trigger'
 
 const mockUseProviderContext = vi.hoisted(() => vi.fn())
 const mockUseCredentialPanelState = vi.hoisted(() => vi.fn())
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: mockUseProviderContext,
 }))
-vi.mock('../provider-added-card/use-credential-panel-state', () => ({
+vi.mock('../../provider-added-card/use-credential-panel-state', () => ({
   useCredentialPanelState: mockUseCredentialPanelState,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popover.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
similarity index 93%
rename from web/app/components/header/account-setting/model-provider-page/model-selector/popover.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
index a20a066d35..e92bab1db5 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popover.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/__tests__/popover.spec.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import ModelSelector from './index'
+import ModelSelector from '../index'
 
 type PopoverProps = {
   children: ReactNode
@@ -9,7 +9,7 @@ type PopoverProps = {
 
 let latestOnOpenChange: PopoverProps['onOpenChange']
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useCurrentProviderAndModel: () => ({
     currentProvider: undefined,
     currentModel: undefined,
@@ -25,7 +25,7 @@ vi.mock('@/app/components/base/ui/popover', () => ({
   PopoverContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('./model-selector-trigger', () => ({
+vi.mock('../model-selector-trigger', () => ({
   default: ({ open, readonly }: { open: boolean, readonly?: boolean }) => (
     <span>
       {open ? 'open' : 'closed'}
@@ -35,7 +35,7 @@ vi.mock('./model-selector-trigger', () => ({
   ),
 }))
 
-vi.mock('./popup', () => ({
+vi.mock('../popup', () => ({
   default: ({ onHide }: { onHide: () => void }) => (
     <div data-testid="popup">
       <button type="button" onClick={onHide}>hide-popup</button>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
similarity index 99%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
index 30c477f3eb..847a5a2ce8 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/provider-card-actions.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/provider-card-actions.spec.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { PluginSource } from '@/app/components/plugins/types'
-import ProviderCardActions from './provider-card-actions'
+import ProviderCardActions from '../provider-card-actions'
 
 const mockHandleUpdate = vi.fn()
 const mockHandleUpdatedFromMarketplace = vi.fn()
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/system-quota-card.spec.tsx
similarity index 98%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/system-quota-card.spec.tsx
index 9f0b963a7a..e123702def 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/system-quota-card.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/system-quota-card.spec.tsx
@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import SystemQuotaCard from './system-quota-card'
+import SystemQuotaCard from '../system-quota-card'
 
 describe('SystemQuotaCard', () => {
   // Renders container with children
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.spec.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
similarity index 97%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
index 45fb6e1803..635384f9d1 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-change-provider-priority.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-change-provider-priority.spec.ts
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react'
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { act, renderHook, waitFor } from '@testing-library/react'
 import * as React from 'react'
-import { ConfigurationMethodEnum, ModelTypeEnum, PreferredProviderTypeEnum } from '../declarations'
-import { useChangeProviderPriority } from './use-change-provider-priority'
+import { ConfigurationMethodEnum, ModelTypeEnum, PreferredProviderTypeEnum } from '../../declarations'
+import { useChangeProviderPriority } from '../use-change-provider-priority'
 
 const mockUpdateModelList = vi.fn()
 const mockUpdateModelProviders = vi.fn()
@@ -35,7 +35,7 @@ vi.mock('@/service/client', () => ({
   },
 }))
 
-vi.mock('../hooks', () => ({
+vi.mock('../../hooks', () => ({
   useUpdateModelList: () => mockUpdateModelList,
   useUpdateModelProviders: () => mockUpdateModelProviders,
 }))
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state.spec.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-credential-panel-state.spec.ts
similarity index 98%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-credential-panel-state.spec.ts
index 361501b15d..c58abfb44d 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-credential-panel-state.spec.ts
@@ -1,17 +1,17 @@
-import type { ModelProvider } from '../declarations'
+import type { ModelProvider } from '../../declarations'
 import { renderHook } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   CurrentSystemQuotaTypeEnum,
   CustomConfigurationStatusEnum,
   PreferredProviderTypeEnum,
-} from '../declarations'
-import { isDestructiveVariant, useCredentialPanelState } from './use-credential-panel-state'
+} from '../../declarations'
+import { isDestructiveVariant, useCredentialPanelState } from '../use-credential-panel-state'
 
 const mockTrialCredits = { credits: 100, totalCredits: 10_000, isExhausted: false, isLoading: false, nextCreditResetDate: undefined }
 const mockTrialModels = ['langgenius/openai/openai', 'langgenius/anthropic/anthropic']
 
-vi.mock('./use-trial-credits', () => ({
+vi.mock('../use-trial-credits', () => ({
   useTrialCredits: () => mockTrialCredits,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-trial-credits.spec.ts b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-trial-credits.spec.ts
similarity index 97%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/use-trial-credits.spec.ts
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-trial-credits.spec.ts
index fd7cc6d429..482ad70e16 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/use-trial-credits.spec.ts
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/__tests__/use-trial-credits.spec.ts
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react'
-import { useTrialCredits } from './use-trial-credits'
+import { useTrialCredits } from '../use-trial-credits'
 
 const mockUseCurrentWorkspace = vi.fn()
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/api-key-section.spec.tsx
similarity index 96%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/api-key-section.spec.tsx
index 95724df029..942885c617 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/api-key-section.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/api-key-section.spec.tsx
@@ -1,7 +1,7 @@
-import type { Credential, ModelProvider } from '../../declarations'
+import type { Credential, ModelProvider } from '../../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../declarations'
-import ApiKeySection from './api-key-section'
+import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../../declarations'
+import ApiKeySection from '../api-key-section'
 
 const createCredential = (overrides: Partial<Credential> = {}): Credential => ({
   credential_id: 'cred-1',
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/credits-exhausted-alert.spec.tsx
similarity index 96%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/credits-exhausted-alert.spec.tsx
index c1c5d33cf4..a442f226b2 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-exhausted-alert.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/credits-exhausted-alert.spec.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
-import CreditsExhaustedAlert from './credits-exhausted-alert'
+import CreditsExhaustedAlert from '../credits-exhausted-alert'
 
 const mockTrialCredits = { credits: 0, totalCredits: 10_000, isExhausted: true, isLoading: false, nextCreditResetDate: undefined }
 const mockSetShowPricingModal = vi.fn()
@@ -24,7 +24,7 @@ vi.mock('react-i18next', async (importOriginal) => {
   }
 })
 
-vi.mock('../use-trial-credits', () => ({
+vi.mock('../../use-trial-credits', () => ({
   useTrialCredits: () => mockTrialCredits,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dialog.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
similarity index 90%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dialog.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
index f13125bb4d..b4ec0e09d2 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dialog.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dialog.spec.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import type { ModelProvider } from '../../declarations'
-import type { CredentialPanelState } from '../use-credential-panel-state'
+import type { ModelProvider } from '../../../declarations'
+import type { CredentialPanelState } from '../../use-credential-panel-state'
 import { act, fireEvent, render, screen } from '@testing-library/react'
-import DropdownContent from './dropdown-content'
+import DropdownContent from '../dropdown-content'
 
 type AlertDialogProps = {
   children: ReactNode
@@ -15,7 +15,7 @@ const mockCloseConfirmDelete = vi.fn()
 const mockHandleConfirmDelete = vi.fn()
 const mockHandleOpenModal = vi.fn()
 
-vi.mock('../../model-auth/hooks', () => ({
+vi.mock('../../../model-auth/hooks', () => ({
   useAuth: () => ({
     openConfirmDelete: mockOpenConfirmDelete,
     closeConfirmDelete: mockCloseConfirmDelete,
@@ -26,7 +26,7 @@ vi.mock('../../model-auth/hooks', () => ({
   }),
 }))
 
-vi.mock('./use-activate-credential', () => ({
+vi.mock('../use-activate-credential', () => ({
   useActivateCredential: () => ({
     selectedCredentialId: 'cred-1',
     isActivating: false,
@@ -47,7 +47,7 @@ vi.mock('@/app/components/base/ui/alert-dialog', () => ({
   AlertDialogTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
-vi.mock('./api-key-section', () => ({
+vi.mock('../api-key-section', () => ({
   default: ({ credentials, onDelete }: { credentials: unknown[], onDelete: (credential?: unknown) => void }) => (
     <div>
       <span>{`credentials:${credentials.length}`}</span>
@@ -56,15 +56,15 @@ vi.mock('./api-key-section', () => ({
   ),
 }))
 
-vi.mock('./credits-exhausted-alert', () => ({
+vi.mock('../credits-exhausted-alert', () => ({
   default: () => <div>credits alert</div>,
 }))
 
-vi.mock('./credits-fallback-alert', () => ({
+vi.mock('../credits-fallback-alert', () => ({
   default: () => <div>fallback alert</div>,
 }))
 
-vi.mock('./usage-priority-section', () => ({
+vi.mock('../usage-priority-section', () => ({
   default: () => <div>priority section</div>,
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dropdown-content.spec.tsx
similarity index 97%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dropdown-content.spec.tsx
index c1bdd518e5..424b92c8dd 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/dropdown-content.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/dropdown-content.spec.tsx
@@ -1,8 +1,8 @@
-import type { ModelProvider } from '../../declarations'
-import type { CredentialPanelState } from '../use-credential-panel-state'
+import type { ModelProvider } from '../../../declarations'
+import type { CredentialPanelState } from '../../use-credential-panel-state'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../declarations'
-import DropdownContent from './dropdown-content'
+import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../../declarations'
+import DropdownContent from '../dropdown-content'
 
 const mockHandleOpenModal = vi.fn()
 const mockActivate = vi.fn()
@@ -11,11 +11,11 @@ const mockCloseConfirmDelete = vi.fn()
 const mockHandleConfirmDelete = vi.fn()
 let mockDeleteCredentialId: string | null = null
 
-vi.mock('../use-trial-credits', () => ({
+vi.mock('../../use-trial-credits', () => ({
   useTrialCredits: () => ({ credits: 0, totalCredits: 10_000, isExhausted: true, isLoading: false }),
 }))
 
-vi.mock('./use-activate-credential', () => ({
+vi.mock('../use-activate-credential', () => ({
   useActivateCredential: () => ({
     selectedCredentialId: 'cred-1',
     isActivating: false,
@@ -23,7 +23,7 @@ vi.mock('./use-activate-credential', () => ({
   }),
 }))
 
-vi.mock('../../model-auth/hooks', () => ({
+vi.mock('../../../model-auth/hooks', () => ({
   useAuth: () => ({
     openConfirmDelete: mockOpenConfirmDelete,
     closeConfirmDelete: mockCloseConfirmDelete,
@@ -34,7 +34,7 @@ vi.mock('../../model-auth/hooks', () => ({
   }),
 }))
 
-vi.mock('../../model-auth/authorized/credential-item', () => ({
+vi.mock('../../../model-auth/authorized/credential-item', () => ({
   default: ({ credential, onItemClick, onEdit, onDelete }: {
     credential: { credential_id: string, credential_name: string }
     onItemClick?: (c: unknown) => void
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
similarity index 95%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
index e1bec972f0..11b6b87084 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/index.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/index.spec.tsx
@@ -1,10 +1,10 @@
-import type { ModelProvider } from '../../declarations'
-import type { CredentialPanelState } from '../use-credential-panel-state'
+import type { ModelProvider } from '../../../declarations'
+import type { CredentialPanelState } from '../../use-credential-panel-state'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../declarations'
-import ModelAuthDropdown from './index'
+import { CustomConfigurationStatusEnum, PreferredProviderTypeEnum } from '../../../declarations'
+import ModelAuthDropdown from '../index'
 
-vi.mock('../../model-auth/hooks', () => ({
+vi.mock('../../../model-auth/hooks', () => ({
   useAuth: () => ({
     openConfirmDelete: vi.fn(),
     closeConfirmDelete: vi.fn(),
@@ -15,7 +15,7 @@ vi.mock('../../model-auth/hooks', () => ({
   }),
 }))
 
-vi.mock('./use-activate-credential', () => ({
+vi.mock('../use-activate-credential', () => ({
   useActivateCredential: () => ({
     selectedCredentialId: undefined,
     isActivating: false,
@@ -23,7 +23,7 @@ vi.mock('./use-activate-credential', () => ({
   }),
 }))
 
-vi.mock('../use-trial-credits', () => ({
+vi.mock('../../use-trial-credits', () => ({
   useTrialCredits: () => ({ credits: 0, totalCredits: 10_000, isExhausted: true, isLoading: false }),
 }))
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
similarity index 94%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
index 9b5c4689e9..20ef9cf066 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import { PreferredProviderTypeEnum } from '../../declarations'
-import UsagePrioritySection from './usage-priority-section'
+import { PreferredProviderTypeEnum } from '../../../declarations'
+import UsagePrioritySection from '../usage-priority-section'
 
 describe('UsagePrioritySection', () => {
   const onSelect = vi.fn()
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
similarity index 95%
rename from web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.spec.tsx
rename to web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
index 3a2e28720c..d09752277b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/use-activate-credential.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/use-activate-credential.spec.tsx
@@ -1,7 +1,7 @@
-import type { Credential, ModelProvider } from '../../declarations'
+import type { Credential, ModelProvider } from '../../../declarations'
 import { act, renderHook } from '@testing-library/react'
 import Toast from '@/app/components/base/toast'
-import { useActivateCredential } from './use-activate-credential'
+import { useActivateCredential } from '../use-activate-credential'
 
 const mockMutate = vi.fn()
 const mockUpdateModelProviders = vi.fn()
@@ -15,7 +15,7 @@ vi.mock('@/service/use-models', () => ({
   }),
 }))
 
-vi.mock('../../hooks', () => ({
+vi.mock('../../../hooks', () => ({
   useUpdateModelProviders: () => mockUpdateModelProviders,
   useUpdateModelList: () => mockUpdateModelList,
 }))
diff --git a/web/app/components/plugins/hooks.spec.ts b/web/app/components/plugins/__tests__/use-plugins-with-latest-version.spec.ts
similarity index 96%
rename from web/app/components/plugins/hooks.spec.ts
rename to web/app/components/plugins/__tests__/use-plugins-with-latest-version.spec.ts
index 6eeaa99d4c..5e76afa218 100644
--- a/web/app/components/plugins/hooks.spec.ts
+++ b/web/app/components/plugins/__tests__/use-plugins-with-latest-version.spec.ts
@@ -1,9 +1,9 @@
-import type { PluginDetail } from './types'
+import type { PluginDetail } from '../types'
 import { useQuery } from '@tanstack/react-query'
 import { renderHook } from '@testing-library/react'
 import { consoleQuery } from '@/service/client'
-import { usePluginsWithLatestVersion } from './hooks'
-import { PluginSource } from './types'
+import { usePluginsWithLatestVersion } from '../hooks'
+import { PluginSource } from '../types'
 
 vi.mock('@tanstack/react-query', () => ({
   useQuery: vi.fn(),
diff --git a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
index 0d3b638bab..8974965274 100644
--- a/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/__tests__/index.spec.tsx
@@ -9,12 +9,6 @@ import PublishToast from '../publish-toast'
 import RagPipelineChildren from '../rag-pipeline-children'
 import PipelineScreenShot from '../screenshot'
 
-afterEach(async () => {
-  await act(async () => {
-    await new Promise(resolve => setTimeout(resolve, 0))
-  })
-})
-
 const mockPush = vi.fn()
 vi.mock('next/navigation', () => ({
   useParams: () => ({ datasetId: 'test-dataset-id' }),
@@ -874,9 +868,11 @@ describe('RagPipelineChildren', () => {
       ]
 
       if (mockEventSubscriptionCallback) {
-        mockEventSubscriptionCallback({
-          type: 'DSL_EXPORT_CHECK',
-          payload: { data: mockEnvVariables },
+        await act(async () => {
+          mockEventSubscriptionCallback?.({
+            type: 'DSL_EXPORT_CHECK',
+            payload: { data: mockEnvVariables },
+          })
         })
       }
 
@@ -889,8 +885,10 @@ describe('RagPipelineChildren', () => {
       render(<RagPipelineChildren />)
 
       if (mockEventSubscriptionCallback) {
-        mockEventSubscriptionCallback({
-          type: 'OTHER_EVENT',
+        act(() => {
+          mockEventSubscriptionCallback?.({
+            type: 'OTHER_EVENT',
+          })
         })
       }
 
@@ -936,9 +934,11 @@ describe('RagPipelineChildren', () => {
       ]
 
       if (mockEventSubscriptionCallback) {
-        mockEventSubscriptionCallback({
-          type: 'DSL_EXPORT_CHECK',
-          payload: { data: mockEnvVariables },
+        await act(async () => {
+          mockEventSubscriptionCallback?.({
+            type: 'DSL_EXPORT_CHECK',
+            payload: { data: mockEnvVariables },
+          })
         })
       }
 
@@ -955,9 +955,11 @@ describe('RagPipelineChildren', () => {
       ]
 
       if (mockEventSubscriptionCallback) {
-        mockEventSubscriptionCallback({
-          type: 'DSL_EXPORT_CHECK',
-          payload: { data: mockEnvVariables },
+        await act(async () => {
+          mockEventSubscriptionCallback?.({
+            type: 'DSL_EXPORT_CHECK',
+            payload: { data: mockEnvVariables },
+          })
         })
       }
 
@@ -980,9 +982,11 @@ describe('RagPipelineChildren', () => {
       ]
 
       if (mockEventSubscriptionCallback) {
-        mockEventSubscriptionCallback({
-          type: 'DSL_EXPORT_CHECK',
-          payload: { data: mockEnvVariables },
+        await act(async () => {
+          mockEventSubscriptionCallback?.({
+            type: 'DSL_EXPORT_CHECK',
+            payload: { data: mockEnvVariables },
+          })
         })
       }
 
diff --git a/web/app/components/tools/workflow-tool/utils.test.ts b/web/app/components/tools/workflow-tool/__tests__/utils.test.ts
similarity index 97%
rename from web/app/components/tools/workflow-tool/utils.test.ts
rename to web/app/components/tools/workflow-tool/__tests__/utils.test.ts
index ef95699af6..579adee10f 100644
--- a/web/app/components/tools/workflow-tool/utils.test.ts
+++ b/web/app/components/tools/workflow-tool/__tests__/utils.test.ts
@@ -1,6 +1,6 @@
-import type { WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema } from '../types'
+import type { WorkflowToolProviderOutputParameter, WorkflowToolProviderOutputSchema } from '../../types'
 import { VarType } from '@/app/components/workflow/types'
-import { buildWorkflowOutputParameters } from './utils'
+import { buildWorkflowOutputParameters } from '../utils'
 
 describe('buildWorkflowOutputParameters', () => {
   it('returns provided output parameters when array input exists', () => {
diff --git a/web/docs/test.md b/web/docs/test.md
index 6aa4024fab..1f82f59234 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -9,7 +9,8 @@ When I ask you to write/refactor/fix tests, follow these rules by default.
 - **Framework**: Next.js 15 + React 19 + TypeScript
 - **Testing Tools**: Vitest 4.0.16 + React Testing Library 16.0
 - **Test Environment**: jsdom
-- **File Naming**: `ComponentName.spec.tsx` (same directory as component)
+- **File Naming**: `ComponentName.spec.tsx` inside a same-level `__tests__/` directory
+- **Placement Rule**: Component, hook, and utility tests must live in a sibling `__tests__/` folder at the same level as the source under test. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
 
 ## Running Tests