legco_ai_assistant/frontend/src/test/components/ResponsePanel.test.tsx

78 lines
2.8 KiB
TypeScript

import React from 'react'
import { render, screen } from '@testing-library/react'
import { ResponsePanel } from '../../components/ResponsePanel'
import type { SourceMetadata } from '../../types'
describe('ResponsePanel', () => {
const mockSources: SourceMetadata[] = [
{
filename: 'document1.pdf',
upload_date: '2024-01-15',
content_summary: 'Introduction to RAG systems',
chunk_index: 0,
},
{
filename: 'document2.txt',
upload_date: '2024-01-16',
content_summary: 'Advanced retrieval techniques',
chunk_index: 1,
},
]
it('shows empty state message when no answer and not loading', () => {
render(<ResponsePanel answer={null} sources={[]} isLoading={false} error={null} />)
expect(screen.getByText(/Ask a question to see the answer here/i)).toBeInTheDocument()
})
it('shows loading skeletons when isLoading is true', () => {
render(<ResponsePanel answer={null} sources={[]} isLoading={true} error={null} />)
const skeletonElements = screen.getAllByTestId('skeleton-line')
expect(skeletonElements).toHaveLength(3)
expect(skeletonElements[0]).toHaveClass('w-full')
expect(skeletonElements[1]).toHaveClass('w-4/5')
expect(skeletonElements[2]).toHaveClass('w-3/5')
})
it('shows error message when error prop is set', () => {
render(
<ResponsePanel
answer={null}
sources={[]}
isLoading={false}
error="Failed to fetch answer"
/>
)
expect(screen.getByText(/Failed to fetch answer/i)).toBeInTheDocument()
})
it('renders answer text as bullet points', () => {
const answer = `- First point\n- Second point\n• Third point\nPlain text line`
render(<ResponsePanel answer={answer} sources={[]} isLoading={false} error={null} />)
expect(screen.getByText('First point')).toBeInTheDocument()
expect(screen.getByText('Second point')).toBeInTheDocument()
expect(screen.getByText('Third point')).toBeInTheDocument()
expect(screen.getByText('Plain text line')).toBeInTheDocument()
})
it('renders source metadata cards', () => {
render(
<ResponsePanel
answer="Test answer"
sources={mockSources}
isLoading={false}
error={null}
/>
)
expect(screen.getByText('document1.pdf')).toBeInTheDocument()
expect(screen.getByText('document2.txt')).toBeInTheDocument()
expect(screen.getByText('2024-01-15')).toBeInTheDocument()
expect(screen.getByText('Introduction to RAG systems')).toBeInTheDocument()
expect(screen.getByText('Advanced retrieval techniques')).toBeInTheDocument()
})
it('does not show sources section when sources array is empty', () => {
render(<ResponsePanel answer="Test answer" sources={[]} isLoading={false} error={null} />)
expect(screen.queryByText(/sources/i)).not.toBeInTheDocument()
})
})