test: add unit tests for ClearChatsButton and ThemeSelector components

Author: danny-avila

client/src/components/Nav/SettingsTabs/ClearChatsButton.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ClearChatsButton } from './General';
+
+describe('ClearChatsButton', () => {
+  let mockOnClick;
+
+  beforeEach(() => {
+    mockOnClick = jest.fn();
+  });
+
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
+    );
+
+    expect(getByText('Clear all chats')).toBeInTheDocument();
+    expect(getByText('Clear')).toBeInTheDocument();
+  });
+
+  it('renders confirm clear when confirmClear is true', () => {
+    const { getByText } = render(
+      <ClearChatsButton confirmClear={true} showText={true} onClick={mockOnClick} />
+    );
+
+    expect(getByText('Confirm Clear')).toBeInTheDocument();
+  });
+
+  it('calls onClick when the button is clicked', () => {
+    const { getByText } = render(
+      <ClearChatsButton confirmClear={false} showText={true} onClick={mockOnClick} />
+    );
+
+    fireEvent.click(getByText('Clear'));
+
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

client/src/components/Nav/SettingsTabs/General.tsx

@@ -4,7 +4,7 @@ import { ThemeContext } from '~/hooks/ThemeContext';
 import React, { useState, useContext, useCallback } from 'react';
 import { useClearConversationsMutation } from '~/data-provider';
 
-const ThemeSelector = ({ theme, onChange }: { theme: string, onChange: (value: string) => void }) => (
+export const ThemeSelector = ({ theme, onChange }: { theme: string, onChange: (value: string) => void }) => (
   <div className="flex items-center justify-between">
     <div>Theme</div>
     <select

client/src/components/Nav/SettingsTabs/ThemeSelector.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { ThemeSelector } from './General';
+
+describe('ThemeSelector', () => {
+  let mockOnChange;
+
+  beforeEach(() => {
+    mockOnChange = jest.fn();
+  });
+
+  it('renders correctly', () => {
+    const { getByText, getByDisplayValue } = render(
+      <ThemeSelector theme="system" onChange={mockOnChange} />
+    );
+
+    expect(getByText('Theme')).toBeInTheDocument();
+    expect(getByDisplayValue('System')).toBeInTheDocument();
+  });
+
+  it('calls onChange when the select value changes', () => {
+    const { getByDisplayValue } = render(
+      <ThemeSelector theme="system" onChange={mockOnChange} />
+    );
+
+    fireEvent.change(getByDisplayValue('System'), { target: { value: 'dark' } });
+
+    expect(mockOnChange).toHaveBeenCalledWith('dark');
+  });
+});