youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 09:28:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tests): add integration tests for explore app list, installed apps, and sidebar lifecycle flows (#32248)

Browse Source 
Co-authored-by: CodingOnStar <hanxujiang@dify.com>
This commit is contained in:
Coding On Star
2026-02-12 10:29:03 +08:00
committed by GitHub
parent b65678bd4c
commit 3fd1eea4d7
27 changed files with 1186 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/app/components/explore/try-app/index.spec.tsx → web/app/components/explore/try-app/__tests__/index.spec.tsx
View File

@ -1,20 +1,8 @@
import type { TryAppInfo } from '@/service/try-app'
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import TryApp from './index'
import { TypeEnum } from './tab'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'tryApp.tabHeader.try': 'Try',
'tryApp.tabHeader.detail': 'Detail',
}
return translations[key] || key
},
}),
}))
import TryApp from '../index'
import { TypeEnum } from '../tab'
vi.mock('@/config', async (importOriginal) => {
const actual = await importOriginal() as object
@ -30,7 +18,7 @@ vi.mock('@/service/use-try-app', () => ({
useGetTryAppInfo: (...args: unknown[]) => mockUseGetTryAppInfo(...args),
}))
vi.mock('./app', () => ({
vi.mock('../app', () => ({
default: ({ appId, appDetail }: { appId: string, appDetail: TryAppInfo }) => (
<div data-testid="app-component" data-app-id={appId} data-mode={appDetail?.mode}>
App Component
@ -38,7 +26,7 @@ vi.mock('./app', () => ({
),
}))
vi.mock('./preview', () => ({
vi.mock('../preview', () => ({
default: ({ appId, appDetail }: { appId: string, appDetail: TryAppInfo }) => (
<div data-testid="preview-component" data-app-id={appId} data-mode={appDetail?.mode}>
Preview Component
@ -46,7 +34,7 @@ vi.mock('./preview', () => ({
),
}))
vi.mock('./app-info', () => ({
vi.mock('../app-info', () => ({
default: ({
appId,
appDetail,
@ -141,8 +129,8 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
expect(screen.getByText('Try')).toBeInTheDocument()
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
})
@ -185,7 +173,6 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
// Find the close button (the one with RiCloseLine icon)
const buttons = document.body.querySelectorAll('button')
expect(buttons.length).toBeGreaterThan(0)
})
@ -203,10 +190,10 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
fireEvent.click(screen.getByText('Detail'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
await waitFor(() => {
expect(document.body.querySelector('[data-testid="preview-component"]')).toBeInTheDocument()
@ -224,18 +211,16 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
// First switch to Detail
fireEvent.click(screen.getByText('Detail'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
await waitFor(() => {
expect(document.body.querySelector('[data-testid="preview-component"]')).toBeInTheDocument()
})
// Then switch back to Try
fireEvent.click(screen.getByText('Try'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.try'))
await waitFor(() => {
expect(document.body.querySelector('[data-testid="app-component"]')).toBeInTheDocument()
@ -256,7 +241,6 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
// Find the button with close icon
const buttons = document.body.querySelectorAll('button')
const closeButton = Array.from(buttons).find(btn =>
btn.querySelector('svg') || btn.className.includes('rounded-[10px]'),
@ -368,10 +352,10 @@ describe('TryApp (main index.tsx)', () => {
)
await waitFor(() => {
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
fireEvent.click(screen.getByText('Detail'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
await waitFor(() => {
const previewComponent = document.body.querySelector('[data-testid="preview-component"]')

26
web/app/components/explore/try-app/tab.spec.tsx → web/app/components/explore/try-app/__tests__/tab.spec.tsx
View File

@ -1,18 +1,6 @@
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import Tab, { TypeEnum } from './tab'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'tryApp.tabHeader.try': 'Try',
'tryApp.tabHeader.detail': 'Detail',
}
return translations[key] || key
},
}),
}))
import Tab, { TypeEnum } from '../tab'
vi.mock('@/config', async (importOriginal) => {
const actual = await importOriginal() as object
@ -31,23 +19,23 @@ describe('Tab', () => {
const mockOnChange = vi.fn()
render(<Tab value={TypeEnum.TRY} onChange={mockOnChange} />)
expect(screen.getByText('Try')).toBeInTheDocument()
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
it('renders tab with DETAIL value selected', () => {
const mockOnChange = vi.fn()
render(<Tab value={TypeEnum.DETAIL} onChange={mockOnChange} />)
expect(screen.getByText('Try')).toBeInTheDocument()
expect(screen.getByText('Detail')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.try')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tabHeader.detail')).toBeInTheDocument()
})
it('calls onChange when clicking a tab', () => {
const mockOnChange = vi.fn()
render(<Tab value={TypeEnum.TRY} onChange={mockOnChange} />)
fireEvent.click(screen.getByText('Detail'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.detail'))
expect(mockOnChange).toHaveBeenCalledWith(TypeEnum.DETAIL)
})
@ -55,7 +43,7 @@ describe('Tab', () => {
const mockOnChange = vi.fn()
render(<Tab value={TypeEnum.DETAIL} onChange={mockOnChange} />)
fireEvent.click(screen.getByText('Try'))
fireEvent.click(screen.getByText('explore.tryApp.tabHeader.try'))
expect(mockOnChange).toHaveBeenCalledWith(TypeEnum.TRY)
})

45
web/app/components/explore/try-app/app-info/index.spec.tsx → web/app/components/explore/try-app/app-info/__tests__/index.spec.tsx
View File

@ -1,29 +1,11 @@
import type { TryAppInfo } from '@/service/try-app'
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import AppInfo from './index'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'types.advanced': 'Advanced',
'types.chatbot': 'Chatbot',
'types.agent': 'Agent',
'types.workflow': 'Workflow',
'types.completion': 'Completion',
'tryApp.createFromSampleApp': 'Create from Sample',
'tryApp.category': 'Category',
'tryApp.requirements': 'Requirements',
}
return translations[key] || key
},
}),
}))
import AppInfo from '../index'
const mockUseGetRequirements = vi.fn()
vi.mock('./use-get-requirements', () => ({
vi.mock('../use-get-requirements', () => ({
default: (...args: unknown[]) => mockUseGetRequirements(...args),
}))
@ -118,7 +100,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('ADVANCED')).toBeInTheDocument()
expect(screen.getByText('APP.TYPES.ADVANCED')).toBeInTheDocument()
})
it('displays CHATBOT for chat mode', () => {
@ -133,7 +115,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('CHATBOT')).toBeInTheDocument()
expect(screen.getByText('APP.TYPES.CHATBOT')).toBeInTheDocument()
})
it('displays AGENT for agent-chat mode', () => {
@ -148,7 +130,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('AGENT')).toBeInTheDocument()
expect(screen.getByText('APP.TYPES.AGENT')).toBeInTheDocument()
})
it('displays WORKFLOW for workflow mode', () => {
@ -163,7 +145,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('WORKFLOW')).toBeInTheDocument()
expect(screen.getByText('APP.TYPES.WORKFLOW')).toBeInTheDocument()
})
it('displays COMPLETION for completion mode', () => {
@ -178,7 +160,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('COMPLETION')).toBeInTheDocument()
expect(screen.getByText('APP.TYPES.COMPLETION')).toBeInTheDocument()
})
})
@ -214,7 +196,6 @@ describe('AppInfo', () => {
/>,
)
// Check that there's no element with the description class that has empty content
const descriptionElements = container.querySelectorAll('.system-sm-regular.mt-\\[14px\\]')
expect(descriptionElements.length).toBe(0)
})
@ -233,7 +214,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('Create from Sample')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.createFromSampleApp')).toBeInTheDocument()
})
it('calls onCreate when button is clicked', () => {
@ -248,7 +229,7 @@ describe('AppInfo', () => {
/>,
)
fireEvent.click(screen.getByText('Create from Sample'))
fireEvent.click(screen.getByText('explore.tryApp.createFromSampleApp'))
expect(mockOnCreate).toHaveBeenCalledTimes(1)
})
})
@ -267,7 +248,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('Category')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.category')).toBeInTheDocument()
expect(screen.getByText('AI Assistant')).toBeInTheDocument()
})
@ -283,7 +264,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.queryByText('Category')).not.toBeInTheDocument()
expect(screen.queryByText('explore.tryApp.category')).not.toBeInTheDocument()
})
})
@ -307,7 +288,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.getByText('Requirements')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.requirements')).toBeInTheDocument()
expect(screen.getByText('OpenAI GPT-4')).toBeInTheDocument()
expect(screen.getByText('Google Search')).toBeInTheDocument()
})
@ -328,7 +309,7 @@ describe('AppInfo', () => {
/>,
)
expect(screen.queryByText('Requirements')).not.toBeInTheDocument()
expect(screen.queryByText('explore.tryApp.requirements')).not.toBeInTheDocument()
})
it('renders requirement icons with correct background image', () => {

3
web/app/components/explore/try-app/app-info/use-get-requirements.spec.ts → web/app/components/explore/try-app/app-info/__tests__/use-get-requirements.spec.ts
View File

@ -1,7 +1,7 @@
import type { TryAppInfo } from '@/service/try-app'
import { renderHook } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import useGetRequirements from './use-get-requirements'
import useGetRequirements from '../use-get-requirements'
const mockUseGetTryAppFlowPreview = vi.fn()
@ -165,7 +165,6 @@ describe('useGetRequirements', () => {
useGetRequirements({ appDetail, appId: 'test-app-id' }),
)
// Only model provider should be included, no disabled tools
expect(result.current.requirements).toHaveLength(1)
expect(result.current.requirements[0].name).toBe('openai')
})

27
web/app/components/explore/try-app/app/chat.spec.tsx → web/app/components/explore/try-app/app/__tests__/chat.spec.tsx
View File

@ -1,19 +1,7 @@
import type { TryAppInfo } from '@/service/try-app'
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import TryApp from './chat'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'chat.resetChat': 'Reset Chat',
'tryApp.tryInfo': 'This is try mode info',
}
return translations[key] || key
},
}),
}))
import TryApp from '../chat'
const mockRemoveConversationIdInfo = vi.fn()
const mockHandleNewConversation = vi.fn()
@ -31,7 +19,7 @@ vi.mock('@/hooks/use-breakpoints', () => ({
},
}))
vi.mock('../../../base/chat/embedded-chatbot/theme/theme-context', () => ({
vi.mock('../../../../base/chat/embedded-chatbot/theme/theme-context', () => ({
useThemeContext: () => ({
primaryColor: '#1890ff',
}),
@ -146,7 +134,7 @@ describe('TryApp (chat.tsx)', () => {
/>,
)
expect(screen.getByText('This is try mode info')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tryInfo')).toBeInTheDocument()
})
it('applies className prop', () => {
@ -160,7 +148,6 @@ describe('TryApp (chat.tsx)', () => {
/>,
)
// The component wraps with EmbeddedChatbotContext.Provider, first child is the div with className
const innerDiv = container.querySelector('.custom-class')
expect(innerDiv).toBeInTheDocument()
})
@ -185,7 +172,6 @@ describe('TryApp (chat.tsx)', () => {
/>,
)
// Reset button should not be present
expect(screen.queryByRole('button')).not.toBeInTheDocument()
})
@ -207,7 +193,6 @@ describe('TryApp (chat.tsx)', () => {
/>,
)
// Should have a button (the reset button)
expect(screen.getByRole('button')).toBeInTheDocument()
})
@ -313,14 +298,12 @@ describe('TryApp (chat.tsx)', () => {
/>,
)
// Find and click the hide button on the alert
const alertElement = screen.getByText('This is try mode info').closest('[class*="alert"]')?.parentElement
const alertElement = screen.getByText('explore.tryApp.tryInfo').closest('[class*="alert"]')?.parentElement
const hideButton = alertElement?.querySelector('button, [role="button"], svg')
if (hideButton) {
fireEvent.click(hideButton)
// After hiding, the alert should not be visible
expect(screen.queryByText('This is try mode info')).not.toBeInTheDocument()
expect(screen.queryByText('explore.tryApp.tryInfo')).not.toBeInTheDocument()
}
})
})

12
web/app/components/explore/try-app/app/index.spec.tsx → web/app/components/explore/try-app/app/__tests__/index.spec.tsx
View File

@ -1,19 +1,13 @@
import type { TryAppInfo } from '@/service/try-app'
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import TryApp from './index'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
import TryApp from '../index'
vi.mock('@/hooks/use-document-title', () => ({
default: vi.fn(),
}))
vi.mock('./chat', () => ({
vi.mock('../chat', () => ({
default: ({ appId, appDetail, className }: { appId: string, appDetail: TryAppInfo, className: string }) => (
<div data-testid="chat-component" data-app-id={appId} data-mode={appDetail.mode} className={className}>
Chat Component
@ -21,7 +15,7 @@ vi.mock('./chat', () => ({
),
}))
vi.mock('./text-generation', () => ({
vi.mock('../text-generation', () => ({
default: ({
appId,
className,

24
web/app/components/explore/try-app/app/text-generation.spec.tsx → web/app/components/explore/try-app/app/__tests__/text-generation.spec.tsx
View File

@ -1,18 +1,7 @@
import type { AppData } from '@/models/share'
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import TextGeneration from './text-generation'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => {
const translations: Record<string, string> = {
'tryApp.tryInfo': 'This is a try app notice',
}
return translations[key] || key
},
}),
}))
import TextGeneration from '../text-generation'
const mockUpdateAppInfo = vi.fn()
const mockUpdateAppParams = vi.fn()
@ -156,7 +145,6 @@ describe('TextGeneration', () => {
)
await waitFor(() => {
// Multiple elements may have the title (header and RunOnce mock)
const titles = screen.getAllByText('Test App Title')
expect(titles.length).toBeGreaterThan(0)
})
@ -275,7 +263,6 @@ describe('TextGeneration', () => {
fireEvent.click(screen.getByTestId('send-button'))
// The send should work without errors
expect(screen.getByTestId('result-component')).toBeInTheDocument()
})
})
@ -298,7 +285,7 @@ describe('TextGeneration', () => {
fireEvent.click(screen.getByTestId('complete-button'))
await waitFor(() => {
expect(screen.getByText('This is a try app notice')).toBeInTheDocument()
expect(screen.getByText('explore.tryApp.tryInfo')).toBeInTheDocument()
})
})
})
@ -384,7 +371,6 @@ describe('TextGeneration', () => {
fireEvent.click(screen.getByTestId('run-start-button'))
// Result panel should remain visible
expect(screen.getByTestId('result-component')).toBeInTheDocument()
})
})
@ -404,10 +390,8 @@ describe('TextGeneration', () => {
expect(screen.getByTestId('inputs-change-button')).toBeInTheDocument()
})
// Trigger input change which should call setInputs callback
fireEvent.click(screen.getByTestId('inputs-change-button'))
// The component should handle the input change without errors
expect(screen.getByTestId('run-once')).toBeInTheDocument()
})
})
@ -425,7 +409,6 @@ describe('TextGeneration', () => {
)
await waitFor(() => {
// Mobile toggle panel should be rendered
const togglePanel = container.querySelector('.cursor-grab')
expect(togglePanel).toBeInTheDocument()
})
@ -447,13 +430,11 @@ describe('TextGeneration', () => {
expect(togglePanel).toBeInTheDocument()
})
// Click to show result panel
const toggleParent = container.querySelector('.cursor-grab')?.parentElement
if (toggleParent) {
fireEvent.click(toggleParent)
}
// Click again to hide result panel
await waitFor(() => {
const newToggleParent = container.querySelector('.cursor-grab')?.parentElement
if (newToggleParent) {
@ -461,7 +442,6 @@ describe('TextGeneration', () => {
}
})
// Component should handle both show and hide without errors
expect(screen.getByTestId('result-component')).toBeInTheDocument()
})
})

11
web/app/components/explore/try-app/preview/basic-app-preview.spec.tsx → web/app/components/explore/try-app/preview/__tests__/basic-app-preview.spec.tsx
View File

@ -1,12 +1,6 @@
import { cleanup, render, screen, waitFor } from '@testing-library/react'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import BasicAppPreview from './basic-app-preview'
vi.mock('react-i18next', () => ({
useTranslation: () => ({
t: (key: string) => key,
}),
}))
import BasicAppPreview from '../basic-app-preview'
const mockUseGetTryAppInfo = vi.fn()
const mockUseAllToolProviders = vi.fn()
@ -22,7 +16,7 @@ vi.mock('@/service/use-tools', () => ({
useAllToolProviders: () => mockUseAllToolProviders(),
}))
vi.mock('../../../header/account-setting/model-provider-page/hooks', () => ({
vi.mock('../../../../header/account-setting/model-provider-page/hooks', () => ({
useTextGenerationCurrentProviderAndModelAndModelList: (...args: unknown[]) =>
mockUseTextGenerationCurrentProviderAndModelAndModelList(...args),
}))
@ -518,7 +512,6 @@ describe('BasicAppPreview', () => {
render(<BasicAppPreview appId="test-app-id" />)
// Should still render (with default model config)
await waitFor(() => {
expect(mockUseGetTryAppDataSets).toHaveBeenCalled()
})

2
web/app/components/explore/try-app/preview/flow-app-preview.spec.tsx → web/app/components/explore/try-app/preview/__tests__/flow-app-preview.spec.tsx
View File

@ -1,6 +1,6 @@
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import FlowAppPreview from './flow-app-preview'
import FlowAppPreview from '../flow-app-preview'
const mockUseGetTryAppFlowPreview = vi.fn()

6
web/app/components/explore/try-app/preview/index.spec.tsx → web/app/components/explore/try-app/preview/__tests__/index.spec.tsx
View File

@ -1,9 +1,9 @@
import type { TryAppInfo } from '@/service/try-app'
import { cleanup, render, screen } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'
import Preview from './index'
import Preview from '../index'
vi.mock('./basic-app-preview', () => ({
vi.mock('../basic-app-preview', () => ({
default: ({ appId }: { appId: string }) => (
<div data-testid="basic-app-preview" data-app-id={appId}>
BasicAppPreview
@ -11,7 +11,7 @@ vi.mock('./basic-app-preview', () => ({
),
}))
vi.mock('./flow-app-preview', () => ({
vi.mock('../flow-app-preview', () => ({
default: ({ appId, className }: { appId: string, className?: string }) => (
<div data-testid="flow-app-preview" data-app-id={appId} className={className}>
FlowAppPreview