- {chatList?.map((item: any) => (
+ {items.map((item: ChatItem) => (
{item.content}
@@ -434,14 +451,21 @@ jest.mock('@/app/components/base/chat/chat', () => {
>
Send
+
{isResponding && (
)}
- {suggestedQuestions?.length > 0 && (
+ {suggested.length > 0 && (
- {suggestedQuestions.map((q: string, i: number) => (
+ {suggested.map((q: string, i: number) => (
@@ -451,7 +475,13 @@ jest.mock('@/app/components/base/chat/chat', () => {
{onRegenerate && (
@@ -506,12 +536,30 @@ jest.mock('@/app/components/base/chat/chat', () => {
// ============================================================================
describe('DebugWithSingleModel', () => {
- let ref: React.RefObject
+ let ref: RefObject
beforeEach(() => {
jest.clearAllMocks()
ref = createRef()
+ const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+ const { useProviderContext } = require('@/context/provider-context')
+ const { useAppContext } = require('@/context/app-context')
+ const { useConfigFromDebugContext, useFormattingChangedSubscription } = require('../hooks')
+ const { useFeatures } = require('@/app/components/base/features/hooks') as { useFeatures: jest.Mock }
+
+ useDebugConfigurationContext.mockReturnValue(mockDebugConfigContext)
+ useProviderContext.mockReturnValue(mockProviderContext)
+ useAppContext.mockReturnValue(mockAppContext)
+ useConfigFromDebugContext.mockReturnValue(mockConfigFromDebugContext)
+ useFormattingChangedSubscription.mockReturnValue(undefined)
+ mockFeaturesState = { ...defaultFeatures }
+ useFeatures.mockImplementation((selector?: FeatureSelector) => {
+ if (typeof selector === 'function')
+ return selector({ features: mockFeaturesState })
+ return mockFeaturesState
+ })
+
// Reset mock implementations
mockFetchConversationMessages.mockResolvedValue({ data: [] })
mockFetchSuggestedQuestions.mockResolvedValue({ data: [] })
@@ -521,7 +569,7 @@ describe('DebugWithSingleModel', () => {
// Rendering Tests
describe('Rendering', () => {
it('should render without crashing', () => {
- render(} />)
+ render(} />)
// Verify Chat component is rendered
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
@@ -532,7 +580,7 @@ describe('DebugWithSingleModel', () => {
it('should render with custom checkCanSend prop', () => {
const checkCanSend = jest.fn(() => true)
- render(} checkCanSend={checkCanSend} />)
+ render(} checkCanSend={checkCanSend} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -543,122 +591,88 @@ describe('DebugWithSingleModel', () => {
it('should respect checkCanSend returning true', async () => {
const checkCanSend = jest.fn(() => true)
- render(} checkCanSend={checkCanSend} />)
+ render(} checkCanSend={checkCanSend} />)
const sendButton = screen.getByTestId('send-button')
fireEvent.click(sendButton)
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
await waitFor(() => {
expect(checkCanSend).toHaveBeenCalled()
+ expect(ssePost).toHaveBeenCalled()
})
+
+ expect(ssePost.mock.calls[0][0]).toBe('apps/test-app-id/chat-messages')
})
it('should prevent send when checkCanSend returns false', async () => {
const checkCanSend = jest.fn(() => false)
- render(} checkCanSend={checkCanSend} />)
+ render(} checkCanSend={checkCanSend} />)
const sendButton = screen.getByTestId('send-button')
fireEvent.click(sendButton)
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
await waitFor(() => {
expect(checkCanSend).toHaveBeenCalled()
expect(checkCanSend).toHaveReturnedWith(false)
})
+ expect(ssePost).not.toHaveBeenCalled()
})
})
- // Context Integration Tests
- describe('Context Integration', () => {
- it('should use debug configuration context', () => {
- const { useDebugConfigurationContext } = require('@/context/debug-configuration')
+ // User Interactions
+ describe('User Interactions', () => {
+ it('should open feature configuration when feature bar is clicked', () => {
+ render(} />)
- render(} />)
+ fireEvent.click(screen.getByTestId('feature-bar-button'))
- expect(useDebugConfigurationContext).toHaveBeenCalled()
- })
-
- it('should use provider context for model list', () => {
- const { useProviderContext } = require('@/context/provider-context')
-
- render(} />)
-
- expect(useProviderContext).toHaveBeenCalled()
- })
-
- it('should use app context for user profile', () => {
- const { useAppContext } = require('@/context/app-context')
-
- render(} />)
-
- expect(useAppContext).toHaveBeenCalled()
- })
-
- it('should use features from features hook', () => {
- const { useFeatures } = require('@/app/components/base/features/hooks')
-
- render(} />)
-
- expect(useFeatures).toHaveBeenCalled()
- })
-
- it('should use config from debug context hook', () => {
- const { useConfigFromDebugContext } = require('../hooks')
-
- render(} />)
-
- expect(useConfigFromDebugContext).toHaveBeenCalled()
- })
-
- it('should subscribe to formatting changes', () => {
- const { useFormattingChangedSubscription } = require('../hooks')
-
- render(} />)
-
- expect(useFormattingChangedSubscription).toHaveBeenCalled()
+ expect(mockSetShowAppConfigureFeaturesModal).toHaveBeenCalledWith(true)
})
})
// Model Configuration Tests
describe('Model Configuration', () => {
- it('should merge features into config correctly when all features enabled', () => {
- const { useFeatures } = require('@/app/components/base/features/hooks')
+ it('should include opening features in request when enabled', async () => {
+ mockFeaturesState = {
+ ...defaultFeatures,
+ opening: { enabled: true, opening_statement: 'Hello!', suggested_questions: ['Q1'] },
+ }
- useFeatures.mockReturnValue((selector: any) => {
- const features = {
- moreLikeThis: { enabled: true },
- opening: { enabled: true, opening_statement: 'Hello!', suggested_questions: ['Q1'] },
- moderation: { enabled: true },
- speech2text: { enabled: true },
- text2speech: { enabled: true },
- file: { enabled: true },
- suggested: { enabled: true },
- citation: { enabled: true },
- annotationReply: { enabled: true },
- }
- return typeof selector === 'function' ? selector({ features }) : features
+ render(} />)
+
+ fireEvent.click(screen.getByTestId('send-button'))
+
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+ await waitFor(() => {
+ expect(ssePost).toHaveBeenCalled()
})
- render(} />)
-
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+ const body = ssePost.mock.calls[0][1].body
+ expect(body.model_config.opening_statement).toBe('Hello!')
+ expect(body.model_config.suggested_questions).toEqual(['Q1'])
})
- it('should handle opening feature disabled correctly', () => {
- const { useFeatures } = require('@/app/components/base/features/hooks')
+ it('should omit opening statement when feature is disabled', async () => {
+ mockFeaturesState = {
+ ...defaultFeatures,
+ opening: { enabled: false, opening_statement: 'Should not appear', suggested_questions: ['Q1'] },
+ }
- useFeatures.mockReturnValue((selector: any) => {
- const features = {
- ...mockFeatures,
- opening: { enabled: false, opening_statement: 'Should not appear', suggested_questions: ['Q1'] },
- }
- return typeof selector === 'function' ? selector({ features }) : features
+ render(} />)
+
+ fireEvent.click(screen.getByTestId('send-button'))
+
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+ await waitFor(() => {
+ expect(ssePost).toHaveBeenCalled()
})
- render(} />)
-
- // When opening is disabled, opening_statement should be empty
- expect(screen.queryByText('Should not appear')).not.toBeInTheDocument()
+ const body = ssePost.mock.calls[0][1].body
+ expect(body.model_config.opening_statement).toBe('')
+ expect(body.model_config.suggested_questions).toEqual([])
})
it('should handle model without vision support', () => {
@@ -689,7 +703,7 @@ describe('DebugWithSingleModel', () => {
],
}))
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -710,7 +724,7 @@ describe('DebugWithSingleModel', () => {
],
}))
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -735,7 +749,7 @@ describe('DebugWithSingleModel', () => {
}),
})
- render(} />)
+ render(} />)
// Component should render successfully with filtered variables
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
@@ -754,7 +768,7 @@ describe('DebugWithSingleModel', () => {
}),
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -763,7 +777,7 @@ describe('DebugWithSingleModel', () => {
// Tool Icons Tests
describe('Tool Icons', () => {
it('should map tool icons from collection list', () => {
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -783,7 +797,7 @@ describe('DebugWithSingleModel', () => {
}),
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -812,7 +826,7 @@ describe('DebugWithSingleModel', () => {
collectionList: [],
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -828,7 +842,7 @@ describe('DebugWithSingleModel', () => {
inputs: {},
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -846,7 +860,7 @@ describe('DebugWithSingleModel', () => {
},
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -859,7 +873,7 @@ describe('DebugWithSingleModel', () => {
completionParams: {},
})
- render(} />)
+ render(} />)
expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
@@ -868,7 +882,7 @@ describe('DebugWithSingleModel', () => {
// Imperative Handle Tests
describe('Imperative Handle', () => {
it('should expose handleRestart method via ref', () => {
- render(} />)
+ render(} />)
expect(ref.current).not.toBeNull()
expect(ref.current?.handleRestart).toBeDefined()
@@ -876,65 +890,26 @@ describe('DebugWithSingleModel', () => {
})
it('should call handleRestart when invoked via ref', () => {
- render(} />)
+ render(} />)
- expect(() => {
+ act(() => {
ref.current?.handleRestart()
- }).not.toThrow()
- })
- })
-
- // Memory and Performance Tests
- describe('Memory and Performance', () => {
- it('should properly memoize component', () => {
- const { rerender } = render(} />)
-
- // Re-render with same props
- rerender(} />)
-
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
- })
-
- it('should have displayName set for debugging', () => {
- expect(DebugWithSingleModel).toBeDefined()
- // memo wraps the component
- expect(typeof DebugWithSingleModel).toBe('object')
- })
- })
-
- // Async Operations Tests
- describe('Async Operations', () => {
- it('should handle API calls during message send', async () => {
- mockFetchConversationMessages.mockResolvedValue({ data: [] })
-
- render(} />)
-
- const textarea = screen.getByRole('textbox', { hidden: true })
- fireEvent.change(textarea, { target: { value: 'Test message' } })
-
- // Component should render without errors during async operations
- await waitFor(() => {
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
- })
- })
-
- it('should handle API errors gracefully', async () => {
- mockFetchConversationMessages.mockRejectedValue(new Error('API Error'))
-
- render(} />)
-
- // Component should still render even if API calls fail
- await waitFor(() => {
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
})
})
})
// File Upload Tests
describe('File Upload', () => {
- it('should not include files when vision is not supported', () => {
+ it('should not include files when vision is not supported', async () => {
+ const { useDebugConfigurationContext } = require('@/context/debug-configuration')
const { useProviderContext } = require('@/context/provider-context')
- const { useFeatures } = require('@/app/components/base/features/hooks')
+
+ useDebugConfigurationContext.mockReturnValue({
+ ...mockDebugConfigContext,
+ modelConfig: createMockModelConfig({
+ model_id: 'gpt-3.5-turbo',
+ }),
+ })
useProviderContext.mockReturnValue(createMockProviderContext({
textGenerationModelList: [
@@ -961,23 +936,34 @@ describe('DebugWithSingleModel', () => {
],
}))
- useFeatures.mockReturnValue((selector: any) => {
- const features = {
- ...mockFeatures,
- file: { enabled: true }, // File upload enabled
- }
- return typeof selector === 'function' ? selector({ features }) : features
+ mockFeaturesState = {
+ ...defaultFeatures,
+ file: { enabled: true },
+ }
+
+ render(} />)
+
+ fireEvent.click(screen.getByTestId('send-with-files'))
+
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+ await waitFor(() => {
+ expect(ssePost).toHaveBeenCalled()
})
- render(} />)
-
- // Should render but not allow file uploads
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+ const body = ssePost.mock.calls[0][1].body
+ expect(body.files).toEqual([])
})
- it('should support files when vision is enabled', () => {
+ it('should support files when vision is enabled', async () => {
+ const { useDebugConfigurationContext } = require('@/context/debug-configuration')
const { useProviderContext } = require('@/context/provider-context')
- const { useFeatures } = require('@/app/components/base/features/hooks')
+
+ useDebugConfigurationContext.mockReturnValue({
+ ...mockDebugConfigContext,
+ modelConfig: createMockModelConfig({
+ model_id: 'gpt-4-vision',
+ }),
+ })
useProviderContext.mockReturnValue(createMockProviderContext({
textGenerationModelList: [
@@ -1004,17 +990,22 @@ describe('DebugWithSingleModel', () => {
],
}))
- useFeatures.mockReturnValue((selector: any) => {
- const features = {
- ...mockFeatures,
- file: { enabled: true },
- }
- return typeof selector === 'function' ? selector({ features }) : features
+ mockFeaturesState = {
+ ...defaultFeatures,
+ file: { enabled: true },
+ }
+
+ render(} />)
+
+ fireEvent.click(screen.getByTestId('send-with-files'))
+
+ const { ssePost } = require('@/service/base') as { ssePost: jest.Mock }
+ await waitFor(() => {
+ expect(ssePost).toHaveBeenCalled()
})
- render(} />)
-
- expect(screen.getByTestId('chat-component')).toBeInTheDocument()
+ const body = ssePost.mock.calls[0][1].body
+ expect(body.files).toHaveLength(1)
})
})
})
diff --git a/web/app/components/billing/upgrade-btn/index.spec.tsx b/web/app/components/billing/upgrade-btn/index.spec.tsx
index f52cc97b01..d106dbe327 100644
--- a/web/app/components/billing/upgrade-btn/index.spec.tsx
+++ b/web/app/components/billing/upgrade-btn/index.spec.tsx
@@ -5,24 +5,6 @@ import UpgradeBtn from './index'
// ✅ Import real project components (DO NOT mock these)
// PremiumBadge, Button, SparklesSoft are all base components
-// ✅ Mock i18n with actual translations instead of returning keys
-jest.mock('react-i18next', () => ({
- useTranslation: () => ({
- t: (key: string) => {
- const translations: Record = {
- 'billing.upgradeBtn.encourage': 'Upgrade to Pro',
- 'billing.upgradeBtn.encourageShort': 'Upgrade',
- 'billing.upgradeBtn.plain': 'Upgrade Plan',
- 'custom.label.key': 'Custom Label',
- 'custom.key': 'Custom Text',
- 'custom.short.key': 'Short Custom',
- 'custom.all': 'All Custom Props',
- }
- return translations[key] || key
- },
- }),
-}))
-
// ✅ Mock external dependencies only
const mockSetShowPricingModal = jest.fn()
jest.mock('@/context/modal-context', () => ({
@@ -52,7 +34,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - should render with default text
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should render premium badge by default', () => {
@@ -60,7 +42,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - PremiumBadge renders with text content
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should render plain button when isPlain is true', () => {
@@ -70,7 +52,7 @@ describe('UpgradeBtn', () => {
// Assert - Button should be rendered with plain text
const button = screen.getByRole('button')
expect(button).toBeInTheDocument()
- expect(screen.getByText(/upgrade plan/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
})
it('should render short text when isShort is true', () => {
@@ -78,7 +60,7 @@ describe('UpgradeBtn', () => {
render()
// Assert
- expect(screen.getByText(/^upgrade$/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourageShort/i)).toBeInTheDocument()
})
it('should render custom label when labelKey is provided', () => {
@@ -86,7 +68,7 @@ describe('UpgradeBtn', () => {
render()
// Assert
- expect(screen.getByText(/custom label/i)).toBeInTheDocument()
+ expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
})
it('should render custom label in plain button when labelKey is provided with isPlain', () => {
@@ -96,7 +78,7 @@ describe('UpgradeBtn', () => {
// Assert
const button = screen.getByRole('button')
expect(button).toBeInTheDocument()
- expect(screen.getByText(/custom label/i)).toBeInTheDocument()
+ expect(screen.getByText(/custom\.label\.key/i)).toBeInTheDocument()
})
})
@@ -155,7 +137,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - Component renders successfully with size prop
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should render with size "m" by default', () => {
@@ -163,7 +145,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - Component renders successfully
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should render with size "custom"', () => {
@@ -171,7 +153,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - Component renders successfully with custom size
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
})
@@ -184,8 +166,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
expect(handleClick).toHaveBeenCalledTimes(1)
@@ -213,8 +195,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
@@ -240,8 +222,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
expect(mockGtag).toHaveBeenCalledTimes(1)
@@ -273,8 +255,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
expect(mockGtag).not.toHaveBeenCalled()
@@ -287,8 +269,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert - should not throw error
expect(mockGtag).not.toHaveBeenCalled()
@@ -302,8 +284,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
expect(handleClick).toHaveBeenCalledTimes(1)
@@ -321,7 +303,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - should render without error
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should handle undefined style', () => {
@@ -329,7 +311,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - should render without error
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should handle undefined onClick', async () => {
@@ -338,8 +320,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert - should fall back to setShowPricingModal
expect(mockSetShowPricingModal).toHaveBeenCalledTimes(1)
@@ -351,8 +333,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert - should not attempt to track gtag
expect(mockGtag).not.toHaveBeenCalled()
@@ -363,7 +345,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - should use default label
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should handle empty string className', () => {
@@ -371,7 +353,7 @@ describe('UpgradeBtn', () => {
render()
// Assert
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
it('should handle empty string loc', async () => {
@@ -380,8 +362,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert - empty loc should not trigger gtag
expect(mockGtag).not.toHaveBeenCalled()
@@ -392,7 +374,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - empty labelKey is falsy, so it falls back to default label
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.encourage/i)).toBeInTheDocument()
})
})
@@ -403,7 +385,7 @@ describe('UpgradeBtn', () => {
render()
// Assert - isShort should not affect plain button text
- expect(screen.getByText(/upgrade plan/i)).toBeInTheDocument()
+ expect(screen.getByText(/billing\.upgradeBtn\.plain/i)).toBeInTheDocument()
})
it('should handle isPlain with custom labelKey', () => {
@@ -411,8 +393,8 @@ describe('UpgradeBtn', () => {
render()
// Assert - labelKey should override plain text
- expect(screen.getByText(/custom text/i)).toBeInTheDocument()
- expect(screen.queryByText(/upgrade plan/i)).not.toBeInTheDocument()
+ expect(screen.getByText(/custom\.key/i)).toBeInTheDocument()
+ expect(screen.queryByText(/billing\.upgradeBtn\.plain/i)).not.toBeInTheDocument()
})
it('should handle isShort with custom labelKey', () => {
@@ -420,8 +402,8 @@ describe('UpgradeBtn', () => {
render()
// Assert - labelKey should override isShort behavior
- expect(screen.getByText(/short custom/i)).toBeInTheDocument()
- expect(screen.queryByText(/^upgrade$/i)).not.toBeInTheDocument()
+ expect(screen.getByText(/custom\.short\.key/i)).toBeInTheDocument()
+ expect(screen.queryByText(/billing\.upgradeBtn\.encourageShort/i)).not.toBeInTheDocument()
})
it('should handle all custom props together', async () => {
@@ -443,14 +425,14 @@ describe('UpgradeBtn', () => {
labelKey="custom.all"
/>,
)
- const badge = screen.getByText(/all custom props/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/custom\.all/i)
+ await user.click(badge)
// Assert
const rootElement = container.firstChild as HTMLElement
expect(rootElement).toHaveClass(customClass)
expect(rootElement).toHaveStyle(customStyle)
- expect(screen.getByText(/all custom props/i)).toBeInTheDocument()
+ expect(screen.getByText(/custom\.all/i)).toBeInTheDocument()
expect(handleClick).toHaveBeenCalledTimes(1)
expect(mockGtag).toHaveBeenCalledWith('event', 'click_upgrade_btn', {
loc: 'test-loc',
@@ -503,10 +485,10 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
// Click badge
- await user.click(badge!)
+ await user.click(badge)
// Assert
expect(handleClick).toHaveBeenCalledTimes(1)
@@ -522,70 +504,6 @@ describe('UpgradeBtn', () => {
})
})
- // Performance Tests
- describe('Performance', () => {
- it('should not rerender when props do not change', () => {
- // Arrange
- const { rerender } = render()
- const firstRender = screen.getByText(/upgrade to pro/i)
-
- // Act - Rerender with same props
- rerender()
-
- // Assert - Component should still be in document
- expect(firstRender).toBeInTheDocument()
- expect(screen.getByText(/upgrade to pro/i)).toBe(firstRender)
- })
-
- it('should rerender when props change', () => {
- // Arrange
- const { rerender } = render()
- expect(screen.getByText(/custom text/i)).toBeInTheDocument()
-
- // Act - Rerender with different labelKey
- rerender()
-
- // Assert - Should show new label
- expect(screen.getByText(/custom label/i)).toBeInTheDocument()
- expect(screen.queryByText(/custom text/i)).not.toBeInTheDocument()
- })
-
- it('should handle rapid rerenders efficiently', () => {
- // Arrange
- const { rerender } = render()
-
- // Act - Multiple rapid rerenders
- for (let i = 0; i < 10; i++)
- rerender()
-
- // Assert - Component should still render correctly
- expect(screen.getByText(/upgrade to pro/i)).toBeInTheDocument()
- })
-
- it('should be memoized with React.memo', () => {
- // Arrange
- const TestWrapper = ({ children }: { children: React.ReactNode }) => {children}
-
- const { rerender } = render(
-
-
- ,
- )
-
- const firstElement = screen.getByText(/upgrade to pro/i)
-
- // Act - Rerender parent with same props
- rerender(
-
-
- ,
- )
-
- // Assert - Element reference should be stable due to memo
- expect(screen.getByText(/upgrade to pro/i)).toBe(firstElement)
- })
- })
-
// Integration Tests
describe('Integration', () => {
it('should work with modal context for pricing modal', async () => {
@@ -594,8 +512,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert
await waitFor(() => {
@@ -610,8 +528,8 @@ describe('UpgradeBtn', () => {
// Act
render()
- const badge = screen.getByText(/upgrade to pro/i).closest('div')
- await user.click(badge!)
+ const badge = screen.getByText(/billing\.upgradeBtn\.encourage/i)
+ await user.click(badge)
// Assert - Both onClick and gtag should be called
await waitFor(() => {
diff --git a/web/app/components/explore/installed-app/index.spec.tsx b/web/app/components/explore/installed-app/index.spec.tsx
index 61ef575183..7dbf31aa42 100644
--- a/web/app/components/explore/installed-app/index.spec.tsx
+++ b/web/app/components/explore/installed-app/index.spec.tsx
@@ -172,7 +172,7 @@ describe('InstalledApp', () => {
describe('Rendering', () => {
it('should render without crashing', () => {
render()
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
+ expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
})
it('should render loading state when fetching app params', () => {
@@ -296,8 +296,8 @@ describe('InstalledApp', () => {
describe('App Mode Rendering', () => {
it('should render ChatWithHistory for CHAT mode', () => {
render()
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
- expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+ expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+ expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
})
it('should render ChatWithHistory for ADVANCED_CHAT mode', () => {
@@ -314,8 +314,8 @@ describe('InstalledApp', () => {
})
render()
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
- expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+ expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+ expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
})
it('should render ChatWithHistory for AGENT_CHAT mode', () => {
@@ -332,8 +332,8 @@ describe('InstalledApp', () => {
})
render()
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
- expect(screen.queryByTestId('text-generation-app')).not.toBeInTheDocument()
+ expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
+ expect(screen.queryByText(/Text Generation App/i)).not.toBeInTheDocument()
})
it('should render TextGenerationApp for COMPLETION mode', () => {
@@ -350,8 +350,7 @@ describe('InstalledApp', () => {
})
render()
- expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
- expect(screen.getByText(/Text Generation App/)).toBeInTheDocument()
+ expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
expect(screen.queryByText(/Workflow/)).not.toBeInTheDocument()
})
@@ -369,7 +368,7 @@ describe('InstalledApp', () => {
})
render()
- expect(screen.getByTestId('text-generation-app')).toBeInTheDocument()
+ expect(screen.getByText(/Text Generation App/i)).toBeInTheDocument()
expect(screen.getByText(/Workflow/)).toBeInTheDocument()
})
})
@@ -566,22 +565,10 @@ describe('InstalledApp', () => {
render()
// Should find and render the correct app
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
+ expect(screen.getByText(/Chat With History/i)).toBeInTheDocument()
expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
})
- it('should apply correct CSS classes to container', () => {
- const { container } = render()
- const mainDiv = container.firstChild as HTMLElement
- expect(mainDiv).toHaveClass('h-full', 'bg-background-default', 'py-2', 'pl-0', 'pr-2', 'sm:p-2')
- })
-
- it('should apply correct CSS classes to ChatWithHistory', () => {
- render()
- const chatComponent = screen.getByTestId('chat-with-history')
- expect(chatComponent).toHaveClass('overflow-hidden', 'rounded-2xl', 'shadow-md')
- })
-
it('should handle rapid id prop changes', async () => {
const app1 = { ...mockInstalledApp, id: 'app-1' }
const app2 = { ...mockInstalledApp, id: 'app-2' }
@@ -627,50 +614,6 @@ describe('InstalledApp', () => {
})
})
- describe('Component Memoization', () => {
- it('should be wrapped with React.memo', () => {
- // React.memo wraps the component with a special $$typeof symbol
- const componentType = (InstalledApp as React.MemoExoticComponent).$$typeof
- expect(componentType).toBeDefined()
- })
-
- it('should re-render when props change', () => {
- const { rerender } = render()
- expect(screen.getByText(/installed-app-123/)).toBeInTheDocument()
-
- // Change to a different app
- const differentApp = {
- ...mockInstalledApp,
- id: 'different-app-456',
- app: {
- ...mockInstalledApp.app,
- name: 'Different App',
- },
- }
- ;(useContext as jest.Mock).mockReturnValue({
- installedApps: [differentApp],
- isFetchingInstalledApps: false,
- })
-
- rerender()
- expect(screen.getByText(/different-app-456/)).toBeInTheDocument()
- })
-
- it('should maintain component stability across re-renders with same props', () => {
- const { rerender } = render()
- const initialCallCount = mockUpdateAppInfo.mock.calls.length
-
- // Rerender with same props - useEffect may still run due to dependencies
- rerender()
-
- // Component should render successfully
- expect(screen.getByTestId('chat-with-history')).toBeInTheDocument()
-
- // Mock calls might increase due to useEffect, but component should be stable
- expect(mockUpdateAppInfo.mock.calls.length).toBeGreaterThanOrEqual(initialCallCount)
- })
- })
-
describe('Render Priority', () => {
it('should show error before loading state', () => {
;(useGetInstalledAppParams as jest.Mock).mockReturnValue({
diff --git a/web/jest.config.ts b/web/jest.config.ts
index 6c2d88448c..e86ec5af74 100644
--- a/web/jest.config.ts
+++ b/web/jest.config.ts
@@ -44,6 +44,7 @@ const config: Config = {
// A list of reporter names that Jest uses when writing coverage reports
coverageReporters: [
+ 'json-summary',
'json',
'text',
'text-summary',
diff --git a/web/jest.setup.ts b/web/jest.setup.ts
index 9c3b0bf3bd..a4d358d805 100644
--- a/web/jest.setup.ts
+++ b/web/jest.setup.ts
@@ -42,6 +42,22 @@ if (typeof window !== 'undefined') {
ensureWritable(HTMLElement.prototype, 'focus')
}
+if (typeof globalThis.ResizeObserver === 'undefined') {
+ globalThis.ResizeObserver = class {
+ observe() {
+ return undefined
+ }
+
+ unobserve() {
+ return undefined
+ }
+
+ disconnect() {
+ return undefined
+ }
+ }
+}
+
afterEach(() => {
cleanup()
})
diff --git a/web/package.json b/web/package.json
index d54e6effb2..158dfbcae8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -200,6 +200,7 @@
"eslint-plugin-tailwindcss": "^3.18.2",
"globals": "^15.15.0",
"husky": "^9.1.7",
+ "istanbul-lib-coverage": "^3.2.2",
"jest": "^29.7.0",
"jsdom-testing-mocks": "^1.16.0",
"knip": "^5.66.1",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8523215a07..6dbc0fabd9 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -512,6 +512,9 @@ importers:
husky:
specifier: ^9.1.7
version: 9.1.7
+ istanbul-lib-coverage:
+ specifier: ^3.2.2
+ version: 3.2.2
jest:
specifier: ^29.7.0
version: 29.7.0(@types/node@18.15.0)(ts-node@10.9.2(@types/node@18.15.0)(typescript@5.9.3))