test: add comprehensive unit and integration tests for dataset module (#32187)

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

web/app/components/datasets/extra-info/api-access/__tests__/card.spec.tsx

@@ -0,0 +1,186 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import Card from '../card'
+
+// Shared mock state for context selectors
+let mockDatasetId: string | undefined = 'dataset-123'
+let mockMutateDatasetRes: ReturnType<typeof vi.fn> = vi.fn()
+let mockIsCurrentWorkspaceManager = true
+
+vi.mock('@/context/dataset-detail', () => ({
+  useDatasetDetailContextWithSelector: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({
+      dataset: { id: mockDatasetId },
+      mutateDatasetRes: mockMutateDatasetRes,
+    }),
+}))
+
+vi.mock('@/context/app-context', () => ({
+  useSelector: (selector: (state: Record<string, unknown>) => unknown) =>
+    selector({ isCurrentWorkspaceManager: mockIsCurrentWorkspaceManager }),
+}))
+
+const mockEnableApi = vi.fn()
+const mockDisableApi = vi.fn()
+
+vi.mock('@/service/knowledge/use-dataset', () => ({
+  useEnableDatasetServiceApi: () => ({
+    mutateAsync: mockEnableApi,
+  }),
+  useDisableDatasetServiceApi: () => ({
+    mutateAsync: mockDisableApi,
+  }),
+}))
+
+vi.mock('@/hooks/use-api-access-url', () => ({
+  useDatasetApiAccessUrl: () => 'https://docs.dify.ai/api-reference/datasets',
+}))
+
+describe('Card (API Access)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockDatasetId = 'dataset-123'
+    mockMutateDatasetRes = vi.fn()
+    mockIsCurrentWorkspaceManager = true
+  })
+
+  // Rendering: verifies enabled/disabled states render correctly
+  describe('Rendering', () => {
+    it('should render without crashing when api is enabled', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/serviceApi\.enabled/)).toBeInTheDocument()
+    })
+
+    it('should render without crashing when api is disabled', () => {
+      render(<Card apiEnabled={false} />)
+      expect(screen.getByText(/serviceApi\.disabled/)).toBeInTheDocument()
+    })
+
+    it('should render API access tip text', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/appMenus\.apiAccessTip/)).toBeInTheDocument()
+    })
+
+    it('should render API reference link', () => {
+      render(<Card apiEnabled={true} />)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('href', 'https://docs.dify.ai/api-reference/datasets')
+    })
+
+    it('should render API doc text in link', () => {
+      render(<Card apiEnabled={true} />)
+      expect(screen.getByText(/apiInfo\.doc/)).toBeInTheDocument()
+    })
+
+    it('should open API reference link in new tab', () => {
+      render(<Card apiEnabled={true} />)
+      const link = screen.getByRole('link')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+  })
+
+  // Props: tests enabled/disabled visual states
+  describe('Props', () => {
+    it('should show green indicator text when enabled', () => {
+      render(<Card apiEnabled={true} />)
+      const enabledText = screen.getByText(/serviceApi\.enabled/)
+      expect(enabledText).toHaveClass('text-text-success')
+    })
+
+    it('should show warning text when disabled', () => {
+      render(<Card apiEnabled={false} />)
+      const disabledText = screen.getByText(/serviceApi\.disabled/)
+      expect(disabledText).toHaveClass('text-text-warning')
+    })
+  })
+
+  // User Interactions: tests toggle behavior
+  describe('User Interactions', () => {
+    it('should call enableDatasetServiceApi when toggling on', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalledWith('dataset-123')
+      })
+    })
+
+    it('should call disableDatasetServiceApi when toggling off', async () => {
+      mockDisableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockDisableApi).toHaveBeenCalledWith('dataset-123')
+      })
+    })
+
+    it('should call mutateDatasetRes on successful toggle', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockMutateDatasetRes).toHaveBeenCalled()
+      })
+    })
+
+    it('should not call mutateDatasetRes when result is not success', async () => {
+      mockEnableApi.mockResolvedValue({ result: 'fail' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalled()
+      })
+      expect(mockMutateDatasetRes).not.toHaveBeenCalled()
+    })
+  })
+
+  // Switch disabled state
+  describe('Switch State', () => {
+    it('should disable switch when user is not workspace manager', () => {
+      mockIsCurrentWorkspaceManager = false
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      expect(switchButton).toHaveAttribute('aria-checked', 'true')
+      // Headless UI Switch uses CSS classes for disabled state, not the disabled attribute
+      expect(switchButton).toHaveClass('!cursor-not-allowed', '!opacity-50')
+    })
+
+    it('should enable switch when user is workspace manager', () => {
+      mockIsCurrentWorkspaceManager = true
+      render(<Card apiEnabled={true} />)
+
+      const switchButton = screen.getByRole('switch')
+      expect(switchButton).not.toBeDisabled()
+    })
+  })
+
+  // Edge Cases: tests boundary scenarios
+  describe('Edge Cases', () => {
+    it('should handle undefined dataset id', async () => {
+      mockDatasetId = undefined
+      mockEnableApi.mockResolvedValue({ result: 'success' })
+      render(<Card apiEnabled={false} />)
+
+      const switchButton = screen.getByRole('switch')
+      fireEvent.click(switchButton)
+
+      await waitFor(() => {
+        expect(mockEnableApi).toHaveBeenCalledWith('')
+      })
+    })
+  })
+})

web/app/components/datasets/extra-info/api-access/__tests__/index.spec.tsx

@@ -1,13 +1,6 @@
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import ApiAccess from './index'
-
-// Mock react-i18next
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}))
+import ApiAccess from '../index'
 
 // Mock context and hooks for Card component
 vi.mock('@/context/dataset-detail', () => ({
@@ -34,27 +27,27 @@ afterEach(() => {
 describe('ApiAccess', () => {
   it('should render without crashing', () => {
     render(<ApiAccess expand={true} apiEnabled={true} />)
-    expect(screen.getByText('appMenus.apiAccess')).toBeInTheDocument()
+    expect(screen.getByText('common.appMenus.apiAccess')).toBeInTheDocument()
   })
 
   it('should render API access text when expanded', () => {
     render(<ApiAccess expand={true} apiEnabled={true} />)
-    expect(screen.getByText('appMenus.apiAccess')).toBeInTheDocument()
+    expect(screen.getByText('common.appMenus.apiAccess')).toBeInTheDocument()
   })
 
   it('should not render API access text when collapsed', () => {
     render(<ApiAccess expand={false} apiEnabled={true} />)
-    expect(screen.queryByText('appMenus.apiAccess')).not.toBeInTheDocument()
+    expect(screen.queryByText('common.appMenus.apiAccess')).not.toBeInTheDocument()
   })
 
   it('should render with apiEnabled=true', () => {
     render(<ApiAccess expand={true} apiEnabled={true} />)
-    expect(screen.getByText('appMenus.apiAccess')).toBeInTheDocument()
+    expect(screen.getByText('common.appMenus.apiAccess')).toBeInTheDocument()
   })
 
   it('should render with apiEnabled=false', () => {
     render(<ApiAccess expand={true} apiEnabled={false} />)
-    expect(screen.getByText('appMenus.apiAccess')).toBeInTheDocument()
+    expect(screen.getByText('common.appMenus.apiAccess')).toBeInTheDocument()
   })
 
   it('should be wrapped with React.memo', () => {
@@ -67,7 +60,6 @@ describe('ApiAccess', () => {
       const trigger = container.querySelector('.cursor-pointer')
       expect(trigger).toBeInTheDocument()
 
-      // Click to open
       await act(async () => {
         fireEvent.click(trigger!)
       })