add unit tests (opendatahub-io#5337)

Author: divyanshiGupta

packages/gen-ai/frontend/src/app/Chatbot/components/__tests__/DeleteFileModal.spec.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable camelcase */
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DeleteFileModal from '~/app/Chatbot/components/DeleteFileModal';
+import { FileModel } from '~/app/types';
+
+describe('DeleteFileModal', () => {
+  const mockFile: FileModel = {
+    id: 'file-123',
+    filename: 'test-document.pdf',
+    bytes: 1024,
+    created_at: 1609459200,
+    purpose: 'assistants',
+    object: 'file',
+    status: 'completed',
+    expires_at: 1612137600,
+    status_details: '',
+  };
+
+  const defaultProps = {
+    isOpen: true,
+    file: mockFile,
+    onClose: jest.fn(),
+    onConfirm: jest.fn(),
+    isDeleting: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when file is null', () => {
+    const { container } = render(<DeleteFileModal {...defaultProps} file={null} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders modal with file information', () => {
+    render(<DeleteFileModal {...defaultProps} />);
+
+    expect(screen.getByText('Delete file?')).toBeInTheDocument();
+    expect(screen.getByText(/test-document.pdf/i)).toBeInTheDocument();
+    expect(screen.getByText(/file will be deleted/i)).toBeInTheDocument();
+  });
+
+  it('calls onConfirm when delete button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnConfirm = jest.fn();
+
+    render(<DeleteFileModal {...defaultProps} onConfirm={mockOnConfirm} />);
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    await user.click(deleteButton);
+
+    expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClose = jest.fn();
+
+    render(<DeleteFileModal {...defaultProps} onClose={mockOnClose} />);
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('disables buttons when deleting', () => {
+    render(<DeleteFileModal {...defaultProps} isDeleting />);
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+
+    expect(deleteButton).toBeDisabled();
+    expect(cancelButton).toBeDisabled();
+  });
+
+  it('does not render when isOpen is false', () => {
+    render(<DeleteFileModal {...defaultProps} isOpen={false} />);
+
+    expect(screen.queryByText('Delete file?')).not.toBeInTheDocument();
+  });
+});

packages/gen-ai/frontend/src/app/Chatbot/components/__tests__/DeletePlaygroundModal.spec.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { fireFormTrackingEvent } from '@odh-dashboard/internal/concepts/analyticsTracking/segmentIOUtils';
+import { TrackingOutcome } from '@odh-dashboard/internal/concepts/analyticsTracking/trackingProperties';
+import DeletePlaygroundModal from '~/app/Chatbot/components/DeletePlaygroundModal';
+import { GenAiContext } from '~/app/context/GenAiContext';
+import { ChatbotContext } from '~/app/context/ChatbotContext';
+import { deleteLSD } from '~/app/services/llamaStackService';
+
+jest.mock('~/app/services/llamaStackService');
+jest.mock('@odh-dashboard/internal/concepts/analyticsTracking/segmentIOUtils');
+
+jest.mock('~/app/shared/DeleteModal', () => ({
+  __esModule: true,
+  default: ({
+    title,
+    onClose,
+    onDelete,
+    deleting,
+    error,
+    submitButtonLabel,
+    deleteName,
+    children,
+  }: {
+    title: string;
+    onClose: () => void;
+    onDelete: () => void;
+    deleting: boolean;
+    error?: Error;
+    submitButtonLabel: string;
+    deleteName: string;
+    children: React.ReactNode;
+  }) => (
+    <div data-testid="delete-modal">
+      <h1>{title}</h1>
+      <p>{children}</p>
+      <p>Deleting: {deleteName}</p>
+      {error && <div data-testid="error">{error.message}</div>}
+      <button onClick={onDelete} disabled={deleting}>
+        {submitButtonLabel}
+      </button>
+      <button onClick={onClose}>Cancel</button>
+    </div>
+  ),
+}));
+
+const mockDeleteLSD = jest.mocked(deleteLSD);
+const mockFireFormTrackingEvent = jest.mocked(fireFormTrackingEvent);
+
+const mockNamespace = { name: 'test-namespace', displayName: 'Test Namespace' };
+const mockGenAiContextValue = {
+  namespace: mockNamespace,
+  isLoading: false,
+  error: undefined,
+};
+
+const mockLsdStatus = {
+  name: 'test-lsd',
+  phase: 'Ready' as const,
+  version: '1.0.0',
+  distributionConfig: {
+    activeDistribution: 'test-dist',
+    providers: [],
+    availableDistributions: {},
+  },
+};
+
+const mockChatbotContextValue = {
+  lsdStatus: mockLsdStatus,
+  refresh: jest.fn(),
+  models: [],
+  modelsLoaded: true,
+  lsdStatusLoaded: true,
+  aiModels: [],
+  aiModelsLoaded: true,
+  aiModelsError: undefined,
+  maasModels: [],
+  maasModelsLoaded: true,
+  maasModelsError: undefined,
+  modelsError: undefined,
+  lsdStatusError: undefined,
+  selectedModel: '',
+  setSelectedModel: jest.fn(),
+  lastInput: '',
+  setLastInput: jest.fn(),
+};
+
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <GenAiContext.Provider value={mockGenAiContextValue as React.ContextType<typeof GenAiContext>}>
+    <ChatbotContext.Provider
+      value={mockChatbotContextValue as React.ContextType<typeof ChatbotContext>}
+    >
+      {children}
+    </ChatbotContext.Provider>
+  </GenAiContext.Provider>
+);
+
+describe('DeletePlaygroundModal', () => {
+  const defaultProps = {
+    onCancel: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders delete modal with correct content', () => {
+    render(
+      <TestWrapper>
+        <DeletePlaygroundModal {...defaultProps} />
+      </TestWrapper>,
+    );
+
+    expect(screen.getByText('Delete playground?')).toBeInTheDocument();
+    expect(
+      screen.getByText(/This action cannot be undone. This will delete the playground/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Deleting: Test Namespace/i)).toBeInTheDocument();
+  });
+
+  it('calls onCancel and fires cancel tracking event', async () => {
+    const user = userEvent.setup();
+    const mockOnCancel = jest.fn();
+
+    render(
+      <TestWrapper>
+        <DeletePlaygroundModal onCancel={mockOnCancel} />
+      </TestWrapper>,
+    );
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    await user.click(cancelButton);
+
+    expect(mockOnCancel).toHaveBeenCalledTimes(1);
+    expect(mockFireFormTrackingEvent).toHaveBeenCalledWith('Playground Delete', {
+      outcome: TrackingOutcome.cancel,
+      namespace: 'test-namespace',
+    });
+  });
+
+  it('successfully deletes playground', async () => {
+    const user = userEvent.setup();
+    const mockOnCancel = jest.fn();
+    const mockRefresh = jest.fn();
+
+    mockDeleteLSD.mockResolvedValue('success');
+
+    render(
+      <GenAiContext.Provider
+        value={mockGenAiContextValue as React.ContextType<typeof GenAiContext>}
+      >
+        <ChatbotContext.Provider
+          value={
+            { ...mockChatbotContextValue, refresh: mockRefresh } as React.ContextType<
+              typeof ChatbotContext
+            >
+          }
+        >
+          <DeletePlaygroundModal onCancel={mockOnCancel} />
+        </ChatbotContext.Provider>
+      </GenAiContext.Provider>,
+    );
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(mockDeleteLSD).toHaveBeenCalledWith('test-namespace', 'test-lsd');
+    });
+
+    await waitFor(() => {
+      expect(mockOnCancel).toHaveBeenCalled();
+      expect(mockRefresh).toHaveBeenCalled();
+      expect(mockFireFormTrackingEvent).toHaveBeenCalledWith('Playground Delete', {
+        outcome: TrackingOutcome.submit,
+        success: true,
+        namespace: 'test-namespace',
+      });
+    });
+  });
+
+  it('handles deletion error', async () => {
+    const user = userEvent.setup();
+    const mockError = new Error('Failed to delete');
+
+    mockDeleteLSD.mockRejectedValue(mockError);
+
+    render(
+      <TestWrapper>
+        <DeletePlaygroundModal {...defaultProps} />
+      </TestWrapper>,
+    );
+
+    const deleteButton = screen.getByRole('button', { name: /delete/i });
+    await user.click(deleteButton);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error')).toHaveTextContent('Failed to delete');
+    });
+
+    await waitFor(() => {
+      expect(mockFireFormTrackingEvent).toHaveBeenCalledWith('Playground Delete', {
+        outcome: TrackingOutcome.submit,
+        success: false,
+        namespace: 'test-namespace',
+        error: 'Failed to delete',
+      });
+    });
+  });
+});