init test suite

src/components/ThemeSelection.tsx

@@ -15,6 +15,7 @@ export function ThemeSelectionOptions() {
     children.push(
       <IconButton
         as="div"
+        role="button"
         key={theme.name}
         onClick={() => userOptionsStore.selectTheme(theme.name)}
         size="xs"

src/components/__tests__/ThemeSelection.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ThemeSelectionOptions } from '../ThemeSelection';
+import userOptionsStore from '../../stores/UserOptionsStore';
+import * as MobileContext from '../contexts/MobileContext';
+
+// Mock dependencies
+vi.mock('../../layout/theme/color-themes', () => ({
+  getColorThemes: () => [
+    { 
+      name: 'light', 
+      colors: { 
+        background: { primary: '#ffffff', secondary: '#f0f0f0' },
+        text: { secondary: '#333333' }
+      }
+    },
+    { 
+      name: 'dark', 
+      colors: { 
+        background: { primary: '#121212', secondary: '#1e1e1e' },
+        text: { secondary: '#e0e0e0' }
+      }
+    }
+  ]
+}));
+
+vi.mock('../../stores/UserOptionsStore', () => ({
+  default: {
+    selectTheme: vi.fn()
+  }
+}));
+
+vi.mock('../toolbar/Toolbar', () => ({
+  toolbarButtonZIndex: 100
+}));
+
+describe('ThemeSelectionOptions', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders theme options for desktop view', () => {
+    // Mock useIsMobile to return false (desktop view)
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(false);
+    
+    render(<ThemeSelectionOptions />);
+    
+    // Should render 2 theme buttons (from our mock)
+    const buttons = screen.getAllByRole("button")
+    expect(buttons).toHaveLength(2);
+  });
+
+  it('renders theme options for mobile view', () => {
+    // Mock useIsMobile to return true (mobile view)
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(true);
+    
+    render(<ThemeSelectionOptions />);
+    
+    // Should still render 2 theme buttons
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(2);
+  });
+
+  it('calls selectTheme when a theme button is clicked', () => {
+    vi.spyOn(MobileContext, 'useIsMobile').mockReturnValue(false);
+    
+    render(<ThemeSelectionOptions />);
+    
+    const buttons = screen.getAllByRole('button');
+    fireEvent.click(buttons[0]); // Click the first theme button (light)
+    
+    // Verify that selectTheme was called with the correct theme name
+    expect(userOptionsStore.selectTheme).toHaveBeenCalledWith('light');
+    
+    fireEvent.click(buttons[1]); // Click the second theme button (dark)
+    expect(userOptionsStore.selectTheme).toHaveBeenCalledWith('dark');
+  });
+});

src/components/__tests__/WelcomeHome.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import WelcomeHomeMessage from '../WelcomeHome';
+import { welcome_home_text, welcome_home_tip } from '../../static-data/welcome_home_text';
+import { renderMarkdown } from '../markdown/MarkdownComponent';
+
+// Mock the renderMarkdown function
+vi.mock('../markdown/MarkdownComponent', () => ({
+  renderMarkdown: vi.fn((text) => `Rendered: ${text}`),
+}));
+
+describe('WelcomeHomeMessage', () => {
+  it('renders correctly when visible', () => {
+    render(<WelcomeHomeMessage visible={true} />);
+    
+    // Check if the rendered markdown content is in the document
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+    expect(screen.getByText(`Rendered: ${welcome_home_tip}`)).toBeInTheDocument();
+    
+    // Verify that renderMarkdown was called with the correct arguments
+    expect(renderMarkdown).toHaveBeenCalledWith(welcome_home_text);
+    expect(renderMarkdown).toHaveBeenCalledWith(welcome_home_tip);
+  });
+
+  it('applies animation variants based on visible prop', () => {
+    const { rerender } = render(<WelcomeHomeMessage visible={true} />);
+    
+    // When visible is true, the component should have the visible animation state
+    // Since we've mocked framer-motion, we can't directly test the animation state
+    // But we can verify that the component renders the content
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+    
+    // Re-render with visible=false
+    rerender(<WelcomeHomeMessage visible={false} />);
+    
+    // Content should still be in the document even when not visible
+    // (since we've mocked the animations)
+    expect(screen.getByText(`Rendered: ${welcome_home_text}`)).toBeInTheDocument();
+  });
+});