tc1

import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import axios from 'axios';
import ChatInterface from './ChatInterface'; // Adjust the import based on your file structure

jest.mock('axios');

const mockConversations = [{
    id: 1,
    title: 'Test Conversation',
    messages: [{ role: 'user', content: 'Test Message' }]
}];

const mockProps = {
    theme: 'dark',
    currentConversationId: 1,
    setCurrentConversationId: jest.fn(),
    conversations: mockConversations,
    setConversations: jest.fn(),
};

describe('ChatInterface Component', () => {
    // Setup before each test
    beforeEach(() => {
        axios.post.mockClear();
    });

    // Test if the component renders without crashing
    it('renders without crashing', () => {
        render(<ChatInterface {...mockProps} />);
        expect(screen.getByText(/Test Conversation/i)).toBeInTheDocument();
    });

    // Test state changes on events
    it('updates inputValue on text input change', () => {
        render(<ChatInterface {...mockProps} />);
        const inputField = screen.getByRole('textbox');
        fireEvent.change(inputField, { target: { value: 'New Message' } });
        expect(inputField.value).toBe('New Message');
    });

    // Test sending a message
    it('calls handleSendMessage on send button click', async () => {
        render(<ChatInterface {...mockProps} />);
        const sendButton = screen.getByRole('button', { name: /send/i });
        fireEvent.click(sendButton);
        
        await waitFor(() => {
            expect(mockProps.setConversations).toHaveBeenCalled();
        });
    });

    // Test file upload functionality
    it('handles file upload', async () => {
        axios.post.mockResolvedValueOnce({ data: { requestId: '123' } });
        axios.get.mockResolvedValueOnce({ data: { status: 'completed' } });

        render(<ChatInterface {...mockProps} />);
        const uploadButton = screen.getByText(/Upload/i);
        fireEvent.click(uploadButton);

        const fileInput = screen.getByLabelText(/Choose a file/i);
        const file = new File(['hello'], 'hello.png', { type: 'image/png' });
        fireEvent.change(fileInput, { target: { files: [file] } });

        await waitFor(() => {
            expect(axios.post).toHaveBeenCalled();
        });
    });

    // Test for conditional rendering
    it('renders CircularProgress when isLoading is true', () => {
        render(<ChatInterface {...{ ...mockProps, isLoading: true }} />);
        expect(screen.getByRole('progressbar')).toBeInTheDocument();
    });

    // Snapshot Test
    it('matches snapshot', () => {
        const { asFragment } = render(<ChatInterface {...mockProps} />);
        expect(asFragment()).toMatchSnapshot();
    });

    // More tests for each feature like useEffect, useRef, error handling, etc.
});