refactor(web): exercise real frontend behavior in tests

oxlint-suppressions.json

@@ -1752,16 +1752,6 @@
       "count": 1
     }
   },
-  "web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/hidden-fields.spec.tsx": {
-    "eslint-react/static-components": {
-      "count": 4
-    }
-  },
-  "web/app/components/rag-pipeline/components/panel/input-field/editor/form/__tests__/show-all-settings.spec.tsx": {
-    "eslint-react/static-components": {
-      "count": 4
-    }
-  },
   "web/app/components/rag-pipeline/components/panel/input-field/editor/form/hidden-fields.tsx": {
     "eslint-react/static-components": {
       "count": 2

web/__tests__/base/notion-page-selector-flow.test.tsx

@@ -1,14 +1,14 @@
 import type { DatasourceCredentialResponse } from '@dify/contracts/api/console/auth/types.gen'
 import type { DataSourceNotionWorkspace } from '@/models/common'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render as renderWithoutUrlState, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vite-plus/test'
 import NotionPageSelector from '@/app/components/base/notion-page-selector/base'
 import { CredentialTypeEnum } from '@/app/components/plugins/plugin-auth/types'
 import { consoleQuery } from '@/service/console'
+import { createNuqsTestRenderer } from '@/test/nuqs-testing'
 
 const mockInvalidPreImportNotionPages = vi.fn()
-const mockSetSettingsDestination = vi.fn()
 const mockUsePreImportNotionPages = vi.fn()
 
 vi.mock('@tanstack/react-virtual', () => ({
@@ -43,11 +43,6 @@ vi.mock('@tanstack/react-query', async (importOriginal) => {
   }
 })
 
-vi.mock('nuqs', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('nuqs')>()
-  return { ...actual, useQueryState: () => [null, mockSetSettingsDestination] }
-})
-
 const buildCredential = (
   id: string,
   name: string,
@@ -122,6 +117,9 @@ const workspacePagesByCredential: Record<string, DataSourceNotionWorkspace[]> =
   ],
 }
 
+const onUrlUpdate = vi.fn()
+const render = createNuqsTestRenderer(renderWithoutUrlState, () => ({ onUrlUpdate }))
+
 describe('Base Notion Page Selector Flow', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -209,6 +207,8 @@ describe('Base Notion Page Selector Flow', () => {
     await user.click(
       screen.getByRole('button', { name: 'common.dataSource.notion.selector.configure' }),
     )
-    expect(mockSetSettingsDestination).toHaveBeenCalledWith('data-source')
+    await waitFor(() =>
+      expect(onUrlUpdate.mock.lastCall?.[0].searchParams.get('settings')).toBe('data-source'),
+    )
   })
 })

web/__tests__/file-supported-formats.spec.tsx

@@ -8,15 +8,7 @@ import { BlockEnum } from '@/app/components/workflow/types'
 import { LanguagesSupported } from '@/i18n/language'
 import { consoleQuery } from '@/service/console'
 import { createConsoleQueryClient, renderWithConsoleQuery } from '@/test/console/query-data'
-
-vi.mock('@tanstack/react-query', async (importOriginal) => {
-  const { mockConsoleOperationHooks } = await import('@/test/console/operation-hooks')
-  return mockConsoleOperationHooks(await importOriginal(), {
-    'files.upload.get': () => ({
-      data: { file_size_limit: 15, batch_count_limit: 5, file_upload_limit: 10 },
-    }),
-  })
-})
+import { createFileUploadConfigFixture } from '@/test/fixtures/file-upload-config'
 
 let mockLocale = 'en-US'
 const request = vi.hoisted(() => vi.fn<(url: string) => Promise<Response>>())
@@ -74,6 +66,10 @@ beforeEach(() => {
 describe('file supported formats across upload and document extraction', () => {
   it('shares the raw supported-formats response with the uploader across locale changes', async () => {
     const queryClient = createConsoleQueryClient()
+    queryClient.setQueryData(
+      consoleQuery.files.upload.get.queryKey(),
+      createFileUploadConfigFixture({ file_upload_limit: 10 }),
+    )
     const response = { allowed_extensions: ['PDF', 'pdf', 'md', 'md', 'DOCX', 'docx'] }
     request.mockImplementation(async () => Response.json(response))
     const consumers = () => (

web/app/(commonLayout)/__tests__/external-service-sync.spec.tsx

@@ -1,6 +1,8 @@
-import { render, waitFor } from '@testing-library/react'
+import type { ReactElement } from 'react'
+import { waitFor } from '@testing-library/react'
 import { REGISTRATION_SUCCESS_STORAGE_KEY } from '@/app/components/base/amplitude/registration-session-state'
 import { rememberRegistrationSuccess } from '@/app/components/base/amplitude/registration-tracking'
+import { renderWithConsoleQuery } from '@/test/console/query-data'
 import { AmplitudeIdentitySync } from '../external-service-sync'
 
 const { mockSetUserId, mockSetUserProperties, mockTrackEvent } = vi.hoisted(() => ({
@@ -11,38 +13,6 @@ const { mockSetUserId, mockSetUserProperties, mockTrackEvent } = vi.hoisted(() =
   })),
 }))
 
-vi.mock('@tanstack/react-query', async (importOriginal) => {
-  const original = await importOriginal<typeof import('@tanstack/react-query')>()
-  return {
-    ...original,
-    useSuspenseQuery: () => ({
-      data: {
-        id: 'account-id',
-        email: 'person@example.com',
-        name: 'Person',
-        is_password_set: true,
-      },
-    }),
-  }
-})
-
-vi.mock('jotai', async (importOriginal) => {
-  const original = await importOriginal<typeof import('jotai')>()
-  return {
-    ...original,
-    useAtomValue: () => ({
-      id: 'workspace-id',
-      name: 'Workspace',
-      plan: 'professional',
-      role: 'owner',
-    }),
-  }
-})
-
-vi.mock('@/features/account-profile/client', () => ({
-  userProfileQueryOptions: () => ({}),
-}))
-
 vi.mock('@/app/components/base/amplitude', () => ({
   setUserId: (...args: unknown[]) => mockSetUserId(...args),
   setUserProperties: (...args: unknown[]) => mockSetUserProperties(...args),
@@ -65,6 +35,22 @@ vi.mock('@/app/components/base/analytics-consent/consent-store', async (importOr
   }
 })
 
+const render = (ui: ReactElement) =>
+  renderWithConsoleQuery(ui, {
+    accountProfile: {
+      id: 'account-id',
+      email: 'person@example.com',
+      name: 'Person',
+      is_password_set: true,
+    },
+    currentWorkspace: {
+      id: 'workspace-id',
+      name: 'Workspace',
+      plan: 'professional',
+      role: 'owner',
+    },
+  })
+
 describe('AmplitudeIdentitySync', () => {
   beforeEach(() => {
     vi.clearAllMocks()

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/__tests__/layout-main.spec.tsx

@@ -1,6 +1,7 @@
 import { screen, waitFor } from '@testing-library/react'
 import { createHttpError } from '@/service/http-error'
-import { renderWithConsoleQuery } from '@/test/console/query-data'
+import { renderWithConsoleQuery as renderWithConsoleQueryWithoutUrlState } from '@/test/console/query-data'
+import { createNuqsTestRenderer } from '@/test/nuqs-testing'
 import { DatasetACLPermission } from '@/utils/permission'
 import CreateDocumentsPage from '../documents/create/page'
 import DatasetDetailLayout from '../layout-main'
@@ -12,6 +13,12 @@ const mockNavigation = vi.hoisted(() => ({
   useRouter: vi.fn(),
 }))
 
+const onUrlUpdate = vi.fn()
+const renderWithConsoleQuery = createNuqsTestRenderer(
+  renderWithConsoleQueryWithoutUrlState,
+  () => ({ onUrlUpdate }),
+)
+
 const render = (ui: Parameters<typeof renderWithConsoleQuery>[0]) =>
   renderWithConsoleQuery(ui, {
     systemFeatures: {
@@ -23,11 +30,6 @@ vi.mock('@/next/navigation', () => mockNavigation)
 
 const { mockDatasetDetailQuery } = vi.hoisted(() => ({ mockDatasetDetailQuery: vi.fn() }))
 
-vi.mock('nuqs', async (importOriginal) => ({
-  ...(await importOriginal<typeof import('nuqs')>()),
-  useQueryState: () => [null, vi.fn()],
-}))
-
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
   useDefaultModel: () => ({ data: undefined }),
 }))

web/app/(humanInputLayout)/form/[token]/__tests__/form.spec.tsx

@@ -1,11 +1,15 @@
 import type { FormData } from '../form'
 import type { HumanInputFieldValue } from '@/app/components/base/chat/chat/answer/human-input-content/field-renderer'
-import { act, render, renderHook, screen } from '@testing-library/react'
+import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
 import { InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { createHttpError } from '@/service/http-error'
+import {
+  renderWithConsoleQuery as render,
+  renderHookWithConsoleQuery as renderHook,
+} from '@/test/console/query-data'
 import { TransferMethod } from '@/types/app'
 import FormContent from '../form'
 import { useFormSubmit } from '../use-form-submit'
@@ -40,12 +44,13 @@ vi.mock('@/next/navigation', () => ({
   useParams: () => ({ token: 'token-123' }),
 }))
 
-vi.mock('@/service/use-share', () => ({
+vi.mock('@/service/use-share', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/service/use-share')>()),
   useGetHumanInputForm: (...args: unknown[]) => mockUseGetHumanInputForm(...args),
-  useSubmitHumanInputForm: () => ({
-    mutate: mockSubmitForm,
-    isPending: false,
-  }),
+}))
+vi.mock('@/service/share', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@/service/share')>()),
+  submitHumanInputForm: mockSubmitForm,
 }))
 
 vi.mock('@/hooks/use-document-title', () => ({
@@ -182,6 +187,7 @@ describe('Human input share form', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockSubmitForm.mockResolvedValue({})
     mockContentItemState.staleAttachmentInputChange = undefined
     mockUseGetHumanInputForm.mockReturnValue({
       data: formData,
@@ -281,26 +287,20 @@ describe('Human input share form', () => {
     await user.click(screen.getByRole('button', { name: 'share-update-attachments' }))
     await user.click(screen.getByRole('button', { name: 'Approve' }))
 
-    expect(mockSubmitForm).toHaveBeenCalledWith(
-      {
-        token: 'token-123',
-        data: {
-          action: 'approve',
-          inputs: {
-            summary: 'updated summary',
-            attachments: [
-              {
-                type: 'document',
-                transfer_method: TransferMethod.local_file,
-                url: '',
-                upload_file_id: 'upload-file-1',
-              },
-            ],
-          },
+    await waitFor(() =>
+      expect(mockSubmitForm).toHaveBeenCalledWith('token-123', {
+        action: 'approve',
+        inputs: {
+          summary: 'updated summary',
+          attachments: [
+            {
+              type: 'document',
+              transfer_method: TransferMethod.local_file,
+              url: '',
+              upload_file_id: 'upload-file-1',
+            },
+          ],
         },
-      },
-      expect.objectContaining({
-        onSuccess: expect.any(Function),
       }),
     )
   })
@@ -314,17 +314,12 @@ describe('Human input share form', () => {
     await user.click(screen.getByRole('button', { name: 'share-update-attachments' }))
     await user.click(screen.getByRole('button', { name: 'Approve' }))
 
-    const options = mockSubmitForm.mock.calls[0]![1] as { onSuccess: () => void }
-    act(() => {
-      options.onSuccess()
-    })
-
-    expect(screen.getByText('share.humanInput.thanks')).toBeInTheDocument()
+    expect(await screen.findByText('share.humanInput.thanks')).toBeInTheDocument()
     expect(screen.getByText('share.humanInput.recorded')).toBeInTheDocument()
     expect(screen.getByText('share.humanInput.submissionID:{"id":"token-123"}')).toBeInTheDocument()
   })
 
-  it('should submit empty inputs when there are no form values to process', () => {
+  it('should submit empty inputs when there are no form values to process', async () => {
     const { result } = renderHook(() => useFormSubmit('token-empty'))
 
     act(() => {
@@ -335,16 +330,10 @@ describe('Human input share form', () => {
       )
     })
 
-    expect(mockSubmitForm).toHaveBeenCalledWith(
-      {
-        token: 'token-empty',
-        data: {
-          action: 'reject',
-          inputs: {},
-        },
-      },
-      expect.objectContaining({
-        onSuccess: expect.any(Function),
+    await waitFor(() =>
+      expect(mockSubmitForm).toHaveBeenCalledWith('token-empty', {
+        action: 'reject',
+        inputs: {},
       }),
     )
   })
@@ -357,26 +346,20 @@ describe('Human input share form', () => {
     await user.click(screen.getByRole('button', { name: 'share-update-attachments' }))
     await user.click(screen.getByRole('button', { name: 'Approve' }))
 
-    expect(mockSubmitForm).toHaveBeenCalledWith(
-      {
-        token: 'token-123',
-        data: {
-          action: 'approve',
-          inputs: {
-            summary: 'initial summary',
-            attachments: [
-              {
-                type: 'document',
-                transfer_method: TransferMethod.local_file,
-                url: '',
-                upload_file_id: 'upload-file-1',
-              },
-            ],
-          },
+    await waitFor(() =>
+      expect(mockSubmitForm).toHaveBeenCalledWith('token-123', {
+        action: 'approve',
+        inputs: {
+          summary: 'initial summary',
+          attachments: [
+            {
+              type: 'document',
+              transfer_method: TransferMethod.local_file,
+              url: '',
+              upload_file_id: 'upload-file-1',
+            },
+          ],
         },
-      },
-      expect.objectContaining({
-        onSuccess: expect.any(Function),
       }),
     )
   })

web/app/(shareLayout)/webapp-reset-password/set-password/__tests__/page.spec.tsx

@@ -4,10 +4,6 @@ import { useRouter, useSearchParams } from '@/next/navigation'
 import { changeWebAppPasswordWithToken } from '@/service/common'
 import ChangePasswordForm from '../page'
 
-vi.mock('ahooks', () => ({
-  useCountDown: () => [5000],
-}))
-
 vi.mock('@/next/navigation', () => ({
   useRouter: vi.fn(),
   useSearchParams: vi.fn(),