added test cases of chatMessageContainer

Author: Rohini-Microsoft

ResearchAssistant/App/frontend/src/components/ChatMessageContainer/ChatMessageContainer.test.tsx

@@ -1,26 +1,25 @@
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import ChatMessageContainer, { parseCitationFromMessage } from './ChatMessageContainer'
-
-import { type ChatMessage } from '../../api'
-
+import { render, screen, fireEvent } from '@testing-library/react'
+import { ChatMessageContainer } from './ChatMessageContainer'
+import { type ChatMessage } from '../../api/models'
+import { Answer } from '../Answer'
 jest.mock('remark-supersub', () => () => {})
 jest.mock('remark-gfm', () => () => {})
 jest.mock('rehype-raw', () => () => {})
-jest.mock('../Answer', () => ({
+jest.mock('../Answer/Answer', () => ({
   Answer: jest.fn((props: any) => <div>
         <p>{props.answer.answer}</p>
         <span>Mock Answer Component</span>
-        {props.answer.answer === 'Generating answer...'
+        {props.answer.answer == 'Generating answer...'
           ? <button onClick={() => props.onCitationClicked()}>Mock Citation Loading</button>
-          : <button onClick={() => props.onCitationClicked({ title: 'Test Citation' })}>Mock Citation</button>
+          : <button aria-label="citationButton" onClick={() => props.onCitationClicked({ title: 'Test Citation' })}>Mock Citation</button>
         }
 
     </div>)
 }))
 
 const mockOnShowCitation = jest.fn()
+
 describe('ChatMessageContainer', () => {
   beforeEach(() => {
     global.fetch = jest.fn()
@@ -52,26 +51,36 @@ describe('ChatMessageContainer', () => {
     date: new Date().toDateString()
   }
 
-  const nullMessage: ChatMessage = {
-    role: '',
-    content: 'Null role message',
-    id: '4',
-    date: ''
-  }
-  it('renders user messages correctly', () => {
-    render(<ChatMessageContainer messages={[userMessage]} onShowCitation={mockOnShowCitation} showLoadingMessage={false} />)
-    expect(screen.getByText('User message')).toBeInTheDocument()
-  })
+  it('renders user and assistant messages correctly', () => {
+    render(
+            <ChatMessageContainer
+                messages={[userMessage, assistantMessage]}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+    )
 
-  it('renders assistant messages correctly', () => {
-    render(<ChatMessageContainer messages={[assistantMessage]} onShowCitation={mockOnShowCitation} showLoadingMessage={false} />)
-    expect(screen.getByText('Assistant message')).toBeInTheDocument()
+    // Check if user message is displayed
+    expect(screen.getByText('User message')).toBeInTheDocument()
+    screen.debug()
+    // Check if assistant message is displayed via Answer component
+    expect(screen.getByText('Mock Answer Component')).toBeInTheDocument()
+    expect(Answer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        answer: {
+          answer: 'Assistant message',
+          citations: []
+        }
+      }),
+      {}
+    )
   })
 
   it('renders an error message correctly', () => {
     render(
             <ChatMessageContainer
                 messages={[errorMessage]}
+
                 showLoadingMessage={false}
                 onShowCitation={mockOnShowCitation}
             />
@@ -82,41 +91,64 @@ describe('ChatMessageContainer', () => {
     expect(screen.getByText('Error message')).toBeInTheDocument()
   })
 
-  it('returns citations when message role is "tool" and content is valid JSON', () => {
-    const message: ChatMessage = {
-      role: 'tool',
-      content: JSON.stringify({ citations: [{ filepath: 'path/to/file', chunk_id: '1' }] }),
-      id: '1',
-      date: ''
-    }
-    const citations = parseCitationFromMessage(message)
-    expect(citations).toEqual([{ filepath: 'path/to/file', chunk_id: '1' }])
+  it('displays the loading message when showLoadingMessage is true', () => {
+    render(
+            <ChatMessageContainer
+                messages={[]}
+
+                showLoadingMessage={true}
+                onShowCitation={mockOnShowCitation}
+            />
+    )
+    // Check if the loading message is displayed via Answer component
+    expect(screen.getByText('Generating answer...')).toBeInTheDocument()
+  })
+
+  it('calls onShowCitation when a citation is clicked', () => {
+    render(
+            <ChatMessageContainer
+                messages={[assistantMessage]}
+                showLoadingMessage={false}
+                onShowCitation={mockOnShowCitation}
+            />
+    )
+
+    // Simulate a citation click
+    const citationButton = screen.getByText('Mock Citation')
+    fireEvent.click(citationButton)
+
+    // Check if onShowCitation is called with the correct argument
+    expect(mockOnShowCitation).toHaveBeenCalledWith({ title: 'Test Citation' })
   })
 
-  it('returns an empty array when message role is "tool" and content is invalid JSON', () => {
-    const message: ChatMessage = {
-      role: 'tool',
-      content: 'invalid JSON',
-      id: '1',
-      date: ''
-    }
-    const citations = parseCitationFromMessage(message)
-    expect(citations).toEqual([])
+  test('does not call onShowCitation when citation click is a no-op', () => {
+    render(
+            <ChatMessageContainer
+                messages={[]}
+                showLoadingMessage={true}
+                onShowCitation={mockOnShowCitation} // No-op function
+            />
+    )
+    // Simulate a citation click
+    const citationButton = screen.getByRole('button', { name: 'Mock Citation Loading' })
+    fireEvent.click(citationButton)
+
+    // Check if onShowCitation is NOT called
+    expect(mockOnShowCitation).not.toHaveBeenCalled()
   })
 
-  it('returns an empty array when message role is not "tool"', () => {
-    const message: ChatMessage = {
-      role: 'user',
-      content: JSON.stringify({ citations: [{ filepath: 'path/to/file', chunk_id: '1' }] }),
-      id: '1',
-      date: ''
-    }
-    const citations = parseCitationFromMessage(message)
-    expect(citations).toEqual([])
+  test('calls onShowCitation when citation button is clicked', async () => {
+    render(<ChatMessageContainer messages={[userMessage, assistantMessage]} onShowCitation={mockOnShowCitation} showLoadingMessage={false} />)
+    const buttonEle = await screen.findByRole('button', { name: 'citationButton' })
+    fireEvent.click(buttonEle)
+    expect(mockOnShowCitation).toHaveBeenCalledWith({ title: 'Test Citation' })
   })
 
-  it('handles null role messages correctly', () => {
-    render(<ChatMessageContainer messages={[nullMessage]} onShowCitation={mockOnShowCitation} showLoadingMessage={false} />)
-    expect(screen.queryByText('Null role message')).not.toBeInTheDocument()
+  test('does not call onCitationClicked when citation button is clicked', async () => {
+    const mockOnCitationClicked = jest.fn()
+    render(<ChatMessageContainer messages={[userMessage, assistantMessage]} onShowCitation={mockOnShowCitation} showLoadingMessage={false} />)
+    const buttonEle = await screen.findByRole('button', { name: 'citationButton' })
+    fireEvent.click(buttonEle)
+    expect(mockOnCitationClicked).not.toHaveBeenCalled()
   })
 })

ResearchAssistant/App/frontend/src/components/ChatMessageContainer/ChatMessageContainer.tsx

@@ -11,7 +11,7 @@ type ChatMessageContainerProps = {
   showLoadingMessage: boolean;
 };
 
-export const parseCitationFromMessage = (message: ChatMessage) => {
+const parseCitationFromMessage = (message: ChatMessage) => {
   if (message?.role && message?.role === "tool") {
     try {
       const toolMessage = JSON.parse(message.content) as ToolMessageContent;
@@ -23,7 +23,7 @@ export const parseCitationFromMessage = (message: ChatMessage) => {
   return [];
 };
 
-const ChatMessageContainer = (props: ChatMessageContainerProps): JSX.Element => {
+export const ChatMessageContainer = (props: ChatMessageContainerProps): JSX.Element => {
   const [ASSISTANT, TOOL, ERROR, USER] = ["assistant", "tool", "error", "user"];
   const { messages, onShowCitation , showLoadingMessage} = props;
   return (